Introduction to HTML5 's form properties

New Form Properties for HTML5

This chapter explains the new attributes that involve <form> and <input> elements.

The new form property:

• AutoComplete
• Novalidate

The new input property:

• 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

Input Type	IE	Firefox	Opera	Chrome	Safari
AutoComplete	8.0	3.5	9.5	3.0	4.0
Autofocus	No	No	10.0	3.0	4.0
Form	No	No	9.5	No	No
Form Overrides	No	No	10.5	No	No
Height and width	8.0	3.5	9.5	3.0	4.0
List	No	No	9.5	No	No
MIN, Max and step	No	No	9.5	3.0	No
Multiple	No	3.5	No	3.0	4.0
Novalidate	No	No	No	No	No
Pattern	No	No	9.5	3.0	No
Placeholder	No	No	No	3.0	3.0
Required	No	No	9.5	3.0	No

AutoComplete property

The AutoComplete attribute stipulates that the form or input field should have AutoComplete.

Note: AutoComplete applies to <form> tags, as well as the following types of <input> tags: text, search, URL, telephone, email, password, datepickers, R Ange and color.

When the user starts typing in the Auto completion field, the browser should display the fill options in the field:

Instance

<form action= "demo_form.asp" method= "Get" autocomplete= "on" > "
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>

Note: In some browsers, you may need to enable AutoComplete to make this property effective.

Autofocus Property

The Autofocus property stipulates that the field automatically receives focus when the page is loaded.

Note: The Autofocus property applies to all <input> label types.

Instance

User Name: <input type= "text" name= "user_name"  autofocus= "autofocus"/>

Form Property

The form property requires one or more forms that the input field belongs to.

Note: The form property applies to all <input> label types.

The form property must reference the ID of the owning form:

Instance

<form action= "demo_form.asp" method= "Get" id= "User_form" > "A-
name:<input" type= "text" name= "fname"/ >
<input type= "Submit"/>
</form> last
name: <input type= "text" name= "lname" form= "user _form "/>

Note: If you need to refer to more than one form, use a space-delimited list.

Form Override Properties

The form rewrite property (form override attributes) allows you to override certain property settings for a FORM element.

The form overrides properties are:

• FormAction-Override the form's Action property
• Formenctype-Override Enctype properties for a form
• FormMethod-Override the form's Method property
• Formnovalidate-Override Novalidate properties for a form
• Formtarget-Overrides the target property of the form

Note: The form rewrite properties apply to the following types of <input> tags: submit and image.

Instance

<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>

Note: These properties are useful for creating different submit buttons.

Height and Width properties

The Height and Width properties specify the image height and width of the input label used for the image type.

Note: The height and Width properties apply only to the <input> label of the image type.

Instance

<input type= "image" Src= "Img_submit.gif" width= "" "height=" "/>

List Property

The List property sets the DataList of the input field. DataList is the list of options for the input field.

Note: The List property applies to the following types of <input> tags: text, search, URL, telephone, email, date pickers, number, range, and color.

Instance

Webpage: <input type= "url" list= "url_list" name= "link"/> <datalist id=
"url_list" >
<option Label= "W3Schools" value= "http://www.w3school.com.cn"/> <option label= "Google" value= "http://"
www.google.com "/>
<option label=" Microsoft "value=" http://www.microsoft.com "/>
</datalist >

Min, max, and step properties

The Min, max, and step properties are used to define (constrain) the input type that contains numbers or dates.

The Max property sets the maximum allowable value for the input field.

The min attribute sets the minimum allowable value for the input field.

The Step property prescribes a valid number interval for the input field (if step= "3", the legal number is -3,0,3,6, etc.).

Note: the Min, Max, and step properties apply to the following types of <input> tags: date pickers, number, and range.

The following example shows a number field that accepts a value between 0 and 10 and the step is 3 (that is, the legal values are 0, 3, 6, and 9):

Instance

Points: <input type= "number" name= "Points" min= "0" max= "ten" step= "3"/>

Multiple Property

The Multiple property stipulates that multiple values can be selected in the input field.

Note: The Multiple property applies to the following types of <input> tags: email and file.

Instance

Select images: <input type= "file" Name= "img" multiple= "multiple"/>

Novalidate Property

The Novalidate property stipulates that the form or input field should not be validated when submitting forms.

Note: The Novalidate property applies to <form> and the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, ran GE and color.

Instance

<form action= "demo_form.asp" method= "Get" novalidate= "true" >
e-mail: <input type= "Email" name= "User_" Email "/>
<input type=" Submit "/>
</form>

Pattern Properties

The pattern attribute prescribes the mode (patterns) used to validate the input field.

Pattern is a regular expression. You can learn about regular expressions in our JavaScript tutorials.

Note: The pattern attribute applies to the following types of <input> tags: text, search, URL, telephone, email, and password.

The following example shows a text field that can contain only three letters (excluding numbers and special characters):

Instance

Country code: <input type= "text" name= "Country_code" pattern= "
[a-z]{3}" title= "Three letter Country Code"/>

Placeholder Property

The placeholder property provides a hint (hint) that describes the value expected by the input field.

Note: The placeholder property applies to the following types of <input> tags: text, search, URL, telephone, email, and password.

The hint (hint) appears when the input field is empty, and disappears when the input field receives focus:

Instance

<input type= "Search" name= "User_search"  placeholder= "Search W3school"/>

Required Property

The required property stipulates that the input field (cannot be empty) must be filled in before committing.

Note: The Required property applies to the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, number, checkbox, Rad Io and file.

Instance

Name: <input type= "text" name= "Usr_name" required= "required"/>