What attributes does the input type in HTML5 contain?

The input type in HTML5 includes attributes such as email, url, number, range, search, etc. Each attribute has a different function

Today we will introduce the new input type input in HTML5. These new functions will greatly help us implement more functions and provide a better user experience. Next, we will introduce the usage of the input type in detail in the article.

【Recommended course: HTML5 Tutorial】

##Input type attributes

(1) email attribute: suitable for input fields containing e-mail addresses. When submitting the form, the value of the email field will be automatically verified. .

When we enter an incorrect value, it will automatically prompt us to enter the correct format and tell you what is missing

<form action="#" method="get">
E-mail:<input type="email" name="email">
<input type="submit">
</form>

Rendering

(2) url attribute: Applicable to input fields containing URL addresses. The value of the url field is automatically validated when the form is submitted.

Please enter the URL when an input error occurs

<form action="#" method="get">
URL:<input type="url" name="url">
<input type="submit">
</form>

Rendering

(3) number attribute: suitable for inputs containing numerical values area. You can also set limits on the accepted numbers

max: refers to the maximum allowed number

min: refers to the minimum allowed number

step: refers to Legal digital interval, for example: step=3 means that the digital interval is 3

value: default value

<form action="#" method="get">
		Points: <input type="number" name="points" min="1" max="10" />
		<input type="submit">
	</form>

Rendering

（ 4) Range attribute: Applicable to input fields that contain numeric values ​​within a certain range. It is displayed as a slide bar

max: the maximum value allowed

min: the minimum value allowed

step: Allowed legal number intervals

value: Default value

<form action="#" method="get">
Range: <input type="range" name="points" min="1" max="10" />
<input type="submit">
</form>

(5) search Property: Applies to search domains, such as site search or Google search.

The search field is displayed as a regular text field

<form action="#" method="get">
Search: <input type="search" name="points" min="1" max="10" />
<input type="submit">
</form>

Rendering

Summary: The above is all of this article Content, I hope that this article can give everyone a certain understanding of the input types in HTML5 and can be applied to actual cases.

The above is the detailed content of What attributes does the input type in HTML5 contain?. For more information, please follow other related articles on the PHP Chinese website!