Html5 Form Attributes

HTML5 Form Attributes
« Previous[->0]|Next Chapter »[->1]|
HTML5 New Form Attributes
This chapter covers some of the new attributes for and .
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 andstep|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 , and the following types: text, search, url, telephone, email, password, datepickers, range, and color.
When the user starts to typein an autocomplete field, the browser should display options to fill in the field:
Example

First name:
Last name:
E-mail:

|
Try it yourself »[->2]|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 autofocusattribute works with all types.
Example
User name: |
Try it yourself »[->3]|

form Attribute
The form attribute specifies one or more forms the input field belongs to.
Note: The form attribute works with all types.
The form attribute must refer to the id of the form it belongs to:
Example

First name:

Last name: |
Try it yourself »[->4]|Note: To refer to more than one form, use aspace-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 novalidateattribute
• formtarget - Overrides the form target attribute
Note: The form override attributes works with the following types: submit and image.
Example

E-mail:

|
Try it yourself »[->5]|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 inputtype image.
Note: The height and width attributes only works with type: image.
Example
|
Try it yourself »[->6]|

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 types: text, search, url, telephone, email, date pickers, number, range, and color.
ExampleWebpage:

|
Try it yourself »[->7]|

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 theinput field (if step="3", legal numbers could be -3,0,3,6, etc).
Note: The min, max, and step attributes works with the following 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
Points: |
Try it yourself »[->8]|

multiple Attribute
The multiple attribute...