Page 93 - HTML5

• week

To check which browsers support which types, you can go to caniuse.com.

Examples

Checkbox and Radio Buttons

Overview

Checkboxes and radio buttons are written with the HTML tag <input>, and their behavior is defined
in the HTML specification.

The simplest checkbox or radio button is an <input> element with a type attribute of checkbox or
radio, respectively:

<input type="checkbox">
<input type="radio">

A single stand-alone checkbox element is used for a single binary option such as a yes-or-no
question. Checkboxes are independent, meaning the user may select as many choices as they
would like in a group of checkboxes. In other words, checking one checkbox does not uncheck the
other checkboxes in checkbox group.

Radio buttons usually come in groups (if it's not grouped with another radio button, you probably
meant to use a checkbox instead) identified by using the same name attribute on all buttons within
that group. The selection of radio buttons are mutually exclusive, meaning the user may only
select one choice from a group of radio buttons. When a radio button is checked, any other radio
button with the same name that was previously checked becomes unchecked.

Example:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

When viewed, radio buttons appear as a circle (unchecked) or a filled circle (checked).
Checkboxes appear as a square (unchecked) or a filled square (checked). Depending on the
browser and operating system, the square sometimes has rounded corners.

Attributes

checkboxes and radio buttons have a number of attributes to control their behavior:

value

https://riptutorial.com/ 77