Mục lục:
Video: Học HTML cơ bản bài 21: Web Form: Radio box, Checkbox & Textarea 2025
Đôi khi, bạn muốn người dùng trang web của bạn cho biết thông tin là đúng hay sai. Phần tử hộp kiểm HTML5 hoàn hảo cho loại đầu vào này vì người dùng có thể nhấp để chọn hoặc bỏ chọn tùy chọn. Hộp kiểm là một biến thể của thẻ đầu vào linh hoạt. Hộp kiểm cho Trứng Xanh và Hàm được thể hiện trong hình:
Hộp kiểm thường xuất hiện theo nhóm, nhưng chúng đều độc lập với nhau. Mã cho trang web có hộp kiểm giống như sau:
formDemo. htmlHình thức biểu mẫu
Chọn phần tửHộp kiểm Hộp Trứng Xanh Hàm
Bạn thường gắn nhãn vào hộp văn bản để người dùng có thể nhấp vào hộp kiểm hoặc nhãn liên quan để tạo vùng lựa chọn.
Để xây dựng một hộp kiểm, hãy làm theo các bước sau:
-
Bắt đầu với phần tử đầu vào .
-
Đặt hộp kiểm loại hộp kiểm .
Điều này làm rõ rằng các yếu tố đầu vào là một hộp kiểm và đặt một hộp kiểm tra nhỏ trên màn hình.
-
Cho phần tử một trường id để mã của bạn có thể làm việc trực tiếp với phần tử.
-
Chỉ định một giá trị.
Bạn có thể đính kèm giá trị vào hộp kiểm. Người dùng sẽ không thấy giá trị (trừ khi bạn chọn tạo nhãn giống như giá trị).
-
Thêm nhãn.
Hộp kiểm thực sự cần phải có một nhãn gắn liền với chúng để người sử dụng hiểu được hộp kiểm là gì. Nhãn thường được đặt ở bên phải hộp kiểm.
-
Thêm thuộc tính cho vào nhãn.
Nhãn có một thuộc tính đặc biệt được gọi là cho phép bạn chỉ định phần tử đầu vào nào nhãn tương ứng. Đặt giá trị id của hộp kiểm vào thuộc tính này của nhãn.
Điều này đặc biệt hữu ích cho các hộp kiểm vì trong hầu hết các trình duyệt người dùng có thể nhấp vào nhãn hoặc hộp kiểm để kích hoạt lựa chọn. Kết hợp nhãn vào hộp kiểm cho phép người dùng mục tiêu lớn hơn để nhấp và làm cho biểu mẫu dễ sử dụng hơn.
Các mẫu HTML không tự làm được. Bạn sẽ cần phải thêm một số loại chương trình trong JavaScript hoặc HTML để làm cho các hình thức làm điều gì đó.
