HTML <input> Tag with 'type=radio'
<form name="myForm" action="http://www.htmlcodes.ws/resources/html-forms-action.cfm">
<label><input type="radio" name="favColor" value="red">Red</label>
<label><input type="radio" name="favColor" value="green">Green</label>
<label><input type="radio" name="favColor" value="blue">Blue</label>
<button>Submit</button>
</form>
The above example demonstrates usage of the <input>
element with the type
attribute set to radio
(i.e. type="radio"
).
The radio
value allows you to provide a radio button for the user to select from. The official HTML5 specification puts it this way:
represents a control that, when used in conjunction with other <input>
elements, forms a radio button group in which only one control can have its checkedness state set to true. If the element's checkedness state is true, the control represents the selected control in the group, and if it is false, it indicates a control in the group that is not selected.
When you provide multiple radio buttons with the same name, the user can only select one option from the group. If no option has been selected when they submit the form, no value is passed for that group of radio buttons. If an option has been selected, only that value is submitted with the form.
The checked
Attribute
You can use the checked
attribute to have a radio button already checked when the page loads. Like this:
<form name="myForm2" action="http://www.htmlcodes.ws/resources/html-forms-action.cfm">
<label><input type="radio" name="favColor" value="red">Red</label>
<label><input type="radio" name="favColor" value="green">Green</label>
<label><input type="radio" name="favColor" value="blue" checked>Blue</label>
<button>Submit</button>
</form>
The checked
attribute is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either checked
or checked="checked"
).
Possible values:
- [Empty string]
- checked