Forms are used everywhere on the web to accept the data from the user and process the information from the submitted data. However, before submitting any data to the server, it's essential to check whether the user entered the data in the correct format. This is also called client-side validation because it helps ensure the submitted data is in proper form on the client side. Let's dive deeper into what is client-side validation and how you can achieve the same with the attribute HTML forms.
Forms validation
You should have come across some website with a registration form. There, the forms input fields provide feedback when you don't enter the data in the correct format, such as:
"Please enter a valid email address."
"Please enter a password of 10 to 25 characters long." and so on.
This is called HTML5 forms validation or client-side validation using HTML5. Whenever a user enters some data in the form, the browser checks if the data is in the correct format or not. If the entered data is not in the proper format, the browser will provide feedback messages to the user. As the validation is done in the browser, it is called client-side validation which is done using HTML5.
Built-in form validation
In this section, you'll learn about built-in form validation that uses HTML5 form validation features. Built-in form validation mainly uses HTML5 and doesn't require a lot of JavaScript, therefore it is not as customizable as JavaScript validation. There are different validation attributes available for form validation. Let's take a look at these attributes and study the examples to learn how you can use built-in forms validation in HTML5.
The type attribute
You are already familiar with the type attribute for various HTML elements. Similarly, there is a type attribute for the input element in HTML forms. This attribute specifies the type of input field. There are different values of the type attribute, for example, button, checkbox, color, email, file, text, password, and so on. If the type of input field is not specified, the default type is text.
The syntax goes like this:
<input type="value">Here is an example:
<form action="">
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<label for="password">Password:</label>
<input type="password" name="passsword" id="password" />
<label for="dob">Date of Birth:</label>
<input type="date" name="dob" id="dob" />
</form>Here is the output:
The required attribute
The required attribute of the input tag specifies that an input field must be filled out or must not remain empty before submitting the form. This attribute is used when you want the user to enter some mandatory information in the input field. This attribute is used only with the following input types: radio, checkbox, text, search, tel, email, password, date picker, number, file, and URL.
The syntax goes like this:
<input type="text" required>Here is an example:
<form action="">
<label for="name">Username:</label>
<input type="text" name="name" id="name" /><br /><br />
<label for="password">Password:</label>
<input type="password" name="password" id="password" required />
<button type="submit">Submit</button>
</form>Here is the output:
The pattern attribute
You can use the pattern attribute to provide a regular expression on which the pattern of input values is checked. It means that when the form is submitted, this attribute checks whether the user has entered the data in the same pattern as specified in the attribute. If not, the browser asks the user to enter the data in the required pattern.
The syntax goes like this:
<input type="text" pattern="regex">Here is an example:
<form action="">
<label for="name">Name:</label>
<input type="text" name="name" id="name" /><br /><br />
<label for="email">Email:</label>
<input type="email" name="email" id="email" /><br /><br />
<label for="password">Password.:</label>
<input type="password" name="password" id="password" pattern="[1-9]{5}-[2-9]{5}"
title="First five in the range of 1-9 and next five in range of 2-9"/><br /><br />
<button type="submit">Submit</button>
</form>Here is the output:
The min and max attribute
The min and max attributes of the input field specify the minimum and maximum value that the input can hold. The user can't enter any value beyond these limits in the input field. This attribute works with a wide range of input types: month, week, time, range, number, and so on.
The syntax goes like this:
<input type="number" min="10" max="20">Here is an example:
<form action="">
<label for="name">Name:</label>
<input type="text" name="name" id="name" /><br /><br />
<label for="dob">Date of birth:</label>
<input type="date" name="dob" id="dob" min="2010-01-01" max="2015-01-01"/><br /><br />
<button type="submit">Submit</button>
</form>And the output is the following:
The minlength and maxlength attributes
When provided, the minlength attribute limits the number of characters a user may enter in a textarea or input tag. The minlength attribute must have a value that is an integer from 0 to higher.
The syntax goes like this:
<input minlength="value">Here is an example:
<form action="">
<label for="name">Name:</label>
<input type="text" name="name" id="name" /><br /><br />
<label for="username">Username:</label>
<input type="text" name="username" id="username" minlength="6" />
<button type="submit">Submit</button>
</form>Here is the output:
Similarly, the maxlength attribute restricts the number of characters allowed in the input field so that a user can't enter more characters than the value of the maxlength attribute in the input field.
The syntax goes like this:
<input maxlength="value">Here is an example:
<form action="">
<label for="name">Name:</label>
<input type="text" name="name" id="name" /><br /><br />
<label for="username">Username:</label>
<input type="text" name="username" id="username" maxlength="6" />
</form>Here is the output:
As you can see in the example above, the username input field can't accept further input from the user after the 6th character, as the value of the maxlength attribute is set to 6.
Conclusion
In this topic, you've studied different attributes of the input element that are used to add built-in validation in HTML forms. To specify the input field type, use the type attribute. Plus, the required attribute doesn't allow the user to leave the input field empty. You've also studied how you can manage the sizes of the text area or input field with the minlength and maxlength attributes. You can use the pattern attribute to request a certain pattern of input values. Lastly, the min and max attributes specify the minimum and maximum values an input area can hold respectively.