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:
- <!DOCTYPE html>
- <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <title>Autocomplete Attribute</title>
- </head>
- <body>
- <h3>HTML5 Autocomplete Attribute</h3>
- <form action="form.asp" autocomplete="on">
- First name:<input type="text" name="fname" placeholder="Enter First Name"><br>
- Last name:
- <input type="text" name="lname" placeholder="Enter Last Name"><br>
- E-mail:
- <input type="email" name="email" autocomplete="off" required aria-required="true"><br>
- <input type="submit">
- </form>
- <p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
- <p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
- </body>
- </html>
Output
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
Join the conversation! Your thoughts help the community grow.