HTML <input type=”radio”>
The HTML <input type=”radio”> defines a radio button, grouped by sharing the same name attribute. Only one button in a group can be selected at a time. Selecting a new button deselects the previous one. Multiple groups can exist with different names.
The <input type="radio"> element may have additional attributes like name to group-related radio buttons and value to assign a specific value to the selected option.
Note: The “value” attribute in radio buttons assigns a distinct identifier for each option. While not visible to users, this value is sent to the server upon submission, helping identify the selected radio button.
HTML <input type=”radio”> Syntax:
<input type="radio">
Examples of HTML <input type=”radio”>
Here is the basic implementation of HTML <input type=”radio”>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML input type="radio"</title>
</head>
<body>
<p>Select a Technology Brand:</p>
<div>
<input type="radio"
id="Netflix"
name="brand"
value="Netflix">
<label for="Netflix">Netflix</label>
</div>
<div>
<input type="radio"
id="Audi"
name="brand"
value="Audi">
<label for="Audi">Audi</label>
</div>
<div>
<input type="radio"
id="Microsoft"
name="brand"
value="Microsoft" checked>
<label for="Microsoft">Microsoft</label>
</div>
</body>
</html>
Output:
HTML Example Output
Explanation
- Radio Button Group contains a group of radio buttons for selecting a technology brand.
- Three radio buttons are provided for Netflix, Audi, and Microsoft brands.
- The radio button for Microsoft is preselected by default, indicating it as the initial choice.
HTML <input type=”radio”> Example:
In this example we are creating three radio buttons labeled as Option 1, Option 2, and Option 3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML input type="radio"</title>
</head>
<body>
<h2><input type="radio">
</h2>
<h3>Choose an Option:</h3>
<label>
<input type="radio" name="option"
value="option1"> Option 1
</label>
<label>
<input type="radio" name="option"
value="option2"> Option 2
</label>
<label>
<input type="radio" name="option"
value="option3"> Option 3
</label>
</body>
</html>
Output:
HTML Example Output
Explanation
- In the above example we have three radio buttons labeled Option 1, Option 2, and Option 3.
- Radio buttons allow users to select from different options.
HTML <input type=”radio”> Use cases
To add radio buttons in a form, use the <input type=”radio”> element within <form> tags, each with a unique name attribute.
To get the value of the selected radio button using JavaScript, access the `value` property of the checked radio button element.
To check if a radio button is selected with JavaScript, access the `checked` property of the radio button element and evaluate its value.
To style the label associated with a selected radio input or checked checkbox using CSS, use the `:checked` pseudo-class to target the checked input and style its label accordingly.
To create custom radio buttons using HTML and CSS, hide the default input, style a custom button, and use CSS to simulate checked states.
Contact Us