HTML radio buttons are a type of input element that allows users to select only one option from a group of options. When several radio buttons are grouped together, only one of them can be selected at a time. The radio button selection is indicated by a small circle that appears in the center of the button when it is selected.
In this article, we will explore how to create radio buttons in HTML and how to check the selected radio button using JavaScript.
Creating Radio Buttons in HTML
Radio buttons are created using the input tag with the type attribute set to "radio". Each radio button must have a unique name attribute, but all radio buttons in the same group should have the same name attribute. This is how we group radio buttons together.
Here's an example of a basic HTML radio button:
<label>
<input type="radio" name="gender" value="male"> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label>
In this example, we have two radio buttons that are grouped together under the name attribute "gender". The value attribute is used to specify the value of the radio button when it is selected.
Checking the Selected Radio Button with JavaScript
To check which radio button is selected, we can use JavaScript to retrieve the value of the selected radio button. We can use the document.querySelector() method to select the radio button that is checked and get its value using the value property.
Here's an example of how to use JavaScript to get the value of the selected radio button:
const selectedGender = document.querySelector('input[name="gender"]:checked').value;
console.log(selectedGender); // Will output "male" or "female" depending on which radio button is selected
In this example, we use the document.querySelector() method to select the radio button with the name attribute "gender" and that is checked (indicated by the ":checked" pseudo-class). We then use the value property to get the value of the selected radio button.
Checking the Default Checked Radio Button
We can also specify a default checked radio button by using the checked attribute. This attribute is used to pre-select a radio button when the page is loaded.
Here's an example of how to specify a default checked radio button:
<label>
<input type="radio" name="gender" value="male" checked> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label>
In this example, we have pre-selected the male radio button by adding the checked attribute to the input tag.
Conclusion
HTML radio buttons are a great way to allow users to select only one option from a group of options. They are easy to create and use, and with a little JavaScript, we can retrieve the value of the selected radio button. By default, only one radio button can be selected at a time, making them an ideal choice for questions with multiple answer options.
I can provide additional information about HTML radio buttons and how they can be customized with CSS.
Customizing Radio Buttons with CSS
By default, radio buttons have a basic look and feel that may not fit every design. Fortunately, we can use CSS to customize the appearance of radio buttons. We can use the appearance property in CSS to change or remove the default radio button style.
Here's an example of how to customize radio buttons with CSS:
.radio-btn {
margin: 10px;
}
.radio-btn input[type="radio"] {
display: none;
}
.radio-btn label {
display: inline-block;
padding: 5px 15px;
background-color: #ddd;
border-radius: 5px;
cursor: pointer;
}
.radio-btn input[type="radio"]:checked + label {
background-color: #007bff;
color: #fff;
}
In this example, we define a class called "radio-btn" that we can apply to our radio buttons. We use the display property to hide the default radio button by setting it to "none". Instead, we use a label element to create a custom radio button using the background-color and border-radius properties. We also set the cursor property to "pointer" to make the label element behave like a button.
When a radio button is selected (indicated by the ":checked" pseudo-class), we use the adjacent sibling selector "+" to change the background color and color of the label element to indicate that it is selected.
Accessibility Considerations
When we customize the appearance of radio buttons, it's important to keep accessibility in mind. Users with visual impairments may rely on the default radio button style to understand the functionality of the input element. If we remove or change the default style, we should ensure that our custom radio buttons are still recognizable as radio buttons.
One way to do this is to use visually hidden text to describe the radio button. We can add a span element with the class "sr-only" and use CSS to hide it visually while still making it accessible to screen readers.
.radio-btn label {
position: relative;
display: inline-block;
padding: 0 30px;
line-height: 30px;
height: 30px;
cursor: pointer;
}
.radio-btn label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 50%;
}
.radio-btn input[type="radio"]:checked + label:before {
background-color: #007bff;
border-color: #007bff;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
clip-path: inset(50%);
white-space: nowrap;
}
In this example, we use a pseudo-element ":before" to create the circular radio button. We also position the label element relative to create a stacking context for the pseudo-element. We use the "content" property to insert an empty content into the pseudo-element and apply the appearance of a radio button with CSS.
We also add the class "sr-only" to the span element to hide it visually but still make it accessible to screen readers. We use the "clip" and "clip-path" properties to clip the span element and keep it from interfering with the radio button appearance.
Conclusion
HTML radio buttons are a useful input element for selecting one option from several choices. We can use JavaScript to retrieve the value of the selected radio button and CSS to customize the appearance of radio buttons to match our design. When we customize radio buttons, we should keep accessibility in mind and ensure that our custom radio buttons are still recognizable to all users.
Popular questions
- What element is used to create a radio button in HTML?
Answer: The input tag with the type attribute set to "radio" is used to create a radio button in HTML.
- How do you group radio buttons together in HTML?
Answer: To group radio buttons together, give them the same name attribute. This will allow only one radio button to be selected at a time from the group.
- How do you check which radio button is selected using JavaScript?
Answer: To check which radio button is selected using JavaScript, use document.querySelector() to select the checked radio button and then use the value property to retrieve the value of the selected radio button.
- How can you customize the appearance of radio buttons in HTML with CSS?
Answer: To customize the appearance of radio buttons using CSS, use the appearance property to change or remove the default radio button style. You can also use the background-color and border-radius properties to create a custom radio button or use the :before pseudo-element to add a circle to the label element.
- What accessibility considerations should you keep in mind when customizing the appearance of radio buttons?
Answer: When customizing the appearance of radio buttons, you should keep accessibility in mind. Users with visual impairments may rely on the default radio button style to understand the functionality of the input element. If you remove or change the default style, ensure that your custom radio buttons are still recognizable as radio buttons. You can do this by adding visually hidden text to describe the radio button or using ARIA attributes to provide additional information.
Tag
Radioset.
