Example of autocomplete and novalidate in HTML5
April 05, 2014
"autocomplete" Attribute in HTML5
Suppose we have a user form that will contain some elements. User fills the information in the form and submits. Now the requirement is that on the refresh of the page, form should be loaded again with previous filled form. In HTML5 we can achieve it very easily just by using an attribute autocomplete at form level and will be applied for all the elements of the form. autocomplete can also be applied on element level and it can be on and off too. Find the example below how to use autocomplete.<!DOCTYPE html> <html> <body> <h4>autocomplete Demo in HTML5</h4> <form action="" autocomplete="on"> User name:<input type="text" name="uname"><br> Company name: <input type="text" name="company" autocomplete="off"><br> <input type="submit" value="submit"> </form> </body> </html>
There are two fields within the form. There is autocomplete on the form level. One field is autocomplete off at element level. This field will not be autocomplete on the refresh of the page. To test the example fill up the form and submit it. First filed will be autocompleted and second one not.
"novalidate" Attribute in HTML5
HTML5 has provided some input types that will force the form to be validated automatically. These are email, url etc. Now if the requirement is to do off all validation in one go. So here HTML5 provides an attribute as novalidate that is applied at form level and it will make all validation off of its element in one go. Find the example.
<!DOCTYPE html>
<html>
<body>
<h4>novalidate Demo in HTML5</h4>
<form action="" novalidate>
Email: <input type="email" name="email"><br>
URL: <input type="url" name="urlvalidation">
<input type="submit" value="submit">
</form>
</body>
</html>
Test now. Try to submit the page. We will see that validation will be skipped for email and url input type.