Từ phiếu giấy đến biểu mẫu web
Phiếu đăng kí cần lời nhãn rõ, ô nhập phù hợp và nơi nhận dữ liệu. HTML tạo phần biểu mẫu; việc lưu và xử lí cần thành phần tương ứng ở phía nhận, không tự xuất hiện chỉ nhờ một nút Gửi.
Các phần tử thường dùng
form bao biểu mẫu; action chỉ đích gửi, method chọn cách gửi. input có các kiểu text, email, number, radio, checkbox; textarea nhập nhiều dòng; select chứa option; button có thể gửi biểu mẫu.
label với for trùng id của ô giúp nối nhãn và ô nhập. name là tên trường dùng khi gửi; id nhận diện phần tử trong trang. Radio cùng nhóm có cùng name để chọn một giá trị; checkbox cho phép chọn các mục độc lập. required hỗ trợ yêu cầu nhập ở trình duyệt, nhưng phía nhận vẫn phải kiểm tra dữ liệu.
Nhãn và ô nhập
```html
<form action="/dang-ki" method="post">
<label for="ho-ten">Họ tên</label>
<input id="ho-ten" name="ho_ten" type="text" required>
<button type="submit">Gửi đăng kí</button>
</form>
```
for nối tới id ho-ten; dữ liệu gửi dùng tên ho_ten. Đường /dang-ki ở ví dụ chỉ minh họa nơi nhận: muốn dùng thật phải có chức năng xử lí tại đó. POST tự nó không thay thế HTTPS.
Thử vận dụng
Hai radio để chọn đúng một buổi học cần điều gì?
id nên nhận diện duy nhất, không tạo nhóm radio bằng cách lặp id.
Đúng: cùng nhóm nhưng giá trị phân biệt.
Khác name có thể thành các nhóm độc lập.
Điều này không thay thế cách tạo nhóm radio.
Lời giải
Cùng name xác định nhóm radio; mỗi value cho biết lựa chọn nào được gửi. id vẫn cần riêng nếu gắn nhãn.
Chọn một buổi học
```html
<label><input type="radio" name="buoi" value="sang">Sáng</label>
<label><input type="radio" name="buoi" value="chieu">Chiều</label>
```
Nếu chọn Chiều, trường tương ứng gửi giá trị chieu. Không lấy chữ nhãn hiển thị làm mặc định thay cho value đã khai báo.
Ví dụ xem cách làm
Ô nhập có id nhưng thiếu name. Vì sao có thể nhìn thấy và nhập được mà không có trường đó trong dữ liệu gửi theo cách gửi form thông thường?
Lời giải
id phục vụ nhận diện phần tử; tên trường gửi được xác định bởi name. Ô không có name thường không đóng góp cặp tên–giá trị vào dữ liệu form theo cơ chế gửi thông thường.
Ví dụ xem cách làm
Vì sao không nên chỉ dựa vào required ở trình duyệt để bảo đảm dữ liệu hợp lệ?
Lời giải
Người gửi có thể không đi qua giao diện ấy hoặc sửa yêu cầu gửi. Phía nhận phải kiểm tra dữ liệu và quyền trước khi xử lí. required hữu ích cho thao tác nhập, không phải toàn bộ cơ chế kiểm tra.
Những điều cần nhớ
label giúp hiểu và chọn ô; id nhận diện; name đặt tên dữ liệu gửi. HTML dựng biểu mẫu, còn việc nhận/lưu cần thành phần xử lí phù hợp.
Đang học