HTML 5 Input type

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

This chapter comprehensively introduces 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 used in the input field is mainly used to select the color, as shown below:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Choose the color you like: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

</body>
</html>

Input type: date

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

</body>
</html>

Input type: datetime

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Birthday (date and time): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

Input type: datetime-local

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Birthday (date and time): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

Input type: email

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

<p><b>note:</b> Internet Explorer 9 and earlier versions of IE are not supported type="email" 。</p>

</body>
</html>
Tip: The Safari browser in iPhone supports the email input type and adapts it by changing the touch screen keyboard (add @ and .com options).

Input type: month

The month type allows you to select a month.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Birthday (month and year): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

</body>
</html>

Input type: number

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

You can also set limits on the accepted numbers:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

<p><b>note:</b>Internet Explorer 9 and earlier versions of IE are not supported type="number"。</p>

</body>
</html>

Use the following attributes to specify restrictions on number types:

Attributes description
disabled Specifies that the input field is disabled
max Specifies the maximum allowable
maxlength Specifies the maximum character length of the input field
min Specifies the minimum allowed value
pattern Specifies the mode used to validate the input field
readonly Specifies that the value of the input field cannot be modified
required Specifies that the value of the input field is required
size Specifies the number of visible characters in the input field
step Specifies the legal number interval of the input field
value Specifies the default value of the input field

Try the sample with all the attributes defined try

Input type: range

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

The range type is displayed as a slider.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</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>note:</b> Internet Explorer 9 and earlier versions of IE are not supported type="range"。</p>

</body>
</html>

Please use the following attributes to specify the restriction on the number type:

  • max-specifies the maximum allowable value
  • min-specifies the minimum allowed value
  • step-specify the legal interval of digits
  • value-specifies the default value

Input type: search

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

</body>
</html>

Input type: tel

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Telephone number: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>

</body>
</html>

Input type: time

The time type allows you to select a time.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Selection period: <input type="time" name="usr_time">
  <input type="submit">
</form>

</body>
</html>

Input type: url

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

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Add your homepage: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

<p><b>note:</b> Internet Explorer 9 and earlier versions of IE are not supported type="url"。</p>

</body>
</html>
Tip: The Safari browser in the iPhone supports the url input type, and adapts it by changing the touch screen keyboard (adding the .com option).

Input type: week

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>

<body>

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

</body>
</html>

HTML5 <input> tag

Label Description
<input>

Describe input input device