Thẻ radio button và checkbox trong HTML

bởi Nguyễn Đức Anh

Thực ra chúng đều thuộc về nhóm thẻ input nhưng có thuộc tính type là radio button và checkbox. Nhóm thẻ input là không thể thiếu khi muốn làm Form nhập liệu và chúng thường xuyên kết hợp với Javascript để validate. Bên cạnh 5 type rất hay dùng gồm: text, password, submit, resetemail thì 2 type chuyên dụng để tạo các lựa chọn là Radio button và Checkbox bạn cũng cần nắm rõ.

Radio button

Type này được dùng để chọn một trong nhiều lựa chọn, chẳng hạn chọn giới tính, chọn quốc gia đang sinh sống. Code mẫu:



<form>
<input name="gioitinh" type="radio" value="Nam" />Nam
<input name="gioitinh" type="radio" value="Nữ" />Nữ
<input name="gioitinh" type="radio" value="Khác" />Khác
</form>


Kết quả:

Nam
Nữ
Khác

Nếu bạn không để name có cùng tên thì bạn sẽ chọn được 2 cái cùng lúc, do vậy cần lưu ý name khi dùng radio.

Checkbox

Radio buttons dùng để chọn chỉ một cái trong nhiều lựa chọn còn checkbox thì ngược lại, nó cho phép bạn không chọn lựa cái nào hoặc chọn nhiều cái (từ một cho đến tất cả), code mẫu:


<form>
<input type="checkbox" name="thethao" value="Bóng đá">Bóng đá
<input type="checkbox" name="thethao" value="Bơi lội">Bơi lội
<input type="checkbox" name="thethao" value="Điền kinh">Điền kinh
<input type="checkbox" name="thethao" value="Cầu lông">Cầu lông
<input type = "checkbox" name= "thethao" value="Võ thuật">Võ thuật
</form>


Kết quả:

Bóng đá
Bơi lội
Điền kinh
Cầu lông
Võ thuật

Thuộc tính checked

Đây là thuộc tính được dùng để đánh dấu trước một lựa chọn nào đó, chẳng hạn một Form nhập liệu yêu cầu bạn nhập Quốc gia đang sinh sống, nhưng nó cũng xác định được địa chỉ IP của bạn xuất phát từ Việt Nam nên đã tick sẵn vào đây từ trước cho bạn. Điều này giúp bạn giảm thiểu các thao tác phải nhập. Ví dụ:
Việt Nam
Trung Quốc
Nhật Bản
Hàn Quốc

Code mẫu:


<form>
<input checked="checked" name="gioitinh" type="radio" value="VN" />Việt Nam
<input name="gioitinh" type="radio" value="TQ" />Trung Quốc
<input name="gioitinh" type="radio" value="NB" />Nhật Bản
<input name="gioitinh" type="radio" value="HQ" />Hàn Quốc
</form>

0 bình luận

Khu vực bình luận

avatar