Printer Friendly Version

BellaOnline's HTML Editor

The HTML Form - Radio Button and Checkbox Input Tags - 2

In the first section of this tutorial we discussed how the radio input tag works. Now let's take a look at the code.

Let's take a look at an example of one of the three radio input tags used in the previous example.

<input type="radio" name="color" value="Red"> Red
<input type="radio" name="color" value="White"> White
<input type="radio" name="color" value="Blue"> Blue
What Does The Code Mean
< Left angle bracket
input The element name
typeThe type attribute is set to radio to create a radio button (type="radio").
nameThe name attribute is used to set an identification for the input field. In order for the radio input tags to work as a group, you will need to set the name attribute to the same for all of the radio tags in the group (name="color").
value The value attribute is used to set the value for each radio button in the group. Each of the radio tags will have the value attribute set to a different value. For example, if you want the user to choose between Red, White and Blue; you would have three radio buttons with the value attribute set to a different color for each.
checkedThe checked attribute is used to set one of the radio buttons as selected by default when the webpage form is displayed on the webpage.
>Right angle bracket
  1. As you can see, these radio input tags can work together as a group because they all have the same value for the name attribute (name="color").
  2. It is the value attribute that determines the value of each individual radio button. In the example, we have three radio buttons with their value attributes set to Red, White and Blue.
  3. If we wanted one of the radio buttons to be selected when the form displays on the webpage (i.e. by default) we would include "checked" within that radio input tag.
In the next section of this tutorial we will discuss the checkbox input tag.

← Back | Next →

This site needs an editor - click to learn more!

HTML Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Editor Wanted for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor