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

This article mainly shows you the "HTML5 new Form form elements and attributes are", the content is easy to understand, clear, hope to help you solve doubts, the following let Xiaobian lead you to study and learn "HTML5 new Form form elements and attributes what are" this article.

HTML5 New form element

HTML 5 has several elements and attributes that involve forms.

The datalist element datalist element specifies the list of options for the input field. The list is created through the option element within the datalist. To bind the datalist to the input field, use the list attribute of the input field to reference the id of the datalist.

Example:

Webpage:

Copy the code

Tip: the value attribute must be set for the option element.

Keygen element

The purpose of the keygen element is to provide a reliable way to authenticate users. Keygen element is the key pair generator (key-pair generator). When the form is submitted, two keys are generated, one is the private key and the other is the public key. The private key (private key) is stored on the client, and the public key (public key) is sent to the server. The public key can be used to validate the user's client certificate (client certificate) later. Currently, browsers' poor support for this element does not make it a useful security standard.

Example:

Username:

Encryption:

Copy the code

Output element

The output element is used for different types of output, such as calculation or script output.

Example:

Copy the code

HTML5 New form Properties

I'd like to introduce you to the new properties of and elements.

New form attributes: autocomplete, novalidate

New input properties: autocomplete, autofocus, form, form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget), height and width, list min, max, step, multiple, pattern (regexp), placeholder, required

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 options in that field.

Example:

First name:

Last name:

E-mail:

Copy the code

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

The autofocus property autofocus property 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:

Copy the code

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:

Copy the code

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:

Copy the code

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:

Copy the code

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:

Copy the code

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:

Copy the code

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:

Copy the code

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:

Copy the code

Pattern attribute

The pattern attribute specifies the schema (pattern) used to validate the input domain. Patterns (pattern) are regular expressions. You can learn about regular expressions in our JavaScript tutorial. 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:

Copy the 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:

Copy the code

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:

The above is all the content of the article "what are the elements and attributes of HTML5's new Form form?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.