HTML5 New Form Attributes
This chapter covers some of the new attributes for <form> and <input>.
New form attributes:
- autocomplete
- novalidate
New input attributes:
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height and width
- list
- min, max and step
- multiple
- pattern (regexp)
- placeholder
- required
Browser Support
| Attribute | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | No | 4.0 | 10.0 | 3.0 | 4.0 |
| form | No | 4.0 | 9.5 | 10.0 | No |
| form overrides | No | 4.0 | 10.5 | 10.0 | No |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | No | 4.0 | 9.5 | No | No |
| min, max and step | No | No | 9.5 | 3.0 | No |
| multiple | No | 3.5 | 11.0 | 3.0 | 4.0 |
| novalidate | No | 4.0 | 11.0 | 10.0 | No |
| pattern | No | 4.0 | 9.5 | 3.0 | No |
| placeholder | No | 4.0 | 11.0 | 3.0 | 3.0 |
| required | No | 4.0 | 9.5 | 3.0 | No |
autocomplete Attribute
The autocomplete attribute specifies that the form or input field should have an autocomplete function.
Note: The autocomplete attribute works with <form>, and the following <input> types: text, search, url, telephone, email, password, datepickers, range, and color.
When the user starts to type in an autocomplete field, the browser should display options to fill in the field:
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<html>
<body>
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
</body>
</html>
Note: In some browsers you may need to activate the autocomplete function for this to work.
autofocus Attribute
The autofocus attribute specifies that a field should automatically get focus when a page is loaded.
Note: The autofocus attribute works with all <input> types.
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
User name: <input type="text" name="user_name" autofocus="autofocus" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
User name: <input type="text" name="user_name" autofocus="autofocus" />
<input type="submit" />
</form>
</body>
</html>
form Attribute
The form attribute specifies one or more forms the input field belongs to.
Note: The form attribute works with all <input> types.
The form attribute must refer to the id of the form it belongs to:
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
<p>The input field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="lname" form="user_form" />
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
<p>The input field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="lname" form="user_form" />
</body>
</html>
Note: To refer to more than one form, use a space-separated list.
Form Override Attributes
The form override attributes allow you to override some of the attributes set for the form element.
The form override attributes are:
- formaction - Overrides the form action attribute
- formenctype - Overrides the form enctype attribute
- formmethod - Overrides the form method attribute
- formnovalidate - Overrides the form novalidate attribute
- formtarget - Overrides the form target attribute
Note: The form override attributes works with the following <input> types: submit and image.
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br />
<input type="submit" formnovalidate="true" value="Submit without validation" /><br />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br />
<input type="submit" formnovalidate="true" value="Submit without validation" /><br />
</form>
</body>
</html>
Note: These attributes are helpful for creating different submit buttons.
height and width Attributes
The height and width attributes specifies the height and width of the image used for the input type image.
Note: The height and width attributes only works with <input> type: image.
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
User name: <input type="text" name="user_name" /><br />
<input type="image" src="img_submit.gif" width="24" height="24" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
User name: <input type="text" name="user_name" /><br />
<input type="image" src="img_submit.gif" width="24" height="24" />
</form>
</body>
</html>
list Attribute
The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field.
Note: The list attribute works with the following <input> types: text, search, url, telephone, email, date pickers, number, range, and color.
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
</body>
</html>
min, max and step Attributes
The min, max and step attributes are used to specify restrictions for input types containing numbers or dates.
The max attribute specifies the maximum value allowed for the input field.
The min attribute specifies the minimum value allowed for the input field.
The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).
Note: The min, max, and step attributes works with the following <input> types: date pickers, number, and range.
The example below shows a numeric field that accepts values between 0 and 10, with a step of 3 (legal numbers are 0, 3, 6 and 9):
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Points: <input type="number" name="points" min="0" max="10" step="3"/>
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Points: <input type="number" name="points" min="0" max="10" step="3"/>
<input type="submit" />
</form>
</body>
</html>
multiple Attribute
The multiple attribute specifies that multiple values can be selected for an input field.
Note: The multiple attribute works with the following <input> types: email, and file.
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>Try selecting more than one file when browsing for files.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>Try selecting more than one file when browsing for files.</p>
</body>
</html>
novalidate Attribute
The novalidate attribute specifies that the form or input field should not be validated when submitted.
If this attribute is present the form will not validate form input.
Note: The novalidate attribute works with: <form> and the following <input> types: text, search, url, telephone, email, password, date pickers, range, and color.
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
</body>
</html>
pattern Attribute
The pattern attribute specifies a pattern used to validate an input field.
The pattern is a regular expression. You can read about this in our JavaScript tutorial.
Note: The pattern attribute works with the following <input> types: text, search, url, telephone, email, and password
The example below shows a text field that can only contain three letters (no numbers or special characters):
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
</body>
</html>
placeholder Attribute
The placeholder attribute provides a hint that describes the expected value of an input field.
Note: The placeholder attribute works with the following <input> types: text, search, url, telephone, email, and password
The hint is displayed in the input field when it is empty, and disappears when the field gets focus:
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3Schools" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3Schools" />
<input type="submit" />
</form>
</body>
</html>
required Attribute
The required attribute specifies that an input field must be filled out before submitting.
Note: The required attribute works with the following <input> types: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file.
Example
<html>
<body>
<form action="demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
