English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Input Type

In HTML5In HTML, multiple new form input types have been added. By using these new elements, better input control and validation can be achieved.

HTML5 New Input Type

HTML5 It has multiple 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 mainstream browsers support the new input types, but you can already use them in all mainstream browsers. Even if they are not supported, they can still be displayed as a conventional text field.

Input Type: color

The color type is used in input fields mainly for selecting colors, as shown below:

Online Example

Select a color from the color picker:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Choose your favorite color: <input type="color" name="favcolor"><br>
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

Input Type: date

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

Online Example

Define a time controller:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Birthday: <input type="date" name="bday">
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

Input Type: datetime

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

Online Example

Define a date and time controller (local time):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Birthday (date and time): <input type="datetime" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

Input Type: datetime-local

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

Online Example

Define a date and time (without timezone):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Birthday (date and time): <input type="datetime-local" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

Input Type: email

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

Online Example

When submitting the form, the value of the email field will be automatically verified to ensure it is valid and legal:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　E-mail: <input type="email" name="usremail">
　　<input type="submit">
</form>
<p><b>Attention:</b> Internet Explorer　9　　and earlier IE versions do not support type="email" .</p>
</body>
</html>
Test and see ‹/›

Hint: The Safari browser in iPhone supports email input type and coordinates with it by changing the touch screen keyboard (adding @ and .com options).

Input Type: month

The month type allows you to select a month.

Online Example

Define month and year (without timezone):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Birthday (month and year): <input type="month" name="bdaymonth">
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

Input Type: number

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

You can also set restrictions on the accepted numbers:

Online Example

Define a numeric input field (restricted):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　quantity (　1　to　5　between): <input type="number" name="quantity" min="1" max="5">
　　<input type="submit">
</form>
<p><b>Attention:</b>Internet Explorer　9　and earlier IE versions do not support type="number" .</p>
</body>
</html>
Test and see ‹/›

Use the following attributes to specify restrictions on numeric types:

attributeDescription
disabledThe input field is disabled
maxSpecify the maximum value allowed
maxlengthSpecify the maximum character length of the input field
minSpecify the minimum value allowed
patternSpecify the pattern used to validate the input field
readonlySpecify that the value of the input field cannot be modified
requiredSpecify that the value of the input field is required
sizeSpecify the number of visible characters in the input field
stepSpecify the valid numeric interval of the input field
valueSpecify the default value of the input field

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.

Online Example

Define a non-precise numeric value that is not very accurate (similar to slider control):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</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>Attention:</b> Internet Explorer　9　Early versions of IE do not support type="range" .</p>
</body>
</html>
Test and see ‹/›

Use the following properties to specify limits for numeric types:

  • max - Specify the maximum value allowed

  • min - Specify the minimum value allowed

  • step - Specify the valid numeric interval

  • value - Specify the default value

Input Type: search

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

Online Example

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

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Search Google: <input type="search" name="googlesearch"><br>
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

Input Type: tel

Online Example

Define input phone number field:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Phone number: <input type="tel" name="usrtel"><br>
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

Input Type: time

The time type allows you to select a time.

Online Example

Define an input time controller (without time zone):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Select time: <input type="time" name="usr_time">
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

Input Type: url

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

The value of the URL domain will be automatically verified when the form is submitted.

Online Example

Define input URL field:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Add your homepage: <input type="url" name="homepage"><br>
　　<input type="submit">
</form>
<p><b>Attention:</b> Internet Explorer　9Early versions of IE do not support type="url" .</p>
</body>
</html>
Test and see ‹/›

Hint: The Safari browser in iPhone supports URL input type and coordinates with it by changing the touch screen keyboard (adding the .com option).

Input Type: week

The week type allows you to select week and year.

Online Example

Define week and year (no timezone):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Select week: <input type="week" name="year_week">
　　<input type="submit">
</form>
</body>
</html>
Test and see ‹/›

HTML5 <input> Tag

LabelDescription
<input>Description of the input field
HTML5 Form ElementsHTML5 Audio (Audio)