HTML new form attributes

HTML new form attributes

HTML5's <form> and <input> tags add several new attributes.

<form>New attributes:

autocomplete

novalidate

<input>New attribute:

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

<form> / <input> autocomplete attribute

The autocomplete 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 <form> tag, as well as the following types of <input> tags: text, search, url, telephone, email, password, datepickers, range and color.

<form> novalidate attribute

A boolean attribute of the novalidate attribute.

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

<input> autofocus attribute

The autofocus attribute is a boolean attribute.

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

<input> 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.

<input> formaction attribute

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

The formaction The attribute will override the action attribute in the <form> element.

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

<input> formenctype attribute

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

formenctype attribute Override the enctype attribute of the form element.

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

<input> formmethod attribute

The formmethod attribute defines how the form is submitted.

The formmethod attribute overrides the method attribute of the <form> element.

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

<input> formnovalidate attribute

novalidate attribute is a boolean attribute.

novalidate attribute describes<input> ; The element does not need to be validated on form submission.

The formnovalidate attribute will override the novalidate attribute of the <form> element.

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

<input> formtarget attribute

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

The formtarget attribute overrides the target attribute of the <form> element.

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

<input> height and width attributes

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

Note: The height and width attributes are only applicable to <input> 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).

<input> list attribute

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

<input> min and max attributes

The min, max, and step attributes are used to specify limits for input types that contain numbers or dates. (constraint).

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

<input> multiple attribute

The multiple attribute is a boolean attribute.

The multiple attribute stipulates that the <input> element can Select multiple values.

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

<input> pattern attribute

pattern attribute describes a regular expression used to verify<input> ; The value of the element.

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

Tips: It is used to describe the global title attribute Mode.

<input> 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 <input> tags: text, search, url, telephone, email and password.

<input> required attribute

required attribute is a boolean attribute.

required attribute must be specified before submission Fill in the input fields (cannot be empty).

Note: The required attribute applies to the following types of <input> tags: text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file.

<input> step attribute

The step attribute specifies the legal number interval for the input field.

If step="3", the legal numbers are -3,0,3,6, etc.

Tips: The step attribute can be used with the max and min attributes to create a range value.

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

below In the case, we have explained some commonly used attributes. You can directly look at the code and the comments next to the code, and then compare the running results of the browser to understand its meaning

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head>

<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索">
<!--
novalidate:在控件中加入了required、emial、url等验证后，如果想让这些验证失效，可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<br/><br/>
    <!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时，经常会看到在下面显示输入过的内容，
这就是html5的新特性：自动完成，如果不想使用此功能，将其设置为off即可
-->
    <input type="text" name="UserName" value="" required autocomplete="off">
   <br/><br/>
    <!--
multiple:在选择文件时，默认只能单选，加上这个属性后，则可以使用鼠标选中多个文件进行上传
   -->
    选择文件
    <input type="file" name="upload" value="" multiple="multiple">
    <br/><br/>
    <!--
list：这个属性要和datalist元素一起使用，指定此文本框的可选择项，另外其相较于select的优点在于还可以输入
   -->
    区号：
    <input type="text" name="age" value="" list="list1">
    <br/><br/>
    <datalist id="list1">
        <option value="0312">保定</option>
        <option value="0311">石家庄</option>
        <option value="010">北京</option>
        <option value="0313">唐山</option>
    </datalist>
<br/><br/>
    <!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
   -->
    <input type="submit" name="subsave" value="提交"><br/><br/>
    <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>
</html>