Html5 Form Validation Attributes

There are different versions of Html, but the most commonly used one is the Html5, this is because it has some additional features such as form validation.

HTML5 provides built-in form validation attributes that can be used to validate form input without writing any JavaScript code.

Commonly used HTML5 validation attributes

1.            Required: This is one of the most common Html5 form validation attribute. It simply tells the user that a particular field with “required” attribute must be filled before submitting the form

Html code
<input type="text" required>

2.            Maxlength: The maxlenght property specifies the maximum number of characters allowed in an input field.

Html code
<input type="text" maxlength="10">

3.            Min And Max: This Specifies the minimum and maximum values allowed in an input field (for number, range, date, and time input types).

Html code
<input type="number" min="0" max="100">

4.            Pattern: This Specifies a regular expression or pattern that an input field’s value must match.

Html code
<input type="text" pattern="[A-Za-z]{3}">

5.            Email: This specifies that an input field must contain a valid email address.

Html
<input type="email">

6.            Url: This specifies that an input field must contain a valid URL.

Html 
<input type="url">

7.            Tel: This specifies that an input field must contain a valid telephone number.

Html 
<input type="tel">

8.            Minlength: The minlenght property Specifies the minimum number of characters required in an input field.

Html
<input type="text" minlength="6">

9.            Step:  This Specifies the step size for number and range input types.

Html
<input type="number" step="0.5">

By using these HTML5 validation attributes, the browser automatically performs easy form validation and displays error messages when the input data from the user does not meet the specified criteria for it to be submitted. However, keep in mind that client-side validation alone is not sufficient for secure form handling, and server-side validation is necessary to ensure data integrity and security.

You can also learn about form action and method attributes in Html

Hopefully you understand how to use Html5 attributes to validate a form

3 thoughts on “Html5 Form Validation Attributes”

  1. Pingback: Responsive Form Using Html and Css - codeharis

  2. Pingback: Create a Responsive Login Form Using HTML and CSS - codeharis

  3. Pingback: How to style a file input button using CSS - codeharis

Leave a Comment

Your email address will not be published. Required fields are marked *