HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow better input control and validation.
This chapter covers the new input types:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Note: Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.
Input Type: color
The color type is used for input fields that should contain a color.
Example
Select a color from a color picker:
<html>
<body>
<form action="demo_form.asp">
Select your favorite color: <input type="color" name="favcolor" /><br />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Input Type: date
The date type allows the user to select a date.
Example
Define a date control:
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date" name="bday" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Input Type: datetime
The datetime type allows the user to select a date and time (with time zone).
Example
Define a date and time control (with time zone):
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date" name="bday" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Input Type: datetime-local
The datetime-local type allows the user to select a date and time (no time zone).
Example
Define a date and time control (no time zone):
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday (date and time): <input type="datetime" name="bdaytime" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Input Type: email
The email type is used for input fields that should contain an e-mail address.
Example
Define a field for an e-mail address (will be automatically validated when submitted):
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
E-mail: <input type="email" name="usremail" /><br />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).
Input Type: month
The month type allows the user to select a month and year.
Example
Define a month and year control (no time zone):
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday (month and year): <input type="month" name="bdaymonth" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Input Type: number
The number type is used for input fields that should contain a numeric value.
You can also set restrictions on what numbers are accepted:
Example
Define a numeric field (with restrictions):
<html>
<body>
<form action="demo_form.asp">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Use the following attributes to specify restrictions:
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value
Try an example with all the restriction attributes: Try it yourself
Input Type: range
The range type is used for input fields that should contain a value from a range of numbers.
You can also set restrictions on what numbers are accepted.
Example
Define a control for entering a number whose exact value is not important (like a slider control):
<html>
<body>
<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Use the following attributes to specify restrictions:
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value
Input Type: search
The search type is used for search fields (a search field behaves like a regular text field).
Example
Define a search field (like a site search, or Google search):
<html>
<body>
<form action="demo_form.asp">
Search Google: <input type="search" name="googlesearch" /><br />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Input Type: tel
Example
Define a field for entering a telephone number:
<html>
<body>
<form action="demo_form.asp">
Telephone: <input type="tel" name="usrtel" /><br />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Input Type: time
The time type allows the user to select a time.
Example
Define a control for entering a time (no time zone):
<html>
<body>
<form action="demo_form.asp">
Select a time: <input type="time" name="usr_time" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Input Type: url
The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is submitted.
Example
Define a field for entering a URL:
<html>
<body>
<form action="demo_form.asp">
Add your homepage: <input type="url" name="homepage" /><br />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
Input Type: week
The week type allows the user to select a week and year.
Example
Define a week and year control (no time zone):
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Select a week: <input type="week" name="year_week" />
<input type="submit" />
</form>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
HTML5 <input> Tag
| Tag | Description |
|---|---|
| <input> | Defines an input field |
