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
HTML DOM Input Radio required property
The HTML DOM input radio required property is associated with the required attribute of an <input> element. The required property is used for setting and returning if it is necessary to check some radio button or not before the form is submitted to the server. This allows the form to not submit if a radio button with required attribute is left unchecked by the user.
Syntax
Following is the syntax for −
Setting the required property.
radioObject.required = true|false
Here, true represents the radio button must be checked while false represents its optional to check the radio button before submitting the form.
Example
Let us look at an example for the input radio required property −
<!DOCTYPE html>
<html>
<body>
<h1>Radio required property</h1>
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php">
FRUIT:
<input type="radio" name="fruits" id="Mango" required>Mango
<br><br>
<input type="submit">
</form>
<button type=”button” onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
function checkReq() {
var Req=document.getElementById("Mango").required;
if(Req==true)
document.getElementById("Sample").innerHTML="The radio button must be checked before
submitting";
else
document.getElementById("Sample").innerHTML="The radio button is optional and can be
left unchecked by the user";
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the CHECK button −
On clicking the “Submit” button without the radio button being checked −
In the above example −
We have first created an input radio button with id “Mango”, name “fruits” and required attribute set to true. The radio button contained inside a form which has action=”Sample_page.php” for specifying where to submit the form data when clicked on the submit button. The form also has an inline style applied to it −
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php"> FRUIT: <input type="radio" name="fruits" id="Mango" required>Mango <br><br> <input type="submit"> </form>
We have then created a button CHECK that will execute the checkReq() method on being clicked upon by the user.
<button type=”button” onclick="checkReq()">CHECK</button>
The checkReq() method uses the getElementById() method to get the input element with type radio and get its required property, which in our case returns true. The returned boolean value is assigned to a variable Req and based on the returned value whether it is true or false we display appropriate message in the paragraph with id “Sample” using its innerHTML property −
function checkReq() {
var Req=document.getElementById("Mango").required;
if(Req==true)
document.getElementById("Sample").innerHTML="The radio button must be checked before submitting";
else
document.getElementById("Sample").innerHTML="The radio button is optional and can be left unchecked by the user";
}
100 Views
