HTML5 new form attributes

HTML5 new form attributes

HTML5's

and < Several new attributes have been added to the input> tag.

## New attributes:

autocomplete
novalidate

##New attribute:

autocomplete

#< ;form> / autocomplete attribute

autocomplete

The attribute specifies that the form or input field should have the autocomplete function.

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

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

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

##Example

Open in HTML form autocomplete (an input field turns off autocomplete):

php中文网(php.cn)

姓名:
留言
E-mail:

填写并提交表单，然后重新刷新页面查看如何自动填充内容。

注意 form的 autocomplete属性为 "on"（开），但是e-mail自动为“off”（关）。

Run the program and try it

##Tips

: In some browsers, you may need to enable autocomplete for this attribute to take effect.

novalidate attributeA boolean attribute of the novalidate attribute.

novalidate Property specifies that form or input fields should not be validated when submitting the form.

ExampleNo need to verify the submitted form data

php中文网(php.cn)

E-mail:

注意在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。

Run the program to try it

autofocus attributeThe autofocus attribute is a boolean attribute.

The autofocus attribute specifies that the field is automatically obtained when the page is loaded. focus.

ExampleLet the "Message" input field be automatically focused when the page loads:

php中文网(php.cn)

注意： Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。

Run the program to try For a moment

You can change autofocus to the name input field and compare the results of the two runs to see if there are any differences

## ; form attribute

#The form attribute specifies one or more 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 located outside the form refers to the HTML form (the input form is still part of the form):

php中文网(php.cn)

"留言" 字段没有在form表单之内，但它也是form表单的一部分。

留言:

Run the program and try it

Note: IE does not support the form attribute

## formaction attribute

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

The formaction attribute will override the action attribute in the

element.

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

Example

The following HTML form contains Submit buttons with two different addresses:

    php中文网(php.cn) 
   姓名: 
 密码:

One of the above programs will be submitted to the demo.php page, and the other will be submitted to the admin.php page

##< ;input> formenctype attribute

formenctype

The attribute describes the data encoding of the form submitted to the server (only for the method="post" form in the form form)

formenctype

The attribute overrides the enctype attribute of the form element.

Main

: This attribute is used in conjunction with type="submit" and type="image".

ExampleThe first submit button has default encoding to send form data, and the second submit button sends form data in "multipart/form-data" Send form data in encoding format:

    php中文网(php.cn) 
   name:

Run the program and try it

formmethod attribute

formmethodThe attribute defines how the form is submitted.

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

    php中文网(php.cn) 
   姓名: 
 密码:

The above code is passed into a page in get mode. One is to reuse the formmethod method to redefine the submission method and submit it to the emo-post.php page in post method

formnovalidate attribute

The novalidate attribute is a boolean attribute.

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

The formnovalidate attribute will override the novalidate attribute of the

element.

Note: The formnovalidate attribute is used together with type="submit

Example

Form with two submit buttons (using and not applicable validation):

    php中文网(php.cn) 
   E-mail:

Run the program to try Look

formtarget attribute

The formtarget attribute specifies a name or a keyword to indicate that the form is submitted after the data is received

The formtarget attribute overrides the target attribute of the

element.

Note: The formtarget attribute cooperates with type="submit" and type="image" use.

Example

Form with two submit buttons, displayed in different windows:

    php中文网(php.cn) 
   作者姓名: 
 书本名:

Run the program and try it

height and width attributes

height and width attributes are specified for image type The image height and width of the label.

Note: The height and width attributes are only applicable to tags of image type.

Tip: Images usually specify both height and width attributes. If an image has a height and width set, the space required by the image will be preserved when the page loads. Without these attributes, the browser does not know the size of the image and cannot reserve appropriate space. The image will cause the page layout effect to change during the loading process (even though the image has been loaded).

Example

Defines an image submit button, using the height and width attributes:

    php中文网(php.cn) 
   First name: 
 Last name:

Run the program and try it out

list attribute

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

Example

Predefine the value in :

    php中文网(php.cn)

Run the program and try it

## min and max attributes

The min, max and step attributes are used for inputs containing numbers or dates. Types specify limits (constraints).

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

Example

## Element minimum and maximum value settings:

    php中文网(php.cn) 
   输入 1980-01-01 之前的日期: 
 输入 2000-01-01 之后的日期: 
 数量 (在1和5之间):

Run the program and try it

Note: Internet Explorer 9 and earlier IE versions and Firefox do not support the max and min attributes of the input tag.

Note: The max and min attributes do not support date and time input in Internet Explorer 10. IE 10 does not support these input types.

## multiple attributeThe multiple attribute is a boolean attribute.

multiple attribute specification< Multiple values can be selected within the ;input> element.

Note

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

ExampleUpload multiple files:

php中文网(php.cn)

尝试选取一张或者多种图片。

Run the program and try it

pattern attributeThe pattern attribute describes a regular expression used to validate the value of an element.

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

Tips: is used for global title The attribute describes the pattern.

Tip: You can learn about regular expressions in our JavaScript tutorial

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

    php中文网(php.cn) 
   请输入3位字母:

Run the program to try it

placeholder attribute

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

A brief prompt will be displayed on the input field before the user enters a value.

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

Example

Input field prompt text:

    php中文网(php.cn) 
   姓名：
 密码：

Run the program and try it

required attribute

The required attribute is a boolean attribute.

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

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: