Home  >  Article  >  Web Front-end  >  What are the new form attributes in html5

What are the new form attributes in html5

青灯夜游
青灯夜游Original
2022-02-25 17:33:115044browse

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

What are the new form attributes in html5

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

HTML5 new form attributes

HTML5's ff9c23ada1bcecdd1a0fb5d5a0f18437 and d5fd7aea971a85678ba271703566ebfd tags have added several new attributes.

80e4a4b497ba87d4db7bd7777678eee0New attributes:

  • autocomplete

  • novalidate

d5fd7aea971a85678ba271703566ebfdNew 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 d5fd7aea971a85678ba271703566ebfd 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 d5fd7aea971a85678ba271703566ebfd 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.

ff9c23ada1bcecdd1a0fb5d5a0f18437 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>

##ff9c23ada1bcecdd1a0fb5d5a0f18437 or d5fd7aea971a85678ba271703566ebfd 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 ff9c23ada1bcecdd1a0fb5d5a0f18437 tag, as well as the following types of d5fd7aea971a85678ba271703566ebfd 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.

ff9c23ada1bcecdd1a0fb5d5a0f18437 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>

##d5fd7aea971a85678ba271703566ebfd formaction attribute

The formaction attribute is used Describes the URL address for form submission.

The formaction attribute will override the action attribute in the ff9c23ada1bcecdd1a0fb5d5a0f18437 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>

d5fd7aea971a85678ba271703566ebfd 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>

d5fd7aea971a85678ba271703566ebfd formmethod 属性

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

formmethod 属性覆盖了 ff9c23ada1bcecdd1a0fb5d5a0f18437 元素的 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>

d5fd7aea971a85678ba271703566ebfd formnovalidate 属性

novalidate 属性是一个 boolean 属性.

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

formnovalidate 属性会覆盖 ff9c23ada1bcecdd1a0fb5d5a0f18437 元素的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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn