Radio Buttons
The code
HTML
<form action="someScript" method="post">
<fieldset>
<legend>Groceries</legend>
<label for="grocery">Fruits</label>
<p><input type="radio" name="grocery" value="apples"> Apples</p>
<p><input type="radio" name="grocery" value="oranges"> Oranges</p>
<p><input type="radio" name="grocery" value="bananas"> Bananas</p>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</fieldset>
</form>
What is a radio button
Imagine that you could only select one fruit to purchase. Radio buttons allow you to present multiple options but only one is choosable. A multiple choice test would be a good example where you can only choose one option. Other than that it is almost identical to the checkbox.
Example
Creative Styling
The code
HTML
<form action="someScript" method="post">
<fieldset>
<legend>Groceries</legend>
<label for="grocery">Fruits</label>
<p><input type="radio" class="radio" name="grocery" value="apples"> Apples</p>
<p><input type="radio" class="radio" name="grocery" value="oranges"> Oranges</p>
<p><input type="radio" class="radio" name="grocery" value="bananas"> Bananas</p>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</fieldset>
</form>
CSS
input.radio{margin-right:5px;}
p{
line-height:30px;
font-size:120%;
}
Example
Minimal styling
I don't recommend crazy styling with these. Make it simple to use. Changing background, border color, or border size may confuse the user because its not what a typical checkbox looks like.
More Form Elements
- Text
- Boolean
- Multiple Choice
- Submitting
- Accessibility
- Client-side Validation