Bài 27: Biểu mẫu trên trang web

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

Biểu mẫu (form) là thành phần cho phép người xem gửi thông tin đến trang web, ví dụ đăng kí tài khoản, gửi liên hệ, bình chọn, đặt hàng. Biểu mẫu được tạo bằng thẻ <form> trong HTML, bên trong chứa các điều khiển như ô nhập văn bản, hộp chọn, nút chọn, danh sách thả xuống và nút gửi.

Các điều khiển biểu mẫu thường dùng gồm: <input> (ô nhập một dòng, mật khẩu, email, hộp kiểm, nút chọn), <textarea> (ô nhập nhiều dòng), <select> (danh sách thả xuống) và <button> (nút bấm). Mỗi điều khiển nên có nhãn <label> mô tả rõ ràng để người dùng biết cần nhập gì. Thuộc tính name của mỗi điều khiển dùng để xác định dữ liệu khi gửi đi. Thuộc tính required bắt buộc người dùng phải nhập trước khi gửi.

Khi thiết kế biểu mẫu, cần tuân thủ các nguyên tắc: chỉ yêu cầu thông tin cần thiết, sắp xếp các trường theo thứ tự hợp lí, ghi chú rõ định dạng cần nhập, hiển thị thông báo khi nhập sai và bảo vệ thông tin cá nhân của người dùng.

2. Ví dụ minh họa

Tình huống: Tạo biểu mẫu liên hệ cho trang web của câu lạc bộ.

Giải pháp:

<form action="gui-lien-he" method="post">
  <label for="ten">Họ và tên:</label>
  <input type="text" id="ten" name="ten" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <label for="noidung">Nội dung:</label>
  <textarea id="noidung" name="noidung" rows="4"></textarea>
  <button type="submit">Gửi liên hệ</button>
</form>

Kết luận: Biểu mẫu trên gồm ba trường: họ tên, email và nội dung, với nút gửi. Hai trường đầu bắt buộc nhập, email được kiểm tra đúng định dạng.

3. Ghi nhớ

• Biểu mẫu tạo bằng thẻ <form>, chứa các điều khiển nhập liệu.
• Mỗi điều khiển nên có nhãn <label> mô tả rõ ràng.
• Thuộc tính required bắt buộc nhập, name xác định dữ liệu gửi đi.
• Chỉ thu thập thông tin cần thiết và bảo vệ thông tin người dùng.