The <input> tag with a type="radio" attribute creates a radio button.
Radio buttons work together in groups of two or more, but the selection is exclusive, that is, only one can be selected.
Six <input> elements of type radio.
The first radio button is checked (selected).
<form action="/tutorial/action.html">
<fieldset>
<legend>Your native language</legend>
<label><input type="radio" name="language" value="english" checked> English</label><br />
<label><input type="radio" name="language" value="french"> French</label><br />
<label><input type="radio" name="language" value="greek"> Greek</label><br />
<label><input type="radio" name="language" value="urdu"> Urdu</label><br />
<label><input type="radio" name="language" value="hindi"> Hindi</label><br />
<label><input type="radio" name="language" value="other"> Other</label><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form>
The <input type="radio"> creates a single radio button.
Radio buttons are grouped by name. All radio buttons with the same name belong to the same group.
Only a single radio button can be selected in a group by clicking on the circle button.
When a label is associated with a radio button, clicking the text will select that radio button.
The checked attribute selects a radio button. Only one in a group can have this attribute.
<input type="radio">
Adding clickable labels to radio buttons improves usability. It allows users to click the labels to turn radio buttons on and off. There are 2 ways to implement this:
A <label> wrapping a radio button.
<form>
<label><input type="radio" name="gender" value="male" checked> Male</label><br />
<label><input type="radio" name="gender" value="female"> Female</label>
</form>
A <label> bound to a radio button using a for attribute.
<form>
<input type="radio" name="mygender" id="male" value="male" checked>
<label for="male"> Male</label><br />
<input type="radio" name="mygender" id="female" value="female">
<label for="female"> Female</label>
</form>
The wrapped label approach is preferred because it does not require for and id attributes and is therefore simpler.
Here is when type="radio" support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
