BÀI 12. TẠO BIỂU MẪU

Câu 1: Giả sử em đang xây dựng một trang web đăng ký tài khoản và muốn sử dụng một biểu mẫu (form) với các trường nhập liệu cho tên người dùng, mật khẩu, lớp học, và một nút gửi thông tin. Dưới đây là đoạn mã HTML để tạo biểu mẫu:

Dưới đây là chức năng của các thuộc tính được sử dụng:

a. Thuộc tính action trong thẻ <form> chỉ định tệp xử lý khi người dùng gửi biểu mẫu.
b. Thẻ <input> với type="password" không cho phép người dùng nhập mật khẩu.
c. Thuộc tính name trong thẻ <select> sẽ xác định lựa chọn của người dùng trong biểu mẫu.
d. Thuộc tính type="submit" được sử dụng để tạo trường nhập liệu cho người dùng.

Câu 2: Giả sử em có một biểu mẫu yêu cầu người dùng nhập thông tin về tên người dùng, mật khẩu, và chọn lớp học từ một danh sách. Em muốn kiểm tra tính hợp lệ của biểu mẫu bằng cách đảm bảo rằng tất cả các trường bắt buộc đều được điền đầy đủ. Bạn viết mã HTML như sau:

Dưới đây là các nhận định về mã HTML trên
a. Biểu mẫu này sẽ không được gửi nếu trường "Tên người dùng" không được điền.
b. Thuộc tính onsubmit có thể dùng để thực hiện kiểm tra dữ liệu trước khi gửi biểu mẫu.
c. Thuộc tính required không có tác dụng đối với thẻ <select>.
d. Các trường nhập liệu với type="password" sẽ ẩn nội dung người dùng nhập.

Câu 3: Em đang phát triển một trang web cho phép người dùng nhập thông tin đăng ký khóa học. Biểu mẫu đăng ký bao gồm các trường: họ và tên, email, số điện thoại, giới tính (nam, nữ, khác), và sở thích học tập (toán, lập trình, khoa học, văn học). Em sử dụng các thẻ HTML và các thuộc tính phù hợp để thiết kế biểu mẫu này:

a. Để đảm bảo người dùng nhập đủ 5 ký tự vào trường "Họ và tên", em cần sử dụng thuộc tính required và minlength="5" trong thẻ <input>.
b. Trường "Email" phải đảm bảo định dạng đúng của địa chỉ email, vì em cần sử dụng thẻ <input> với thuộc tính type="text".
c. Để giới hạn người dùng chỉ có thể nhập số điện thoại hợp lệ em nên sử dụng thẻ <input> với thuộc tính type="tel" và pattern="^\d{10}$" để định dạng đúng 10 chữ số.
d. Để người dùng có thể chọn một sở thích học tập trong số nhiều lựa chọn, em nên sử dụng thẻ <select> với thuộc tính multiple để cho phép chọn nhiều sở thích cùng một lúc.