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 specify that the element must be filled out before submitting the form in HTML?
The required attribute in HTML is used to specify that a form element must be filled out before the form can be submitted. When a required field is left empty and the user attempts to submit the form, the browser displays a validation message and prevents form submission until the field is completed.
The required attribute is a boolean attribute that can be applied to <input>, <select>, and <textarea> elements. When present, it makes the form field mandatory for successful form submission.
Syntax
Following is the syntax for the required attribute −
<input type="text" name="fieldname" required> <select name="options" required>...</select> <textarea name="message" required></textarea>
The required attribute is a boolean attribute, meaning its presence indicates the field is required. You can write it as required, required="", or required="required".
Using Required with Text Input
Example
Following example shows how to make a text input field mandatory using the required attribute −
<!DOCTYPE html>
<html>
<head>
<title>Required Text Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Registration</h2>
<form action="/submit.php" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" placeholder="Enter your username" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
If you try to submit the form without filling the required fields, the browser will display an error message like "Please fill out this field" and prevent submission.
Using Required with Select Dropdown
Example
Following example demonstrates the required attribute with a select dropdown −
<!DOCTYPE html>
<html>
<head>
<title>Required Select Field</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection</h2>
<form action="/enroll.php" method="post">
<label for="course">Select a Course:</label><br>
<select id="course" name="course" required>
<option value="">-- Please choose a course --</option>
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select><br><br>
<input type="submit" value="Enroll">
</form>
</body>
</html>
The first option has an empty value, making it act as a placeholder. The user must select a valid course option to submit the form successfully.
Using Required with Textarea
Example
Following example shows how to make a textarea field mandatory −
<!DOCTYPE html>
<html>
<head>
<title>Required Textarea</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form action="/contact.php" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Enter your message here..." required></textarea><br><br>
<input type="submit" value="Send Message">
</form>
</body>
</html>
Both the name input and message textarea must be filled before the form can be submitted.
Required Attribute with Different Input Types
The required attribute works with various input types, each with specific validation behavior −
| Input Type | Validation Behavior |
|---|---|
| text, password | Must contain at least one character (not just whitespace) |
| Must contain a valid email address format | |
| url | Must contain a valid URL format |
| number, range | Must contain a valid number within specified range |
| checkbox | Must be checked |
| radio | At least one option in the group must be selected |
| file | At least one file must be selected |
Example − Multiple Input Types
<!DOCTYPE html>
<html>
<head>
<title>Required Different Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Complete Profile</h2>
<form action="/profile.php" method="post">
<label for="email">Email (required):</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="age">Age (required):</label><br>
<input type="number" id="age" name="age" min="18" max="100" required><br><br>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the terms and conditions (required)</label><br><br>
<input type="submit" value="Create Profile">
</form>
</body>
</html>
This form requires a valid email, a number between 18-100, and the checkbox must be checked before submission.
Custom Validation Messages
You can customize the validation message using JavaScript and the setCustomValidity() method −
Example
<!DOCTYPE html>
<html>
<head>
<title>Custom Validation Message</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form action="/register.php" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>
<input type="submit" value="Register">
</form>
<script>
document.getElementById('username').addEventListener('invalid', function(e) {
if (this.validity.valueMissing) {
this.setCustomValidity('Username is required for registration!');
}
});
document.getElementById('username').addEventListener('input', function(e) {
this.setCustomValidity('');
});
</script>
</body>
</html>
When the username field is left empty, it displays "Username is required for registration!" instead of the default browser message.
Browser Support
The required attribute is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. For older browsers, you can provide JavaScript fallback validation.
Conclusion
The required attribute is a powerful HTML5 feature for client-side form validation. It ensures mandatory fields are completed before form submission and works across different input types including text, email, select, and textarea elements. While it provides built-in browser validation, you can enhance it with custom messages using JavaScript for better user experience.
859 Views
