HTML Input Control Elements Checkbox and Radio Buttons
Example
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
Like any other input element, the value attribute specifies the string value to associate with the button in the event of form submission. However, checkboxes and radio buttons are special in that when the value is omitted, it defaults to on when submitted, rather than sending a blank value. The value attribute is not reflected in the button's appearance.
checked
The checked attribute specifies the initial state of a checkbox or radio button. This is a boolean attribute and may be omitted.
Each of these are valid, equivalent ways to define a checked radio button:
<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">
The absence of the checked attribute is the only valid syntax for an unchecked button:
<input type="radio">
<input type="checkbox">
When resetting a <form>, checkboxes and radio buttons revert to the state of their checked attribute.
Accessibility
Labels
To give context to the buttons and show users what each button is for, each of them should have a label. This can be done using a <label> element to wrap the button. Also, this makes the label clickable, so you select the corresponding button.
Example:
<label>
<input type="radio" name="color" value="#F00">
Red
</label>
or with a <label> element with a for attribute set to the id attribute of the button:
<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>
Button Groups
Since each radio button affects the others in the group, it is common to provide a label or context for the entire group of radio buttons.
To provide a label for the entire group, the radio buttons should be included in a <fieldset> element with a <legend> element within it.
Example:
<fieldset>
<legend>Theme color:</legend>
<p>
<input type="radio" name="color" id="red" value="#F00">
<label for="red">Red</label>
</p>
<p>
<input type="radio" name="color" id="green" value="#0F0">
<label for="green">Green</label>
</p>
<p>
<input type="radio" name="color" id="blue" value="#00F">
<label for="blue">Blue</label>
</p>
</fieldset>
Checkboxes can also be grouped in a similar fashion, with a fieldset and legend identifying the group of related checkboxes. However, keep in mind that checkboxes should not share the same name because they are not mutually exclusive. Doing this will result in the form submitting multiple values for the same key and not all server-side languages handle this in the same way (undefined behavior). Each checkbox should either have a unique name, or use a set of square brackets ([]) to indicate that the form should submit an array of values for that key. Which method you choose should depend on how you plan to handle the form data client-side or server-side.
You should also keep the legend short, since some combinations of browsers and screen readers read the legend before each input field in the fieldset.
