QuerySquish.com

In the previous lesson, we learned about HTML Canvas. Now, let's explore HTML form validation and how to ensure users provide correct data.

HTML5 Form Validation

HTML5 introduced several form validation attributes that allow you to validate user input without requiring JavaScript:

• required: Specifies that an input field must be filled out
• min and max: Specifies the minimum and maximum values for an input field
• minlength and maxlength: Specifies the minimum and maximum length of input data
• pattern: Specifies a regular expression to check input against
• type: Specifies what kind of input is expected (email, number, etc.)

Example Usage

Let's see how to use these validation attributes:

    <form>
        <!-- Required field -->
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br>

        <!-- Email validation -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br>

        <!-- Number range -->
        <label for="age">Age (18-100):</label>
        <input type="number" id="age" name="age" min="18" max="100"><br>

        <!-- Text length -->
        <label for="password">Password (8-20 characters):</label>
        <input type="password" id="password" name="password" minlength="8" maxlength="20"><br>

        <!-- Pattern matching (only letters and numbers) -->
        <label for="username2">Username (letters and numbers only):</label>
        <input type="text" id="username2" name="username2" pattern="[A-Za-z0-9]+"><br>

        <input type="submit" value="Submit">
    </form>