Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 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 value attribute. 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.
Example
Let us see an example that consists of radio buttons within a form.
<!DOCTYPE html>
<html>
<head>
<title> Simple form with radio buttons </title>
</head>
<body>
<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" onclick= "acknowledge()">
</form>
<script>
function acknowledge(){
alert(" The form has been submitted successfully. ")
}
</script>
</body>
</html>
As it can be observed, the form can be submitted even without selecting a radio button from the list of options. We can resolve this 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 (if we don't have to dynamically generate radio buttons). 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 necessary attribute to the entire group. Let's see an example for the same.
Example
In this example, we create a form with radio inputs and apply required attribute to the radio input field.
<!DOCTYPE html>
<html>
<head>
<title> How to Use the "required" Attribute with the Radio Input Field </title>
<style>
form{
width: 550px;
margin: 10px;
background-color: lemonchiffon;
color: indigo;
font-size: 18px;
}
input{
margin: 10px;
}
#btn{
width: 60px;
height: 30px;
background-color: thistle;
color: azure;
font-weight: bold;
border: 0;
}
#btn:hover{
background-color: indigo;
}
</style>
</head>
<body>
<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>
<input type= "submit" id= "btn">
</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.
552 Views
