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

What are the common and new properties of the form in HTML5? I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

HTML5's new form properties

Several new attributes have been added to the and tags of HTML5.

New attribute:

Autocomplete

Novalidate

New attribute:

Autocomplete

Autofocus

Form

Formaction

Formenctype

Formmethod

Formnovalidate

Formtarget

Height and width

List

Min and max

Multiple

Pattern (regexp)

Placeholder

Required

Step

/ autocomplete attribute

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

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

Tip: the autocomplete attribute may be turned on in the form element and off in the input element.

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

Example

Enable autocomplete in HTML form (disable autocomplete in an input field):

XML/HTML Code copies content to the clipboard

First name:

Last name:

E-mail:

Novalidate attribute

A boolean property of the novalidate property.

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

Example

There is no need to validate submitted form data

XML/HTML Code copies content to the clipboard

E-mail:

Autofocus attribute

The autofocus property is a boolean property.

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

Example

Let the "First name" input input field focus automatically when the page loads:

XML/HTML Code copies content to the clipboard

First name:

Form attribute

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

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

Example

The input field outside the form form references HTML form (the input form is still part of the form form):

Formaction attribute

The The formaction property is used to describe the URL address of the form submission.

The The formaction attribute overrides the action attribute in the element.

Note: the The formaction attribute is used for type= "submit" and type= "image".

Example

The following HTMLform form contains two submit buttons with different addresses:

XML/HTML Code copies content to the clipboard

First name:

Last name:

Formenctype attribute

The formenctype attribute describes the data encoding that the form submits to the server (only for method= "post" forms in form forms)

The formenctype attribute overrides the enctype attribute of the form element.

Primary: this attribute is used with type= "submit" and type= "image".

Example

The first submit button is encoded to send form data by default, and the second submit button sends form data in "multipart/form-data" encoded format:

XML/HTML Code copies content to the clipboard

First name:

Formmethod attribute

The formmethod attribute defines how the form is submitted.

The formmethod attribute overrides the method attribute of the element.

Note: this attribute can be used with type= "submit" and type= "image".

Example

Redefine the form submission method example:

XML/HTML Code copies content to the clipboard

First name:

Last name:

Formnovalidate attribute

The novalidate property is a boolean property.

The novalidate attribute describes that the element does not need to be validated when the form is submitted.

The formnovalidate attribute overrides the element's novalidate attribute.

Note: the formnovalidate attribute is used with type= "submit"

Example

A form with two submit buttons (with and without validation):

XML/HTML Code copies content to the clipboard

E-mail:

Formtarget attribute

The formtarget attribute specifies a name or a keyword to indicate the display after the form submission data is received.

The The formtarget attribute overrides the target attribute of the element.

Note: the formtarget attribute is used with type= "submit" and type= "image".

Example

A form with two submit buttons, displayed in different windows:

XML/HTML Code copies content to the clipboard

First name:

Last name:

Height and width properties

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

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

Tip: images usually specify both height and width attributes. If the image sets the height and width, the space required by the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image and cannot reserve the appropriate space. The picture changes the layout of the page during the loading process (although the picture has been loaded).

Example

An image submit button is defined, using the height and width properties:

XML/HTML Code copies content to the clipboard

List attribute

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

OperaSafariChromeFirefoxInternet Explorer

Example

Predefine values in:

XML/HTML Code copies content to the clipboard

Min and max properties

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

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

Example

XML/HTML Code copies content to the clipboard

The minimum and maximum value settings of the element:

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

Multiple attribute

The multiple property is a boolean property.

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

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

Example

Upload multiple files:

XML/HTML Code copies content to the clipboard

Select images:

Pattern attribute

The pattern attribute describes a regular expression that validates the value of an element.

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

Tip: is used for the global title attribute to describe the pattern.

Example

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

XML/HTML Code copies content to the clipboard

Country code:

Placeholder attribute

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

A short prompt is displayed on the input field before the user enters the value.

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

Example

Input field prompt text t:

XML/HTML Code copies content to the clipboard

Required attribute

The required property is a boolean property.

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

Input field that cannot be empty:

XML/HTML Code copies content to the clipboard

Username:

Step attribute

The step attribute specifies a legal numeric interval for the input field.

If step= "3", then the legal number is-3jing0jue 3jin6 and so on.

Tip: the step property can create a zone value with the max and min properties.

Note: the step attribute is used with the following type types: number, range, date, datetime, datetime-local, month, time and week.

Example

Set the input step step size to 3:

XML/HTML Code copies content to the clipboard

element

HTML5 also introduces a new element to represent different types of output, such as output written by a script.

You can also use the for attribute to specify the relationship between the output element and other elements in the document that affect the calculation (for example, as an input source or parameter). The value of the for attribute is an IDs list of other elements separated by spaces.

Placeholder attribute

HTML5 introduces a new attribute called palceholder. This attribute provides the user with a hint of what can be entered in this field on the and element. Placeholder characters cannot contain carriage returns or newline characters.

Here is the simple syntax for the placeholder property:

XML/HTML Code copies content to the clipboard

This property is only supported by the latest versions of Mozilla,Safari and Chrome browsers.

Required attribute

Now, we don't need to use JavaScript to handle client validations such as empty text boxes that can never be submitted, because HTML5 introduces a new property called required, which can be used as follows, which ensures that the input box has a value:

XML/HTML Code copies content to the clipboard

This property is only supported by the latest versions of Mozilla,Safari and Chrome browsers.

After reading the above, have you mastered the common properties and new properties of the form in HTML5? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.