how to add a radio button in html
problem
You’re learning HTML and wish to use the radio button for the user to click and select an option. In this post we will see how to place a few buttons.
SOLUTION
Using the <input> tag with attribute type=”radio”. It is called a radio button because it looks like a button on an old fashioned radio system.
Simple example:
<input type="radio"/>
output
Click on it:
The output will be only a radio button that can be clicked and not unclicked in this case.
using labels
If we wish to show some text before or after the radio button and make it more user-friendly we can do so by combining it with the <label> tag, for example:
<input type="radio" id="color_red"/>
<label for="color_red">Red</label>
output
As you can see in the code above we used the <label> tag and we linked it to the radio button by using the id attribute.
First we add a unique id attribute to the radio button, in this case id=”color_red”.
Afterwards, on the label tag, we add the attribute for=”color_red” so we can link the label and the radio button together.
Adding the label before the radio button:
<label for="color_red">Red</label>
<input type="radio" id="color_red"/>
output
Writing in our HTML file the <label> first and then the <input> simply changes the order they appear.
using labels
This input control is used to display more than one option to the user and limit his option to one, i.e. can’t select more than 2 radio buttons.
In order to select only one, we need to group them.
Easily done by using the same value in the name attribute.
For example, let’s put 3 options for colors: Red, Green, Blue.
<input type="radio" id="color_red" name="color_choice"/>
<label for="color_blue">Red</label>
<br/>
<input type="radio" id="color_green" name="color_choice"/>
<label for="color_green">Green</label>
<br/>
<input type="radio" id="color_blue" name="color_choice"/>
<label for="color_blue">Blue</label>
output
Selecting only one:
INCORRECT GROUPING
Now, let’s skip the attribute name on the last radio button. It’s gonna cause it to be outside of the group, meaning having 2 groups of radio buttons. This is gonna mess up the selection of only one choice as shown below:
<input type="radio" id="color_red" name="color_choice"/>
<label for="color_blue">Red</label>
<br/>
<input type="radio" id="color_green" name="color_choice"/>
<label for="color_green">Green</label>
<br/>
<input type="radio" id="color_blue"/>
<label for="color_blue">Blue</label>
output
Use two or more groups
Let’s see when we want to use 2 or more groups of radio buttons. For example, one group to choose a color and then another group for style:
<h3>Select a color:</h3>
<br/>
<label for="color_red">Red</label>
<input type="radio" id="color_red" name="color_choice"/>
<br/>
<label for="color_green">Green</label>
<input type="radio" id="color_green" name="color_choice"/>
<br/>
<label for="color_blue">Blue</label>
<input type="radio" id="color_blue" name="color_choice"/>
<hr/>
<h3>Select a style:</h3>
<br/>
<label for="style_solid">Solid</label>
<input type="radio" id="style_solid" name="style_choice"/>
<br/>
<label for="style_dotted">Dotted</label>
<input type="radio" id="style_dotted" name="style_choice"/>
<br/>
<label for="style_dashed">Dashed</label>
<input type="radio" id="style_dashed" name="style_choice"/>
output
In the code above, the first group is using the attribute name=”color_choice” and the second group the name=”style_choice”.
We can use as many groups and radio buttons as we wish as long as the name attribute matches each group respectively.
conclusion
In this post we saw how to place a radio button on a web page. The point of radio buttons is to let the user select a choice from a few choices. We have also seen how to group them by using the attribute name with the result of the user to choose only one option.
Share it!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪