webdevlinux - logo Web Dev Linux

Radio buttons

We use the radio buttons to choose only one item from an item group. In this chapter, you will learn how to use radio buttons in an HTML document.

HTML radio buttons Radio buttons

In HTML forms, the input element is used to define a radio button.

Try the below example

FILE : radio-buttons.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Radio buttons</title>
</head>
<body>
<form>
Select your gender : 
<label>Male <input type="radio" name="gender"></label>
<label>Female <input type="radio" name="gender"></label>
<br>
Your religion :
<label>Buddhism <input type="radio" name="religion" checked></label>
<label>Christianity <input type="radio" name="religion"></label>
<label>Hindu <input type="radio" name="religion"></label>
<label>Islam <input type="radio" name="religion"></label>
</form>
</body>
</html>

Explanation

Take a look at the explanation of elements & attributes used in the example.

<label>
The label element represents a caption for a form control. When we click on the caption it will auto select the input element which is placed inside the label.
<input type="radio">
The input element with the type value "radio" represents a radio button.
name="gender" | name="religion"
In a radio button, the name attribute value represents the group name. ex : name="gender" is a group & name="religion" is another group.
checked
The checked attribute represents the default value of the group of radio buttons. Only one checked attribute is permitted in a group of radios.