PUBLISHED ON: JULY 17, 2021
How to create radio buttons using HTML?
The radio buttons are used to select one option from the list of multiple options. The radio buttons are usually small circle gets highlighted when selected. Here, we will learn to create radio buttons using HTML.
HTML Radio buttons
The radio buttons are created using <input> tag with type="radio" within it. There are multiple radio buttons describing some specific task of selection. These radio buttons are used in radio groups.
The name attribute should have the same value for each radio button in the same radio group. It allows only selecting one radio button in a radio group.
- The value attribute has a unique value for each radio button. The value of the selected radio button is sent to the server.
- We can also add <labels> to it.
Example: Creating Radio buttons using HTML
Here is an example of creating a radio button using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> Select the day of choice </h2>
<div>
<input type="radio" id="monday" name="day" value="monday">
<label for="monday">monday</label><br>
<input type="radio" id="tuesday" name="day" value="tuesday">
<label for="tuesday">tuesday</label><br>
<input type="radio" id="wednesday" name="day" value="wednesday">
<label for="wednesday">wednesday</label>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Default selection of radio buttons
The checked boolean attribute is used for the default selection of any radio button in the radio group. The radio button can be included within forms.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> Select the day of choice </h2>
<form>
<div>
<input type="radio" id="monday" name="day" value="monday" checked>
<label for="monday">monday</label><br>
<input type="radio" id="tuesday" name="day" value="tuesday">
<label for="tuesday">tuesday</label><br>
<input type="radio" id="wednesday" name="day" value="wednesday">
<label for="wednesday">wednesday</label>
</div>
</form>
</body>
</html>
Output
Here is the output of the above program.
Conclusion
The radio buttons can be easily added to the webpage using HTML. It allows selecting only one option from the list of options. It can be easily created using the <input> tag. The radio button can also be selected by default.
