Styling HTML5 Validation
Labels:
css,
html,
style validation
·
To change the style of the validation message bubble, four div elements with pseudo-classes are used:
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
You can clearly see the change in the validation message bubble
You can learn more about this styling at WebKit wiki.
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
You can clearly see the change in the validation message bubble
 |
| Before Styling |
 |
| After Styling |
Let's add some style in the validated input field I've created here:
CSS:
::-webkit-validation-bubble-arrow
{
border:2px solid #F00;
background:#FD8484;
-webkit-box-shadow:none;
}
::-webkit-validation-bubble-message
{
position: relative;
color:#F00;
background:#FD8484;
border:2px solid #F00;
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.333);
}
This is what it will give:
|
| After Styling |
You can learn more about this styling at WebKit wiki.
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:
Posts (Atom)
