Bài 12: Tạo biểu mẫu

1. Kiến thức trọng tâm

Biểu mẫu là nơi trang web thu thập thông tin từ người dùng, ví dụ biểu mẫu đăng kí, khảo sát, góp ý. Biểu mẫu được tạo bằng thẻ <form> với thuộc tính action chỉ nơi nhận dữ liệu và method chỉ cách gửi dữ liệu. Bên trong biểu mẫu có các điều khiển nhập liệu: <input> tạo ô nhập một dòng, hộp kiểm, nút chọn; thuộc tính type xác định loại điều khiển như text, email, password, radio, checkbox, submit. Thẻ <textarea> tạo ô nhập nhiều dòng, thẻ <select> với các <option> tạo danh sách thả xuống để người dùng chọn một phương án. Thẻ <label> gắn nhãn mô tả cho từng điều khiển, giúp người dùng biết cần nhập gì và giúp trình đọc màn hình hoạt động đúng. Một biểu mẫu tốt cần có nhãn rõ ràng, chỉ yêu cầu thông tin cần thiết và có nút gửi dễ thấy.

2. Ví dụ minh họa

Yêu cầu: tạo biểu mẫu đăng kí gồm ô nhập họ tên, ô nhập email, danh sách chọn lớp và nút gửi.

Lời giải:

<form action="/dang-ki" method="post">
  <label>Họ tên: <input type="text" name="hoten"></label>
  <label>Email: <input type="email" name="email"></label>
  <label>Lớp:
    <select name="lop">
      <option>12A1</option><option>12A2</option>
    </select>
  </label>
  <input type="submit" value="Gửi đăng kí">
</form>

Giải thích: <form> gom các điều khiển thành một biểu mẫu gửi tới địa chỉ /dang-ki; type="email" giúp trình duyệt kiểm tra định dạng thư điện tử; <select> cho người dùng chọn lớp; nút submit gửi toàn bộ dữ liệu khi được nhấp.

3. Ghi nhớ

• Biểu mẫu dùng <form>, thuộc tính action chỉ nơi nhận dữ liệu, method chỉ cách gửi.
• <input> tạo ô nhập, hộp kiểm, nút chọn; type xác định loại điều khiển.
• <textarea> nhập nhiều dòng, <select> tạo danh sách thả xuống, <label> gắn nhãn mô tả.
• Biểu mẫu tốt có nhãn rõ ràng, chỉ hỏi thông tin cần thiết và có nút gửi dễ thấy.