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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action=" " method="post">
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
<?php
echo $_POST['favcolor'];
?>
</body>
</html>
Run the program to try it
Input type: date
#date type allows you to select a date from a date picker date.
<!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 the program to try it
Input type: datetime
The datetime type allows you to select a date ( UTC time).
Example
Define a date and time controller (local time):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
生日 (日期和时间): <input type="datetime" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
Run the program to try it
Input type: datetime-local
The datetime-local type allows you to select a date and time (without time zone).
Example
Define a date and time (without time zone):
<!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 the program and try it
Input type: email
The email type is used for input fields that should contain e-mail addresses.
Example
When submitting the form, it will automatically verify whether the value of the email field is legal and valid:
<!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>
</body>
</html>
Run the program and enter a legal value Try it with an illegal email
Note: Internet Explorer 9 and earlier IE versions do not support type="email"
Input type: month
# The month type allows you to select a month.
Example
Define month and year (no time zone):
<!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 the program and try it
Input type: number
#number type is used for input fields that should contain numerical values.
You can also set limits on the numbers accepted:
Example
Define a numeric input field (limitation):
<!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>
</body>
</html>
Run the program and try it
Use the following attributes to specify the limit on the numeric type:
max- Requirement Maximum allowed value
min - specifies the minimum value allowed
step - specifies the legal number interval (if step="3", The legal numbers are -3, 0, 3, 6, etc.)
value - Specifies the default value
Example
Example with all qualified attributes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo_form.php" method="get">
<input type="number" name="points" min="0" max="10" step="3" value="6">
<input type="submit">
</form>
</body>
</html>
Run the program to try it
Input type: range
The range type is used for input fields that should contain numeric values within a certain range.
Range types are displayed as sliders.
Example
Define a value that does not need to be very precise (similar to slider control):
<!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>
</body>
</html>
Run the program and try it
Please use the following attributes to specify limits on numeric types:
max - specifies the maximum value allowed
min - specifies the minimum value allowed
step - specifies the legal number interval
value - specifies the default value
Input type: search
search type is used for search fields, such as site search Or Google search.
Example
Define a search field (similar to site search or Google search):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
</body>
</html>
Run the program and try it
Input type: tel
##Example
Definition input phone Number field:
<!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 the program to try it
Input type: time
The time type allows you to select a time.
Example
Define an input time controller (without time zone):
<!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 the program and try it
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.
Example
Define the input URL field:
<!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>
</body>
</html>
Run the program to try it
Input type: week
# The week type allows you to select the week and year.
Example
Define week and year (no time zone):
<form action="demo-form.php">
选择周: <input type="week" name="year_week">
<input type="submit">
</form>
Run the program and try it
HTML5 <input> Tag
| ## Tag | Description |
## <input>| Description input inputter | |
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.
Next Section
