HTML5 Form Validation
Labels:
form,
html,
validation
·
To validate a form in HTML5, you don't need to write tons of code, it is as easy as copy and paste in HTML5. All you have to do is this:
The 'required' attribute :
To make the field required for the user, just add a 'required' attribute in any input field:
Your Name: <input type="text" name="name" required>
which gives you
Other input types :
There are many other input types in HTML5 which gives you full control to validate you forms, some of the commonly used are given below:
1. Email :
The input field with email attribute accepts only email addresses:
Your Email: <input type="email" name="email">
<input type="submit" name="submit" value="Submit">
2. Number :
The number attribute gives the user numbers to select, for example Age.
Enter Age: <input type="number" name="age">
You can define the 'min' and 'max' attributes to constrain the field:
Enter Age: <input type="number" name="age" min="18" max="50">
3. Url :
Similarly, there are other attributes by which you can validate your form:
The 'required' attribute :
To make the field required for the user, just add a 'required' attribute in any input field:
Your Name: <input type="text" name="name" required>
which gives you
 |
| The 'required' attribute |
There are many other input types in HTML5 which gives you full control to validate you forms, some of the commonly used are given below:
1. Email :
The input field with email attribute accepts only email addresses:
Your Email: <input type="email" name="email">
<input type="submit" name="submit" value="Submit">
 |
| Email Validation |
2. Number :
The number attribute gives the user numbers to select, for example Age.
Enter Age: <input type="number" name="age">
You can define the 'min' and 'max' attributes to constrain the field:
Enter Age: <input type="number" name="age" min="18" max="50">
 |
| Number Attribute |
3. Url :
The url attribute let you to take urls from user:
Enter URL: <input type="url" name="website">
 |
| URL Attribute |
Similarly, there are other attributes by which you can validate your form:
- search
- date
- month
- week
- tel
- time
- color
Now the question is can we style the validation bubble? And surely the answer is yes. The next tutorial shows you how to give style to the validation bubble.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment