HTML5 new Input type

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

This chapter provides a comprehensive introduction to these new input types:

#color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

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

Input type: color

The color type is used in the input field and is mainly used to select colors, as shown below:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Input type: date## The

#date type allows you to select a date from a date picker.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance

Input type: datetime

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance

Input type: datetime-local

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Input type: email

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

<p><b>注意:</b> Internet Explorer 9  及更早IE版本不支持type="email" 。</p>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance

Tip: Safari on iPhone supports the email input type and changes the touch screen keyboard to accommodate it (adding @ and .com options).

Input Type: month

The month type allows you to select a month.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

</body>
</html>

Run instance »Click the "Run instance" button to view the online instance

Input type: number

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

You can also set limits on the numbers accepted:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

<p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Use the following attributes to specify restrictions on numeric types:

max- specifies allowed The maximum value
min - specifies the minimum allowed value
#step - specifies the legal number interval (if step="3", then Legal numbers are -3, 0, 3, 6, etc.)
value - Specifies the default value

Try it with all qualified attributes Try the example

Input type: range

range type is used for input fields that should contain numeric values within a certain range.

Range types are displayed as sliders.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

<p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Please use the following attributes to specify limits on numeric types:

max - specifies the maximum allowed value
min - specifies Minimum allowed value
step - specifies the legal number interval
value - specifies the default value

Input type: search

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

<p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Input Type: tel

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>

</body>
</html>

Run Instance»

Click" Run Instance" button to view the online instance

Input Type: time

The time type allows you to select a time.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  选择时间: <input type="time" name="usr_time">
  <input type="submit">
</form>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Input type: url

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

When submitting the form, the value of the url field will be automatically verified.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

<p><b>注意:</b> Internet Explorer 9及更早IE版本不支持 type="url" 。</p>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

Tip: Safari on iPhone supports the url input type and changes the touchscreen keyboard to accommodate it (adding the .com option).

Input Type: week

The week type allows you to select the week and year.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>

<body>

<form action="demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

HTML5 <input> Tags

##TagDescription <input>Description input inputter

← HTML5 Audio

HTML5 form elements →