Home  >  Html5

Example of autocomplete and novalidate in HTML5

April 05, 2014
In HTML5 there are new attributes introduced in form tag. These are autocomplete and novalidate . In this page we will provide the functionality description and demo of these attributes. You can run the demo online. Both of the attribute is set at the form level and it atomically applies for all the fields within this form. Let us understand one by one. The below examples will run only on HTML5 supporting browser.

"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.
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us