HTML5 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:

<!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

## <input>
## Tag Description
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.


Continuing Learning
||
<!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>
submitReset Code