HTML <input type=”radio”>
Last Updated :
23 Feb, 2024
HTML <input type=”radio”> creates a radio button input field allowing users to select one option from multiple choices. Only one radio button in a group can be selected at a time.
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">
HTML <input type=”radio”> Example
Here is the basic implementation of HTML <input type=”radio”>.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h2{
color: green;
}
</style>
</head>
<body>
<h2 >
Welcome To GeeksforGeeks
</h2>
<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:
Explanation
- In the above example we includes a styled <h2> element with green color, welcoming users to GeeksforGeeks.
- 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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: green;
}
h3 {
color: #333;
margin-bottom: 20px;
}
input[type="radio"] {
margin-right: 5px;
}
</style>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<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:
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.
- Styling ensures clarity and readability of the content.
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.
HTML <input type=”radio”> Supported Browsers:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...