Using the input Element to Create Fixed Choices
Description
The radio type of the input element creates a group of radio buttons that let the user pick from a fixed set of options.
The following list describes the additional attributes supported by radio type input element.
- checked - If applied, select the radio button when initially displayed or when the form is reset.
- required - User must select one of the radio buttons.
- value - Specifies the data value that is submitted to the server when the check box is checked.
Each input element with the type radio represents a single option to the user.
A set of exclusive options should have the same value for the name attribute.
Example
You can see how this works in the following code.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<fieldset>
<legend>Vote for your favorite fruit</legend>
<label for="apples">
<input type="radio" checked value="Apples" id="apples" name="fave" /> Apples
</label>
<label for="oranges">
<input type="radio" value="Oranges" id="oranges" name="fave" /> Oranges
</label>
<label for="cherries">
<input type="radio" value="Cherries" id="cherries" name="fave" /> Cherries
</label>
</fieldset>
</p><!-- w w w . ja va 2 s . c om-->
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
The code above created three radio type input elements.
The value of the name attribute for all three is fave, which means that the browser will treat them as a group.
Selecting one of the radio buttons will unselect the other two. The value attribute sets the data value to send to the server when the form is submitted.
Fieldset and legend attributes give the user a visual cue that the three buttons are related.
The checked attribute is set on the first of the radio elements so that there is always a value selected.