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 property specifies that the form or input field should have auto-complete functionality.

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 AutoComplete field, the browser should display the fill-in options in that field:

Instance

autocomplete="on"autocomplete="off"/><br/><input type= "Submit"/></form>

Try it yourself.

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

Autofocus Property

The Autofocus property specifies that the domain automatically receives focus when the page loads.

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

Instance

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

Try it yourself.

Form Property

The form property specifies one or more forms to which the input domain belongs.

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

The Form property must refer to the ID of the owning form:

Instance

form="user_form"/>

Try it yourself.

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

Form Override Properties

The form Override property (form override attributes) allows you to override some of the property settings of a FORM element.

Form Override properties are:

• FormAction-Override the form's Action property
• Formenctype-Rewrite the Enctype property of the form
• FormMethod-Override the form's Method property
• Formnovalidate-Rewrite the Novalidate property of the form
• Formtarget-Override the target property of the form

Note: Form override properties apply to the following types of <input> tags: submit and image.

Instance

formaction="demo_admin.asp"formnovalidate="true"Value= "Submit without validation"/><br/></form>

Try it yourself.

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

Height and Width properties

The Height and Width properties specify the image heights and widths for the input label of the image type.

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

Instance

width="99"height="99"/>

Try it yourself.

List Property

The List property specifies the DataList of the input domain. DataList is a list of options for the input domain.

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

Instance

list="url_list"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>

Try it yourself.

Min, max, and step properties

The Min, max, and step properties are used to specify a qualification (constraint) for input types that contain numbers or dates.

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

The Min property specifies the minimum allowable value for the input field.

The Step property specifies 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 numeric field that accepts a value between 0 and 10 with a stepping of 3 (that is, a valid value of 0, 3, 6, and 9):

Instance

min="0"max="10"step="3"/>

Try it yourself.

Multiple Property

The Multiple property specifies 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

multiple="multiple"/>

Try it yourself.

Novalidate Property

The Novalidate property specifies that the form or input field should not be validated when the forms are submitted.

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

novalidate="true">e-mail: <input type= "Email" name= "user_email"/><input type= "Submit"/></form>

Try it yourself.

Pattern Property

The Pattern property specifies the mode (pattern) used to validate the input field.

Pattern is a regular expression. You can learn something 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 (with no numbers and special characters) that can contain only three letters:

Instance

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

Try it yourself.

Placeholder Property

The placeholder property provides a hint (hint) describing the value that the input field expects.

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 gets focus:

Instance

<input type= "Search" name= "user_search"  placeholder="Search W3School" />

Try it yourself.

Required Property

The Required property specifies that the input field must be filled in before submission (cannot be empty).

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

required="required"/>

New Form Properties for HTML5