Form Validation Using Only HTML: A Ultimate Guide

Introduction:

Form validation is an important part of web development since it ensures that user input is correct and relevant before sending the form to the server. HTML has several form properties that may be used to validate user inputs on the client side without the need for JavaScript or another programming language.

We'll go through some of the most widely used HTML form elements for validation and how to use them to validate user inputs in your forms in this article.

Required Attribute

The required attribute indicates that an input field is required and cannot be left empty. This is especially handy for input areas where the user must provide a value, such as a name, email, and password.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

The required attribute is added to the input field with the type of email in the preceding example. If the email box is left blank, the form will not be submitted. In addition, the user will get an error notice stating that the field is necessary.

Pattern Attribute

You may use the pattern attribute to define a regular expression pattern that the input field must match to be legitimate. This is very helpful for checking input fields like phone numbers, zip codes, and password fields.

<label for="password">Password:</label>
<input type="password" id="password" name="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">

The pattern attribute is added to the password input box in the preceding example, and a regular expression pattern that requires the password to have at least one number, one uppercase and lowercase letter, and a minimum length of 8 characters are defined. If the password does not match the provided pattern, the title property is used to display a more comprehensive error message to the user.

Min & Max Attribute

The min and max attributes are used to determine the minimum and maximum values that can be entered into an input field. This is especially useful for input fields that need the user to submit a value inside a defined range, such as number, range, and date.

<label for="age">Age:</label>
<input type="number" id="age" name="age" required min="18" max="100">

The min and max attributes are added to the age input field in the preceding example, and the minimum and maximum age values are supplied. This prevents the user from entering a number less than 18 or larger than 100.

Minlength & Maxlenght Attributes

The minlength and maxlength attributes are used to specify the input string's minimum and maximum lengths. This is especially handy for input fields like name and password, where the user must provide a value of a certain length.

<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="5" maxlength="15">

The minlength and maxlength attributes are added to the username input field in the preceding example, and the minimum and maximum length values are given. This prevents the user from providing a username that is less than 5 characters or more than 15 characters.

Type Attribute

The type attribute is used to define the kind of input and to automatically do basic validation. Email, number, date, and password are some of the most prevalent forms.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

The type attribute is set to email in the above example, which will do basic validation to confirm that the input is a genuine email address.

Conclusion:

Finally, by applying the HTML form validation attributes mentioned in this article, you may enhance the user experience of your forms while also ensuring that the data supplied is accurate and useful.