1. Introduction

The goal of this tutorial is to teach you how to validate user input in HTML. By learning this, you will be able to ensure that the data entered into your forms is valid, which can improve data integrity and enhance user experience.

By the end of this tutorial, you will understand:

• The concept of user input validation
• How to use HTML attributes to validate user input
• Best practices for validating user input

There are no strict prerequisites for this tutorial, but basic knowledge of HTML, particularly forms, will be very beneficial.

2. Step-by-Step Guide

What is User Input Validation?

User input validation is the process of ensuring that the user has entered the correct type of data in an input field. For example, if a form asks for an email address, it should only accept responses in the form of an email address.

HTML Form Validation

HTML5 provides several built-in features for form validation. These include attributes like required, pattern, min, max etc.

• required: This attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form.

• pattern: This attribute specifies a regular expression that the input field's value is checked against.

• min and max: These attributes specify the minimum and maximum values for an input field.

3. Code Examples

Example 1: Required Attribute

<!-- This is a simple HTML form -->
<form action="">
  <!-- This input field requires an email and is required -->
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Submit">
</form>

In this example, the required attribute makes it necessary for the user to fill out the email field before they can submit the form.

Example 2: Pattern Attribute

<!-- This is a simple HTML form -->
<form action="">
  <!-- This input field requires a pattern and is required -->
  <input type="text" id="username" name="username" pattern="[a-zA-Z0-9]{5,12}" required>
  <input type="submit" value="Submit">
</form>

In this example, the pattern attribute uses a regular expression to specify that the username must be between 5 and 12 alphanumeric characters.

4. Summary

In this tutorial, you've learned about user input validation and how to use HTML5 validation attributes like required, pattern, min, and max to validate user input in a form. As next steps, you could look into JavaScript validation for more complex validation scenarios.

5. Practice Exercises

1. Create a form with a password field that requires at least 8 characters, including a number and a special character.

2. Create a form that requires a US phone number in the format xxx-xxx-xxxx.

Here are the solutions:

1. Password Field

<form action="">
  <input type="password" id="pwd" name="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
  <input type="submit" value="Submit">
</form>

This password field uses the pattern attribute to enforce a strong password policy. The regular expression ensures the password is at least 8 characters long and includes at least one digit, one lowercase letter, and one uppercase letter.

1. US Phone Number

<form action="">
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
  <input type="submit" value="Submit">
</form>

This phone number field uses a simple pattern to enforce the format xxx-xxx-xxxx.