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:用于在文本框未輸入時(shí)提示作用
autofocus:用于控件自動(dòng)獲取焦點(diǎn)
-->
<input type="search" name="key" value="" results="s" placeholder="君樂(lè)寶" autofocus="true">
<input type="button" name="" value="搜索">
<!--
novalidate:在控件中加入了required、emial、url等驗(yàn)證后，如果想讓這些驗(yàn)證失效，可以在表單中將novalidate設(shè)置為tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<br/><br/>
    <!--
required:必填
autocomplete:在網(wǎng)頁(yè)的文本框中輸入部分內(nèi)容或者雙節(jié)時(shí)，經(jīng)常會(huì)看到在下面顯示輸入過(guò)的內(nèi)容，
這就是html5的新特性：自動(dòng)完成，如果不想使用此功能，將其設(shè)置為off即可
-->
    <input type="text" name="UserName" value="" required autocomplete="off">
   <br/><br/>
    <!--
multiple:在選擇文件時(shí)，默認(rèn)只能單選，加上這個(gè)屬性后，則可以使用鼠標(biāo)選中多個(gè)文件進(jìn)行上傳
   -->
    選擇文件
    <input type="file" name="upload" value="" multiple="multiple">
    <br/><br/>
    <!--
list：這個(gè)屬性要和datalist元素一起使用，指定此文本框的可選擇項(xiàng)，另外其相較于select的優(yōu)點(diǎn)在于還可以輸入
   -->
    區(qū)號(hào)：
    <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:可以更改點(diǎn)擊此按鈕式提交到服務(wù)器的處理程序
formmethod:可以更改向服務(wù)器提交數(shù)據(jù)的方式
   -->
    <input type="submit" name="subsave" value="提交"><br/><br/>
    <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>
</html>