HTML5 Study Notes (2)

HTML5New Form attribute 

New Form attributes:

L AutoComplete

L novalidate

 

New input attributes:

L AutoComplete

L Autofocus

L form

L form overrides (formaction, formenctype,
Formmethod, formnovalidate, formtarget)

L height and width

L list

L min, Max, and step

L multiple

L pattern (Regexp)

L placeholder

L required

 

AutoCompleteAttribute 

The AutoComplete attribute specifies that the form or input field should have the automatic completion function.

AutoComplete applies to <form> labels and <input> labels of the following types: Text, search, URL, telephone, email, password, datepickers, range, and color. When the user starts entering the domain automatically, the browser should display the entered options in the domain:

Example:

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

AutofocusAttribute

The autofocus attribute specifies that when a page is loaded, the domain automatically obtains the focus.

The autofocus attribute applies to all <input> tag types.

Example:

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

 

FormAttribute 

The form attribute specifies one or more forms to which the input field belongs.

The form attribute applies to all <input> label types and must reference the Form ID:

Example:

<Form action = "demo_form.asp" method = "get" id = "user_form">

First name: <input type = "text" name = "fname"
/>

<Input type = "submit"/>

</Form>

Last name: <input type = "text" name = "lname" form = "user_form"/>

PS: to reference more than one form, use spaces to separate the list.

 

Form overridesAttribute 

The form overrides attribute allows you to override certain attribute settings of the form element, including:

L formaction-override the action attribute of the form

L formenctype-rewrite the form's enctype attribute

L forpolichod-override the method attribute of the form

L formnovalidate-override the novalidate attribute of the form

L formtarget-rewrite the target attribute of the form

The form overrides attribute applies to the <input> label of the submit and image types. These attributes are helpful for creating different submit buttons.

Example:

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

 

HeightAndWidthAttribute 

The height and width attributes specify the image height and width used for the input label of the image type.

Example:

<Input type = "image" src1_1_img_submit.gif "width =" 99 "Height =" 99 ″
/>

 

ListAttribute 

The list attribute specifies the datalist of the input field. Datalist is a list of input fields.

The list attribute applies to the following types of <input> labels: Text, search, URL, telephone, email, date pickers, number, range, and color.

Example:

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

The min, Max, and step attributes are used to specify limits (constraints) for input types that contain numbers or dates ).

Attribute	Description
Max	Specifies the maximum value allowed by the input field
Min	Specifies the minimum value allowed by the input field
Step	Specifies a valid number interval for the input field (if step = "3", the valid number is-3, 0, 3, 6, etc)

The min, Max, and step attributes apply to <input> labels of the following types: Date pickers, number, and range.

The following example shows a digital field that accepts a value ranging from 0 to 10 and Step 3 (that is, valid values are 0, 3, 6, and 9 ):

Points: <input type = "Number" name = "points" min = "0" max = "10 ″
Step = "3"/>

 

MultipleAttribute

The Multiple Attribute specifies that multiple values can be selected in the input field.

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

Example:

Select images: <input type = "file" name = "IMG" multiple = "multiple"
/>

 

NovalidateAttribute

The novalidate attribute specifies that form or input fields should not be verified when a form is submitted.

The novalidate attribute applies to <form> and <input> labels of the following types: Text, search, URL, telephone, email, password, date pickers, range, and color.

Example:

<Form action = "demo_form.asp" method = "get" novalidate = "true">

E-mail: <input type = "email" name = "user_email"
/>

<Input type = "submit"/>

</Form>

 

PatternAttribute 

The pattern attribute specifies the pattern used to verify the input field ).

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

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

Country code:

<Input type = "text" name = "country_code" pattern = "[A-Z] {3 }"
Title = "three letter country code"/>

 

PlaceholderAttribute 

The placeholder attribute provides a hint that describes the expected value of the input field.

The placeholder attribute applies to the following <input> labels: Text, search, URL, telephone, email, and password. The prompt (hint) is displayed when the input field is empty and disappears when the input field gets the focus:

Example:

<Input type = "Search" name = "user_search" Placeholder = "Search
W3school "/>

 

RequiredAttribute 

The required attribute specifies that the input field must be entered before submission (cannot be blank ).

The required attribute applies to the following <input> labels: Text, search, URL, telephone, email, password,
Date pickers, number, checkbox, radio, and file.

Example:

Name: <input type = "text"
Name = "usr_name" required = "required"/>