RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/how-to-validate-input-field-in-the-html-form/ below:

How To Validate Input Field In The HTML Form?

Last Updated : 06 Jan, 2025

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 Validate Input Field In The HTML Form Validating Input Fields HTML 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-7890 using a regex pattern.
Submit Button: A single Submit button is included to send the form data upon successful validation.
Built-in Validation: Uses attributes like required, minlength, and pattern for 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.