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 →
|
|
This site needs an editor - click to learn more!
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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
BellaOnline Administration
for details.
