Categories HTML

Thẻ radio button và checkbox trong HTML

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 (xác thực các trường dữ liệu).

Bên cạnh 5 type rất hay dùng gồm: text, password, submit, reset và email 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="gender" type="radio" value="Nam" />Nam
<input name="gender" type="radio" value="Nữ" />Nữ
<input name="gender" type="radio" value="Khác" />Khác
</form>

Kết quả:

Nam
Nữ
Khác

Nếu bạn không để thuộc tính 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 đồng bộ khi dùng radio, vì với radio có nghĩa là chúng ta muốn chỉ một trong các lựa chọn được chọn mà thôi.


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="sport" value="Bóng đá">Bóng đá
<input type="checkbox" name="sport" value="Bơi lội">Bơi lội
<input type="checkbox" name="sport" value="Điền kinh">Điền kinh
<input type="checkbox" name="sport" value="Cầu lông">Cầu lông
<input type = "checkbox" name= "sport" 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 người dùng của bạn giảm thiểu các thao tác phải nhập và cũng hạn chế được tối đa việc nhập sai dữ liệu. 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>
Back to Top