Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Use the \"Required\" Attribute with the Radio Input Field?
The HTML input element with the type attribute "radio" represents an option from a group in which no more than one option can be selected at the same time. These groups are typically defined by a number of radio buttons, each of which has the same value in the name attribute. When a radio button is selected, it is typically rendered as a small circle that is filled or highlighted.
In contrast to checkbox controls, radio buttons rely heavily on the value attribute. When the form is submitted in HTML, only the selected option is sent along with the form to the processing agent, who has no other way of determining which option has been selected than by inspecting the value of the submitted control. This is why each option's value attribute should be distinct within the group.
To be assigned to the same group, a set of radio buttons must all have the same value in the name attribute. A group of radio buttons must be in the same document and belong to the same form, or they must not exist at all. Placing radio buttons in different forms or documents will result in their separation.
Radio Input Attributes
Radio input supports the following attributes in addition to the generic ones that apply to all <input> elements
-
checked A Boolean attribute that indicates whether or not this radio button is the default selected one in the group.
-
value When a form is submitted, only radio buttons that are currently checked are sent to the server, and the reported value is the value of the
valueattribute. If no other value is specified, the string "on" is used by default. -
required The required attribute is one that is shared by the majority of
<input>s. If any radio button in a group of radio buttons with the same name has the required attribute, a radio button in that group must be checked, even if it is not the one with the attribute applied.
Syntax
Following is the syntax for using the required attribute with radio input field
<input type="radio" name="groupName" value="option1" required> <input type="radio" name="groupName" value="option2"> <input type="radio" name="groupName" value="option3">
Note Only one radio button in the group needs the required attribute. This makes the entire group required, meaning the user must select one option from the group before submitting the form.
Basic Radio Button Example
Following example demonstrates basic radio buttons within a form without the required attribute
<!DOCTYPE html>
<html>
<head>
<title>Simple Form with Radio Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form action="" method="GET">
<h4>Choose your age group</h4>
<label>
<input type="radio" name="age" value="children"> 0-17
</label>
<br>
<label>
<input type="radio" name="age" value="young"> 18-35
</label>
<br>
<label>
<input type="radio" name="age" value="middle-aged"> 36-55
</label>
<br>
<label>
<input type="radio" name="age" value="old"> 56+
</label>
<br><br>
<input type="submit" value="Submit" onclick="acknowledge()">
</form>
<script>
function acknowledge(){
alert("The form has been submitted successfully.");
}
</script>
</body>
</html>
In the above example, the form can be submitted even without selecting a radio button from the list of options. This behavior can be controlled by using the required attribute on the radio input.
Using the Required Attribute with Radio Input Field
Setting the required attribute for all inputs seems more obvious, but it is unnecessary. To group radio buttons, they should all have the same name attribute value. This enables us to select only one radio button at a time and apply the required attribute to the entire group by adding it to just one radio button in the group.
Example Quiz Form with Required Radio Buttons
In this example, we create a form with radio inputs and apply the required attribute to enforce selection
<!DOCTYPE html>
<html>
<head>
<title>Required Attribute with Radio Input Field</title>
<style>
form {
width: 550px;
margin: 10px;
padding: 20px;
background-color: #fffacd;
color: #4b0082;
font-size: 16px;
border-radius: 8px;
}
input[type="radio"] {
margin: 10px 5px;
}
#btn {
width: 80px;
height: 35px;
background-color: #d8bfd8;
color: #4b0082;
font-weight: bold;
border: 0;
border-radius: 5px;
cursor: pointer;
}
#btn:hover {
background-color: #4b0082;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Choose the correct answer</h3>
<form action="" method="GET">
<label>
<input type="radio" name="answer" value="1" required>Java is a low-level language.
</label>
<br>
<label>
<input type="radio" name="answer" value="2">Python does not support object-oriented programming.
</label>
<br>
<label>
<input type="radio" name="answer" value="3">C is one of the most common and widely used programming languages.
</label>
<br>
<label>
<input type="radio" name="answer" value="4">C++ is the preferred language for competitive programming.
</label>
<br><br>
<input type="submit" id="btn" value="Submit">
</form>
</body>
</html>
When the user tries to submit the form without checking a radio button, the required attribute generates a warning message and prevents the form from being submitted
Browser validation message: "Please select one of these options."
Example Multiple Required Radio Groups
Following example shows how to use the required attribute with multiple radio button groups
<!DOCTYPE html>
<html>
<head>
<title>Multiple Required Radio Groups</title>
<style>
.form-group {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
label {
display: block;
margin: 8px 0;
}
input[type="submit"] {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Customer Feedback Form</h3>
<form action="" method="POST">
<div class="form-group">
<h4>How would you rate our service?</h4>
<label>
<input type="radio" name="rating" value="excellent" required> Excellent
</label>
<label>
<input type="radio" name="rating" value="good"> Good
</label>
<label>
<input type="radio" name="rating" value="average"> Average
</label>
<label>
<input type="radio" name="rating" value="poor"> Poor
</label>
</div>
<div class="form-group">
<h4>Would you recommend us to others?</h4>
<label>
<input type="radio" name="recommend" value="yes" required> Yes
</label>
<label>
<input type="radio" name="recommend" value="no"> No
</label>
<label>
<input type="radio" name="recommend" value="maybe"> Maybe
</label>
</div>
<input type="submit" value="Submit Feedback">
</form>
</body>
</html>
In this example, both radio button groups are required. The user must select one option from each group before the form can be submitted successfully.
How the Required Attribute Works with Radio Groups
When the required attribute is applied to any radio button in a group, the entire group becomes required. The browser's built-in validation ensures that at least one radio button from that group is selected before allowing form submission. Key points to remember
-
Only one radio button in the group needs the
requiredattribute. -
All radio buttons in the group must share the same
nameattribute value. -
The browser displays a validation message if no option is selected when submitting.
-
The validation message appears near the first radio button in the group.
Browser Compatibility
The required attribute for radio buttons is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The built-in validation provides a consistent user experience across different platforms.
3K+ Views
