What new input control types are added in HTML5

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.

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

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

#range

• 
  

url
• The entered URL must start with http:// and must be followed by characters. Otherwise it cannot be submitted

  
  

search

• Define the text field used to enter the search string

  
  

Date control- date

<input>

Time control- time

<input>
<input>

Datetime Control-datetime-local

<input>

Month control- month

##

<input>

Week control- week

<input>

Date time control--datetime

##

<input>

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

<input>

Related recommendations: "

html video tutorial"

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!