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
type	The type attribute is set to radio to create a radio button (type="radio").
name	The 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.
checked	The 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

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").
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.
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 →

	Editor Wanted BellaOnline's HTML Editor