How To Validate Input Field In The HTML Form?
Input fields are essential components of HTML forms, enabling users to provide data for processing. Ensuring proper validation of these input fields enhances user experience and prevents errors or malicious inputs.
What We Are Going to Create?
We will create simple Validating Input Fields in HTML Forms.
- A simple HTML form with various input fields to collect user data.
- First Name and Last Name: Text input fields with required validation and minimum character length.
- Email Address: Input field for email with built-in validation for proper email format.
- Password: Secure input field with a minimum character limit.
- Phone Number: Input field with a specific pattern for phone number format validation
- A simple "Submit" button to send the data once the form is filled and validated.
Project Preview
Validating Input Fields HTML
<html>
<head></head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Validate Input Fields in HTML Form
</h3>
<form action="#" method="post">
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname"
placeholder="Enter your first name" required minlength="2">
<br><br>
<label for="lname">Last Name:</label>
<input type="text" name="lname" id="lname"
placeholder="Enter your last name" required minlength="2">
<br><br>
<label for="email">Email Id:</label>
<input type="email" name="email" id="email"
placeholder="Enter your email address" required>
<br><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password"
placeholder="Enter a secure password" required
minlength="8">
<br><br>
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone"
placeholder="XXX-XXX-XXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
title="Format: 123-456-7890" required>
<br><br>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
- HTML Structure: The form uses a centered layout with headings to display "GeeksforGeeks" and a subtitle. It includes a form with labeled input fields for user data collection.
- First Name, Last Name: Text fields with required and minimum length validation.
- Email: Validates the email format using
type="email". - Password: Requires a minimum of 8 characters.
- Phone Number: Validates format
123-456-7890using a regex pattern. - Submit Button: A single
Submitbutton is included to send the form data upon successful validation. - Built-in Validation: Uses attributes like
required,minlength, andpatternfor real-time browser validation, ensuring user inputs are correct. - User Experience Enhancements: Includes placeholders for guidance and tooltips (
title) to explain input formats, making the form intuitive and user-friendly.
HTML form validation attributes
Atributes | Uses |
|---|---|
It ensures the user fills out a field before the form is submitted. | |
Sets a maximum number of characters that can be entered. | |
Sets a minimum number of characters required. | |
Pattern | Specifies a regular expression that the input value must match |
Type | Determines the type of input and enforces specific validation rules. |
| Set minimum and maximum values for numeric or date inputs. |
Provides a tooltip with guidance on input requirements when the input does not match the pattern | |
Multiple | Allows multiple entries for certain types of inputs like email or file. |
Displays a hint or example text inside the input field. | |
Disabled | Disables the input, making it uneditable and excluding it from form submission. |
Controls whether the browser should automatically fill in values based on previous inputs. | |
Automatically focuses on a specific input field when the page loads. | |
Makes the input field uneditable but includes it in the form submission | |
Disables native HTML form validation. |
