HTML - Radio Button

A Radio Button in HTML lets you select one element from a group of elements.

What is a Radio Button in HTML?

There can be scenarios where you are given a set of options and you are asked to choose one among them.

The best example is Yes or No. Where you are asked to choose either Yes or No in any given form.

How a Radio Button is created in HTML?

We can create a Radio Button in HTML using the type attribute of the <input> tag.

Let us understand Radio Button with the below example.

Example :

<html>
<body>
	<form>
		<p>Kindly select yes or no</p>
		<input type="radio" id="yes" name="my_button" value="YES">
		<label for="yes">YES</label>
		<input type="radio" id="no" name="my_button" value="NO">
		<label for="no">NO</label><br>
	</form> 
</body>
</html>

Output :

So, if you look at the above output, there are two radio buttons for YES and NO. And you can select only one among the two.

Now, let us come to the code. In the above code we have used the <input> tag and set the value of type attribute as radio.

<input type="radio" id="yes" name="my_button" value="YES">

And we have the id attribute to link the radio button with the <label> tag.

So, our next task is to create a label for the above radio button. And for that we have used the <label> tag.

<label for="yes">YES</label>

The <label> tag creates a label named YES. And as said, id attribute of <input> tag and for attribute of <label> tag has the same value yes to link each other.

And the same process is repeated for NO.

<input type="radio" id="no" name="my_button" value="NO">
<label for="no">NO</label><br>

Now, if you look at the name attribute of the <input> tag, it has a value my_button which groups two radio buttons.

Confused?

Let's take a look at the <input> tag for YES.

<input type="radio" id="yes" name="my_button" value="YES">

Now, let's take a look at the <input> tag for NO.

<input type="radio" id="no" name="my_button" value="NO">

You can find that in both the <input> tags, the name attribute has the same value my_button. This helps you select only one value from YES or NO.

How to create two Radio Button groups in HTML?

Say, you need to create two radio button groups.

The first radio button group would have a set of fruits. And you have to select one fruit among them.

And the second radio button group would have a set of vegetables. And you have to select one vegetable among them.

Now, let us see it in action with the below example.

Example :

<html>
<body>
	<form>
		<p>Select a fruit :</p>
		<input type="radio" id="apple" name="fruit" value="Apple">
		<label for="apple">Apple</label><br>
		<input type="radio" id="guava" name="fruit" value="Guava">
		<label for="guava">Guava</label><br>
		
		<p>Select a vegetable :</p>
		<input type="radio" id="potato" name="vegetable" value="Potato">
		<label for="potato">Potato</label><br>
		<input type="radio" id="tomato" name="vegetable" value="Tomato">
		<label for="tomato">Tomato</label><br>
		<input type="radio" id="brinjal" name="vegetable" value="Brinjal">
		<label for="brinjal">Brinjal</label><br>		
	</form> 
</body>
</html>

Output :

So, if you look at the above output, we have two groups created for Fruits and Vegetables.

And how did we create two groups?

If you take a look at the name attribute of <input> tag for Fruits, the value is fruit.

Again if you take a look at the name attribute for Vegetables, the value is vegetable.

It's because of two values for the name attribute, two different radio button groups are created.

❮❮ PREV NEXT ❯❯