What are the new form attributes in html5

html5 new form attributes include: autocomplete, novalidate, autofocus, form, formaction, formmethod, formnovalidate, formtarget, list, min, max, step, etc.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 new form attributes

HTML5's

and tags have added several new attributes.

< form>New attributes:

• autocomplete

• novalidate

New attributes:

• autocomplete: Autocomplete, whether to automatically record previously submitted data for the next input suggestion.

• autofocus: Automatically obtain input focus.

• form: The value is the id of a form. If set, the input field can be placed outside the form.

• formaction: the URL address used to describe the form submission

• formenctype: describes the data encoding of the form submitted to the server (only for form forms In method="post" form)

• formmethod: Defines the method of form submission.

• formnovalidate: Describes that the element does not need to be validated when the form is submitted.

• formtarget: Specify a name or a keyword to indicate the display after the form submission data is received.

• height and width: Specify the image height and width used for tags of type image.

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

• min and max: limit the minimum or maximum value of the input number

• multiple: whether to allow multiple input values, if this attribute is declared , then multiple comma-separated values ​​are allowed in the input box.

• pattern (regexp): Specify a regular expression to verify the input. (Regular defaults to adding ^$ at the beginning and end)

• placeholder: Placeholder, used to display prompt text in the input box. Unlike value, it cannot be submitted.

• required: When the form is submitted, it will be verified whether there is input. If not, a prompt message will pop up.

• step: Limit the step size of the input number, used in conjunction with min.

• maxlength: Limit the maximum length. It is only useful when there is input. It does not distinguish between Chinese and English.

• minlength: limits the minimum length, but it is not an H5 standard attribute and is only supported by some browsers.

novalidate attribute

The novalidate attribute is a boolean attribute.

# The ##novalidate attribute specifies that form or input fields should not be validated when submitting the form.

Example: No need to validate submitted form data

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit"></form>

## or autocomplete attribute The autocomplete attribute specifies that the form or input field should have auto-complete functionality.

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:

Turn on autocomplete in a form (turn off autocomplete for an input field):

<form action="demo-form.php" 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>

Tip: In some browsers, you may need to enable the autocomplete function to Make this property effective.

novalidate attributeThe novalidate attribute is a boolean (Boolean) attribute.

The novalidate attribute is specified in Form or input fields should not be validated when submitting a form.

Example: No validation of submitted form data

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

## formaction attribute

The formaction attribute is used Describes the URL address for 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 HTMLform form contains two submit buttons with different addresses:

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

formenctype attribute

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

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

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

Example:

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

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 元素的 method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

示例：重新定义表单提交方式实例:

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

示例：

两个提交按钮的表单(使用与不适用验证 ):

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="不验证提交">
</form>

【推荐课程：HTML5视频教程、web前端入门教程】

The above is the detailed content of What are the new form attributes in html5. For more information, please follow other related articles on the PHP Chinese website!