Post
Ask Question

HTML5 Form Attributes: Part 1

Html5 New Form Attributes

 
It helps developers ensure their users enter the data needed on a webpage, as well as ensuring it's the correct data.
 
HTML5 has several form attributes; they are:
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step
Now in this article, I describe each one of them. For defining these attributes we use the two tags <form> and <input>.
 
Here the <input> tag defines an input control and the <form> tag defines the HTML form.
 

1. Autocomplete Attribute

 
Specifies whether the form or form control should have autocompleted functionality. By default, autocomplete is on. To disable it, use autocomplete=" off".
 
In other words, it is an option to turn off automatic form completion of values for a field. Possible values are "on" and "off".
 
Some browsers attempt to aid the user by automatically filling form controls rather than having the user reenter their information each time. For example, a field asking for the user's telephone number can be automatically filled with the user's phone number.
 
Note: The autocomplete attribute works with <form> and the following <input> types: text, search, URL, telephone, email, word, datepickers, range, and color.
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet Explorer, Safari, Opera and Firefox.
 
Example
 
The following is an example of using an autocomplete attribute:
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Autocomplete Attribute</title>  
  7. </head>  
  8. <body>  
  9.     <h3>HTML5 Autocomplete Attribute</h3>  
  10.     <form action="form.asp" autocomplete="on">  
  11.         First name:<input type="text" name="fname" placeholder="Enter First Name"><br>  
  12.         Last name:  
  13.         <input type="text" name="lname" placeholder="Enter Last Name"><br>  
  14.         E-mail:  
  15.         <input type="email" name="email" autocomplete="off" required aria-required="true"><br>  
  16.         <input type="submit">  
  17.     </form>  
  18.     <p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>  
  19.     <p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>  
  20. </body>  
  21. </html> 
Output
 
autocomp.jpg
 

2.Novalidate Attribute

 
Applies only to the <form> element that has validation constraints to allow the form to be submitted without validation.
 
The novalidate attribute is a boolean attribute. If present, it specifies that the data input of the form should not be validated when submitted.
 
Syntax
 
The syntax of the novalidate attribute in HTML5 is:
 
<form novalidate>      ......... ......... </form>
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet Explorer, Opera and Firefox except Safari.
 
Example
 
The following is an example of using a novalidate attribute:
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Novalidate Attribute</title>  
  7. </head>  
  8. <body>  
  9.     <h3>HTML5 Novalidate Attribute</h3>  
  10.     <form action="form.asp" method="get" novalidate>  
  11.         E-mail:  
  12.         <input type="email" name="your_email"><br>  
  13.         word:  
  14.         <input type="word" name="word"><br>  
  15.         <input type="submit">  
  16.     </form>  
  17. </body>  
  18. </html> 
Output
 
novalidate.jpg
 

3. Autofocus Attribute

 
The autofocus attribute is a boolean attribute. It specifies whether the focus should be set to this field as soon as it has loaded.
 
It's a good idea to set the focus in the first field for many forms. Previously, the only way to do this has been with JavaScript. With HTML5, just add the autofocus
 
attribute to the <input> tag. If you load the page in any major browser, the cursor is automatically inserted in the field.  
 
Note: Only one field can have focus at any given time, so you should use autofocus only once in a form.
 
Syntax
 
The syntax of the autofocus attribute in HTML5 is:
 
<form >  <input type="text" name="name" id="name" autofocus> </form>
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet Explorer, Opera, Firefox and Safari.
 
Example
 
The following is an example of using an autofocus attribute:
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Autofocus Attribute</title>  
  7. </head>  
  8. <body>  
  9.     <h3>HTML5 Autofocus Attribute</h3>  
  10.     <form action="form.asp">  
  11.         First name:<input type="text" name="fname" autofocus><br>  
  12.         Last name:  
  13.         <input type="text" name="lname"><br>  
  14.         Email:     
  15.         <input type="email" id="email" name="email" placeholder="[email protected]"><br>  
  16.         <input type="submit">  
  17.     </form>  
  18. </body>  
  19. </html> 
Output
 
autofocus.jpg
 


Similar Articles