Page 94 - HTML5

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

https://riptutorial.com/ 78