What new input control types are added in HTML5-Front-end Q&A-php.cn

What new input control types are added in HTML5

青灯夜游

Release： 2022-05-30 15:34:31

Original

6843 people have browsed it

Added 13 new types: 1. color, color picker control; 2. date, date control, including year, month and day, but not including time; 3. tel, phone number control; 4. time, Time control (without time zone); 5. "datetime-local", date and time control; 6. search, search control, etc.

What new input control types are added in HTML5

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The<input> tag specifies an input field in which users can enter data. This element is used in the

element to declare an input control that allows users to enter data.

The type attribute specifies the type of <input> element to be displayed.

New input control type in HTML5 (type attribute value)

Value	Description
color	Define the color picker.
date	Define date control (including year, month, day, excluding time).
datetime	Define date and time controls (including year, month, day, hour, minute, second, fraction of a second, based on UTC time zone).
datetime-local	Define date and time controls (including year, month, day, hour, minute, second, fraction of a second, without time zone) .
email	Defines the fields used for e-mail addresses.
month	Define month and year controls (without time zone).
number	Defines the field for entering numbers.
#range	Defines a control for entering numbers where the exact value is not important (such as a slider control).
search	Define the text field used to enter the search string.
tel	Defines the field for entering a phone number.
time	Defines a control for entering time (without time zone).
url	Defines the field for entering the URL.
week	Define week and year controls (without time zone).

The types are introduced below:

color

What new input control types are added in HTML5 ## A color selector pops up when clicked, and you can choose any color

number

Enter a number within the range. You can manually enter a number out of the range, but you cannot submit it
tel
Enter the phone number, only safari supports
email
It has a built-in detection function. When submitting, it will detect whether it contains the @ symbol and whether there are characters ## before and after the @ symbol.
The entered URL must start with http:// and must be followed by characters. Otherwise it cannot be submitted
Define the text field used to enter the search string

<input>

Copy after login

What new input control types are added in HTML5

<input>
<input>

Copy after login

2-What new input control types are added in HTML5

<input>

Copy after login

<input>

Copy after login

What new input control types are added in HTML5

Week control- week

<input>

Copy after login

What new input control types are added in HTML5

Date time control--datetime

<input>

Copy after login

Description: Date The time control also supports min and max attributes, indicating the minimum and maximum time that can be set

What new input control types are added in HTML5

<input>

Copy after login

Related recommendations: "

html video tutorial What new input control types are added in HTML5 "

The above is the detailed content of What new input control types are added in HTML5. For more information, please follow other related articles on the PHP Chinese website!