HTML5: Form Validation
What is form validation?
Why form validation?
Validation helps ensure the user enters information in a form that the server will be able to understand when the form is submitted. Validating the contents of the form before it is sent to the server will help:
- Reduce the amount of work the server has to do
- Enables users to see if there are problems with the form faster than if validation were performed on the server.
At this time, Firefox, Chrome and Opera updated versions support HTML5 validation. You should update your Browser. Don’t worry if your visitors don’t use supported browser. They can still see the form as they would see on a HTML4.0 supported sites. The only difference is that they can’t get new HTML5 form validation facilities.
Date Input Validation :
Its very confusing to take date input from users. Many users are comfortable with Date-Month-Year. They will write 9th october like this 09-10-2013. But others will simple write 10-09-2013. So server will process wrong data if user write wrong format of Dates. But by using HTML5 form validation you will give them a clear input option which can be controlled by scrolling of mouse. Check Example:
1 2 3 4 5 6 7 8 9 10 11
<form action="http://www.yoursite.com/birthday.php" method="post"> <label for="username">Date:</label> <input type="date" name="birthday" /> <input type="submit" value="Submit" /> </form>
is new HTML5 input types. If you are asking the user for a date, you can use an
element and give the type attribute a value of date. This will create a date input in browsers that support the new HTML5 input types.
HTML5 : EMAIL INPUT
HTML5 has also introduced inputs that allow visitors to enter email addresses and URLs. Browsers that do not support these input types will just treat them as text boxes.
If you ask a user for an email address, you can use the email input. Browsers that support HTML5 validation will check that the user has provided information in the correct format of an email address. Some smartphones also optimize their keyboard to display the keys you are most likely to need when entering an email address (such as the @ symbol). Check Example:
1 2 3 4 5 6 7 8 9
<form action="http://www.example.org/subscribe.php"> <p>Please enter your email address:</p> <input type="email" name="email" /> <input type="submit" value="Submit" /> </form>
HTML5 : URL INPUT
A URL input can be used when you are asking a user for a web page address. Browsers that support HTML5 validation will check that the user has provided information in the format of a URL. Some smart phones also optimize their keyboard to display the keys you are most likely to need when entering a URL. Check example:
1 2 3 4 5 6 7 8 9
<form action="http://www.yoursite.com/url.php"> <p>Please enter your url:</p> <input type="url" name="website" /> <input type="submit" value="Submit" /> </form>
HTML5 SEARCH INPUT :
If you want to create a single line text box for search queries, HTML5 provides a special type of input for that purpose.
If you want to create a single line text box for search queries, HTML5 provides a special search input. To create the HTML5 search box the input element should have a typeattribute whose value is search. Older browsers will simply treat it like a single line text box. Recent browsers add some features that improve usability.For example, Safari on a Mac adds a cross to clear the search box when you have started to enter information. Safari also automatically rounds the corners on the search input field. Check example:
1 2 3 4 5 6 7 8 9 10 11
<form action="http://www.example.org/search.php"> <p>Search:</p> <input type="search" name="search" placeholder="Enter keyword" /> <input type="submit" value="Search" /> </form>
On any text input, you can also use an attribute called placeholderwhose value is text that will be shown in the text box until the user clicks in that area. Older browsers simply ignore this attribute.
Thats all for today. I am preparing some CSS3 tutorials for you. Subscribe to our mailing list so that you won’t miss those tutorial and will get informed as I post it here. I hope you have enjoyed this post. Good bye!