Posts in current category

HTML5 Input type


May 03, 2021 13:05 HTML5


Table of contents


HTML5's new Input type

You should have understood the HTML form input types in this web site's HTML tutorial, and in this section, we'll cover some of the new form types in HTML5!

HTML5 has several new form input types. These new features provide better input control and validation.

This chapter provides a comprehensive overview of these new input types:

  • color
  • date
  • Datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • Url
  • week

Note: Not all major browsers support new input types, but you can already use them in all major browsers. Even if not supported, it can still appear as a regular text field.


Input type: color

The color type used in the input field is primarily used to select colors, as follows:

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Select a color from the color picker:

选择你喜欢的颜色: <input type="color" name="favcolor">

Try it out . . .


Input type: date

The date type allows you to select a date from a date selector.

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define a time controller:

生日: <input type="date" name="bday">

Try it out . . .


Input type: datetime

The datetime type allows you to select a date (UTC time).

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define a date and time controller (local time):

生日 (日期和时间): <input type="datetime" name="bdaytime">

Try it out . . .


Input type: datetime-local

The datetime-local type allows you to select a date and time (no time zone).

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define a date and time (no time zone):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

Try it out . . .


Input type: email

The e-mail type is used for input fields that should contain e-mail addresses.

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

When you submit a form, the value of the email field is automatically verified to be valid:

E-mail: <input type="email" name="email">

Try it out . . .

Tip: Safari in your iPhone supports email input types and works with it by changing the touch-screen keyboard (add the options for .com and you).


Input type: month

The month type allows you to select a month.

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define month and year (no time zone):

生日 (月和年): <input type="month" name="bdaymonth">

Try it out . . .


Input type: number

The number type is used for input fields that should contain values.

You can also set a limit on the numbers you accept:

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define a numeric input field (qualified):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

Try it out . . .

Use the following properties to define the limit for the type of number:

  • max - specifies the maximum allowed
  • min - specifies the minimum allowed
  • step - specifies a legal numeric interval (the legal number is -3,0,3,6, etc.) if step is "3")
  • value - specifies the default value

Try an example with all the qualified properties Try


Input type: range

The range type is used for input fields that should contain a range of numeric values.

The range type appears as a slider.

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define a value that does not require very precision (similar to slider control):

<input type="range" name="points" min="1" max="10">

Try it out . . .

Use the following properties to define the limit for the type of number:

  • max - specifies the maximum allowed
  • min - specifies the minimum allowed
  • step - specifies a legal digital interval
  • value - specifies the default value

Input type: search

The search type is used for search domains, such as site search or Google search.

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define a search field (similar to site search or Google search):

Search Google: <input type="search" name="googlesearch">

Try it out . . .


Input type: tel

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define the input phone number field:

电话号码: <input type="tel" name="usrtel">

Try it out . . .


Input type: time

The time type allows you to select a time.

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define an inputable time controller (no time zone):

选择时间: <input type="time" name="usr_time">

Try it out . . .


Input type: url

The url type is used for input fields that should contain URL addresses.

When you submit a form, the value of the url field is automatically verified.

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define the input URL field:

添加您的主页: <input type="url" name="homepage">

Try it out . . .

Tip: Safari in your iPhone supports url input types and works with it by changing the touchscreen keyboard (add .com options).


Input type: Week

The week type allows you to select weeks and years.

HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type HTML5 Input type

Define weeks and years (no time zone):

选择周: <input type="week" name="week_year">

Try it out . . .


HTML5 . . .

标签 描述
<input> 描述input输入器

Extended reading

Input talk: HTML5's Input type