What are the attributes of HTML5 forms?

If you want to see a detailed explanation of the elements of the form, please see the detailed explanation of the HTML5 form elements here

The above mentioned elements of the form, now let us take a look at some new attributes

Click the link you haven’t seen yet: Detailed explanation of HTML5 form elements

The new form attributes of HTML5 are mainly in two aspects: the new attributes of the

element.

HTML5 form attributes

New form attributes:

• autocomplete

• novalidate

New input attribute:

• autocomplete

• autofocus

• ##form

• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

• height and width

• list

• min,max and step

• multiple

• pattern(regexp)

• placeholder

• required

autocomplete attribute

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

Note: autocomplete applies to tags, and the following types of tags: text, search, url, telephone, email, password, datepickers, range and color.

When the user starts typing in the autocomplete field, the browser should display the options to complete in that field:

<form action="demo_form.asp" method="get" 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>

Note: In some browsers, you may need to enable autocomplete Complete the function to enable this property.

autofocus attribute

The autofocus attribute specifies that the field automatically gains focus when the page loads.

Note: The autofocus attribute applies to all tag types.

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form attribute

The form attribute specifies one or more forms to which the input field belongs.

Note: The form attribute applies to all tag types.

The form attribute must reference the id of the form it belongs to:

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

Note: If you need to reference more than one form, please use a space-separated list.

Form override attributes

Form override attributes allow you to override certain attribute settings of the form element.

The form rewrite attributes are:

formaction - rewrite the action attribute of the form

formenctype - rewrite the enctype attribute of the form

formmethod - rewrite The method attribute of the form

formnovalidate - Rewrite the novalidate attribute of the form

formtarget -Rewrite the target attribute of the form

Note: The form rewrite attribute is applicable to the following types of< ;input> Tags: submit and image.

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

Note: These properties are helpful for creating different submit buttons.

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 tags of image type.

<input type="image" src="img_submit.gif" width="99" height="99" />

list attribute

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

Note: The list attribute is applicable to the following types of tags: text, search, url, telephone, email, date pickers, number, range and color.

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min, max, and step attributes

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

The max attribute specifies the maximum value allowed for the input field.

The min attribute specifies the minimum value allowed for the input field.

The step attribute specifies the legal number intervals for the input field (if step="3", the legal numbers are -3,0,3,6, etc.).

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

The following example shows a numeric field that accepts values ​​between 0 and 10 in steps of 3 (that is, legal values ​​are 0, 3, 6, and 9):

Points: <input type="number" name="points" min="0" max="10" step="3" />

multiple attribute

The multiple attribute specifies that multiple values ​​can be selected in the input field.

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

Select images: <input type="file" name="img" multiple="multiple" />

novalidate attribute

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

Note: The novalidate attribute is applicable to and the following types of tags: text, search, url, telephone, email, password, date pickers, range and color.

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

pattern attribute

The pattern attribute specifies the pattern (pattern) used to verify the input field.

Pattern is a regular expression. You can learn about regular expressions in our JavaScript tutorial.

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

The following example shows a text field that can only contain three letters (excluding numbers and special characters):

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

placeholder attribute

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注：placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search php" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注：required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />

【相关推荐】

html的基础元素，让你零基础学习HTML

HTML和HTML5的发展历史

The above is the detailed content of What are the attributes of HTML5 forms?. For more information, please follow other related articles on the PHP Chinese website!