Câu hỏi:
19/10/2024 385
Thực hành: Tham khảo một số biểu mẫu thu thập thông tin khi em đăng kí sử dụng một dịch vụ nào đó (thư điện tử, thư viện, phiếu khảo sát...) và viết biểu mẫu để thực hiện.
Thực hành: Tham khảo một số biểu mẫu thu thập thông tin khi em đăng kí sử dụng một dịch vụ nào đó (thư điện tử, thư viện, phiếu khảo sát...) và viết biểu mẫu để thực hiện.
Quảng cáo
Trả lời:
Giải bởi Vietjack
Hướng dẫn: Thực hiện các bước giống như trong Nhiệm vụ 2 của bài thực
hành trên lớp.
Bước 1: Xác định các đầu mục thông tin cần thu thập.
Bước 2: Với mỗi loại thông tin, xác định loại phần tử phù hợp nhất.
Bước 3: Lần lượt thêm các phần tử theo cấu trúc đã học, chú ý sử dụng các thuộc tính for, id, name và value phù hợp để đảm bảo các đối tượng đã thêm thực hiện như mong đợi.
Bước 4: Chỉnh lại cách trình bày như cỡ chữ, màu chữ,... hay nhóm các nội dung thành nhóm bằng thẻ <fieldset> và <legend>.
Giải thích:
1. Thẻ <form>: Xác định biểu mẫu thu thập dữ liệu.
action="/register": Đường dẫn nơi dữ liệu sẽ được gửi để xử lý đăng ký.
method="POST": Sử dụng phương thức POST để gửi dữ liệu một cách an toàn.
2. Họ và Tên: Sử dụng thẻ <input type="text"> để yêu cầu người dùng nhập họ tên.
3.Tuổi: Sử dụng thẻ <input type="number"> để yêu cầu người dùng nhập tuổi trong khoảng từ 1 đến 100.
4. Email: Sử dụng thẻ <input type="email"> để yêu cầu người dùng nhập địa chỉ email hợp lệ.
5. Số điện thoại: Sử dụng thẻ <input type="tel"> với mẫu số điện thoại Việt Nam (10 chữ số).
6. Mật khẩu: Sử dụng thẻ <input type="password"> để yêu cầu người dùng nhập mật khẩu, dữ liệu này sẽ không hiển thị khi nhập.
7. Giới tính: Sử dụng thẻ <input type="radio"> để lựa chọn giới tính.
8. Nhận thông báo: Sử dụng thẻ <input type="checkbox"> để cho phép người dùng chọn có muốn nhận thông báo qua email hay không.
9. Điều khoản sử dụng: Sử dụng thẻ <input type="checkbox"> để yêu cầu người dùng đồng ý với điều khoản sử dụng dịch vụ trước khi đăng ký.
10. Nút gửi: Sử dụng thẻ <input type="submit"> để gửi dữ liệu biểu mẫu.
Lưu ý:
Biểu mẫu này rất phổ biến và có thể được sử dụng để đăng ký tài khoản cho bất kỳ dịch vụ trực tuyến nào, như email, dịch vụ thư viện, khảo sát trực tuyến.
Trong thực tế, bạn có thể tùy chỉnh biểu mẫu để thêm các trường dữ liệu cụ thể hơn tùy theo yêu cầu của dịch vụ.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biểu mẫu Đăng ký</title>
<style>
body {
margin: 20px;
color: #333;
}
fieldset {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
color: #0066cc;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #0066cc;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #005bb5;
}
</style>
</head>
<body>
<h2>Đăng ký Sử dụng Dịch vụ</h2>
<form action="/register" method="POST">
<fieldset>
<legend>Thông tin cá nhân</legend>
<label for="hoTen">Họ và Tên:</label>
<input type="text" id="hoTen" name="hoTen" required>
<label for="tuoi">Tuổi:</label>
<input type="number" id="tuoi" name="tuoi" min="1" max="100" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="soDienThoai">Số điện thoại:</label>
<input type="tel" id="soDienThoai" name="soDienThoai" pattern="[0-9]{10}" required placeholder="10 chữ số">
<label for="matKhau">Mật khẩu:</label>
<input type="password" id="matKhau" name="matKhau" required>
<label>Giới tính:</label>
<input type="radio" id="nam" name="gioiTinh" value="Nam" required>
<label for="nam">Nam</label>
<input type="radio" id="nu" name="gioiTinh" value="Nữ" required>
<label for="nu">Nữ</label>
</fieldset>
<fieldset>
<legend>Tùy chọn</legend>
<label>
<input type="checkbox" name="nhanThongBao" value="1"> Tôi muốn nhận thông báo qua email
</label>
<label>
<input type="checkbox" name="dongY" required> Tôi đồng ý với điều khoản sử dụng dịch vụ
</label>
</fieldset>
<input type="submit" value="Đăng ký">
</form>
</body>
</html>
Nhà sách vietjack
Hot: 500+ Đề thi thử tốt nghiệp THPT các môn, ĐGNL các trường ĐH... file word có đáp án (2025). Tải ngay
- Sổ tay Lịch Sử 12 (chương trình mới) ( 18.000₫ )
- 250+ Công thức giải nhanh môn Toán 12 (chương trình mới) ( 18.000₫ )
- Sổ tay lớp 12 các môn Toán, Lí, Hóa, Văn, Sử, Địa, KTPL (chương trình mới) ( 36.000₫ )
- Tuyển tập 30 đề thi đánh giá năng lực Đại học Quốc gia Hà Nội, TP Hồ Chí Minh (2 cuốn) ( 150.000₫ )
Bình luận
CÂU HỎI HOT CÙNG CHỦ ĐỀ
Câu 1:
Để tạo một ô chọn danh sách thả xuồng trong biểu mẫu, em sử dụng câu lệnh nào dưới đây?
A. <input type="select">.
B. <input type="dropdown">.
C. ‹select›.
D. <dropdown>.
Để tạo một ô chọn danh sách thả xuồng trong biểu mẫu, em sử dụng câu lệnh nào dưới đây?
A. <input type="select">.
B. <input type="dropdown">.
C. ‹select›.
D. <dropdown>.
Xem đáp án »
19/10/2024
2,833
Câu 2:
Để tạo một ô nhập văn bản trong biểu mẫu, em có thể sử dụng những phần tử nào?
A. <input>.
B. <textarea>.
C. ‹fieldset›.
D. <data>.
Để tạo một ô nhập văn bản trong biểu mẫu, em có thể sử dụng những phần tử nào?
A. <input>.
B. <textarea>.
C. ‹fieldset›.
D. <data>.
Xem đáp án »
19/10/2024
2,438
Câu 3:
Những câu lệnh nào sau đây tạo một nút gửi trong biểu mẫu?
A. <button type="button">.
B. <input type="reset">.
C. <button type="submit*>.
D. <input type="submit">.
Những câu lệnh nào sau đây tạo một nút gửi trong biểu mẫu?
A. <button type="button">.
B. <input type="reset">.
C. <button type="submit*>.
D. <input type="submit">.
Xem đáp án »
19/10/2024
1,437
Câu 4:
Hai thuộc tính liên kết phân tử < label> và <input> tương ứng là
A. input, id.
B. for, id.
C. input, name.
D. for, name.
Hai thuộc tính liên kết phân tử < label> và <input> tương ứng là
A. input, id.
B. for, id.
C. input, name.
D. for, name.
Xem đáp án »
19/10/2024
1,316
Câu 5:
Thuộc tính nào được sử dụng để xác định một phần tử <input> là bắt buộc phải điền thông tin?
A. required.
B. mandatory.
C. necessary.
D. compulsory.
Thuộc tính nào được sử dụng để xác định một phần tử <input> là bắt buộc phải điền thông tin?
A. required.
B. mandatory.
C. necessary.
D. compulsory.
Xem đáp án »
19/10/2024
1,252
Câu 6:
Thuộc tính nào xác định giá trị mặc định cho một phần tử <input> và được hiển thị sẵn khi tải biểu mẫu?
A. default.
B. name.
C. value.
D. init.
Thuộc tính nào xác định giá trị mặc định cho một phần tử <input> và được hiển thị sẵn khi tải biểu mẫu?
A. default.
B. name.
C. value.
D. init.
Xem đáp án »
19/10/2024
1,103
Câu 7:
Mỗi phương ăn sau đây là đúng hay sai?
A. Thẻ < fieldset> thường được dùng cùng với thẻ ‹legend>.
B. Nút bấm tạo bởi thẻ <input> và thẻ <button> là giống hệt nhau, chỉ khác nhau về cách viết.
C. Phần tử select chỉ cho phép chọn một giá trị trong các giá trị của một danh sách thả xuống.
D. Trong một biểu mẫu đang dùng các phần tử <input type="radio" ...> để thu
thập một loại thông tin, ta có thể thay các phần tử này bằng một phần tử select.
Lưu ý:
- Thẻ < button> có thể định dạng (in đậm, in nghiêng,...) cho dòng chữ xuất hiện trên nút bẩm, thẻ <input> thì không.
- Để chọn nhiều giá trị ta thêm vào thẻ thuộc tính multiple.
- Phần tử radio cho phép chọn một trong các phương án cho sẵn. Tương tự như vậy, phần tử select cho phép chọn một trong các phương án có sẵn theo dạng danh sách thả xuống.
Mỗi phương ăn sau đây là đúng hay sai?
A. Thẻ < fieldset> thường được dùng cùng với thẻ ‹legend>.
B. Nút bấm tạo bởi thẻ <input> và thẻ <button> là giống hệt nhau, chỉ khác nhau về cách viết.
C. Phần tử select chỉ cho phép chọn một giá trị trong các giá trị của một danh sách thả xuống.
D. Trong một biểu mẫu đang dùng các phần tử <input type="radio" ...> để thu
thập một loại thông tin, ta có thể thay các phần tử này bằng một phần tử select.
Lưu ý:
- Thẻ < button> có thể định dạng (in đậm, in nghiêng,...) cho dòng chữ xuất hiện trên nút bẩm, thẻ <input> thì không.
- Để chọn nhiều giá trị ta thêm vào thẻ thuộc tính multiple.
- Phần tử radio cho phép chọn một trong các phương án cho sẵn. Tương tự như vậy, phần tử select cho phép chọn một trong các phương án có sẵn theo dạng danh sách thả xuống.
Xem đáp án »
19/10/2024
798
🔥 Đề thi HOT:
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 19 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 23 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 24 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 22 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 18 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 25 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Cánh diều Giới thiệu trí tuệ nhân tạo có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 20 có đáp án
Hãy Đăng nhập hoặc Tạo tài khoản để gửi bình luận
-
-
Bình luận