HTML <input> Tag with 'type=radio'

<form name="myForm" action="http://www.PuStudy.Com/resources/html-forms-action.html">
	
<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.PuStudy.Com/resources/html-forms-action.html">
	
<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