Shulou(Shulou.com)06/01 Report--

This article focuses on "what are the new form properties of HTML5 and how to use them?" friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what the new HTML5 form properties are and how to use them.

New form property:

Autocomplete

Novalidate

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 attribute

The autocomplete attribute states that the form or input domain should have autocomplete capabilities.

Note: autocomplete applies to tags, as well as the following types of tags: text, search, url, telephone, email, password, datepickers, range and color.

When the user starts typing in the autocomplete field, the browser should display the filled-in options in that field:

Example

First name:

Last name:

E-mail:

Note: in some browsers, you may need to enable autocomplete for this property to take effect.

Autofocus attribute

The autofocus attribute specifies that the domain automatically gets focus when the page is loaded.

Note: the autofocus attribute applies to all types of tags.

Example

User name:

Form attribute

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

Note: the form attribute applies to all types of tags.

The form property must refer to the id of the form to which it belongs:

Example

First name:

Last name:

Note: if you need to reference more than one form, use a space-separated list.

Form rewrite properties

The form rewrite attribute (form override attributes) allows you to override some property settings of the form element.

The form rewrite properties are:

Formaction-overrides the action property of the form

Formenctype-overrides the enctype property of the form

Formmethod-overrides the method property of the form

Formnovalidate-overrides the novalidate property of the form

Formtarget-overrides the target property of the form

Note: the form rewrite attribute applies to the following types of tags: submit and image.

Example

E-mail:

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

Height and width properties

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

Note: the height and width attributes apply only to tags of type image.

Example

List attribute

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

Note: the list attribute applies to the following types of tags: text, search, url, telephone, email, date pickers, number, range and color.

Example

Webpage:

Min, max, and step properties

The min, max, and step attributes are used to qualify (constrain) input types that contain numbers or dates.

The max attribute specifies the maximum value allowed for the input field.

The min attribute specifies the minimum allowed for the input field.

The step attribute specifies a legal numeric interval for the input field (if step= "3", the legal number is-3memo 0rem 3je 6, etc.).

Note: the min, max, and step attributes apply to the following types of tags: date pickers, number, and range.

The following example shows a numeric field that accepts values between 0 and 10 with a step of 3 (that is, legal values of 0, 3, 6, and 9):

Example

Points:

Multiple attribute

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

Note: the multiple attribute applies to the following types of tags: email and file.

Example

Select images:

Novalidate attribute

The novalidate attribute states that form or input fields should not be validated when the form is submitted.

Note: the novalidate attribute applies to the following types of tags: text, search, url, telephone, email, password, date pickers, range and color.

Example

E-mail:

Pattern attribute

The pattern attribute specifies the schema (pattern) used to validate the input domain.

Patterns (pattern) are regular expressions.

Note: the pattern attribute applies to the following types of tags: text, search, url, telephone, email and password.

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

Example

Country code:

Placeholder attribute

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

Note: the placeholder attribute applies to the following types of tags: text, search, url, telephone, email and password.

The hint appears when the input field is empty and disappears when the input field gets focus:

Example

Required attribute

The required attribute states that the input field must be filled in before submission (cannot be empty).

Note: the required attribute applies to the following types of tags: text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file.

Example

Name:

At this point, I believe you have a deeper understanding of "what are the new form properties of HTML5 and how to use them?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.