Home >Web Front-end >Front-end Q&A >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'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>
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!