HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow for better input control and validation.
This chapter covers the new input types:
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Input Type - email
The email type is used for input fields that should contain an e-mail address.
The value of the email field is automatically validated when the form is submitted.
Example
E-mail: <input type="email" name="user_email" />
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
Homepage: <input type="url" name="user_url" />
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
Points: <input type="number" name="points" min="1" max="10" />
Use the following attributes to specify restrictions for the number type:
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies the maximum value allowed |
| min | number | Specifies the minimum value allowed |
| step | number | Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) |
| value | number | Specifies the default value |
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input type="number" name="points" min="0" max="10" step="3" value="6" />
<input type="submit" />
</form>
</body>
</html>
Input Type - range
The range type is used for input fields that should contain a value from a range of numbers.
The range type is displayed as a slider bar.
You can also set restrictions on what numbers are accepted:
Example
<input type="range" name="points" min="1" max="10" />
Use the following attributes to specify restrictions for the range type:
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies the maximum value allowed |
| min | number | Specifies the minimum value allowed |
| step | number | Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) |
| value | number | Specifies the default value |
Input Type - Date Pickers
HTML5 has several new input types for selecting date and time:
- date - Selects date, month and year
- month - Selects month and year
- week - Selects week and year
- time - Selects time (hour and minute)
- datetime - Selects time, date, month and year (UTC time)
- datetime-local - Selects time, date, month and year (local time)
The following example allows you to select a date from a calendar:
Example
Date: <input type="date" name="user_date" />
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<form id="form1">
<p>Email :</p>
<input type="email" name="email" />
<p>URL :</p>
<input type="url" name="url" />
<p>Telephone No. :</p>
<input type="tel" name="tel" />
<p>Number :</p>
<input type="number" name="number" min="1" max="10" step="2"/>
<p>Range :</p>
<input type="range" name="range" min="1" max="10" step="2" />
<p>Date :</p>
<input type="date" name="date" />
<p>Month :</p>
<input type="month" name="month" />
<p>Week :</p>
<input type="month" name="week" />
<p>UTC Date Time :</p>
<input type="datetime" name="utcdatetime" />
<p>Local Date Time :</p>
<input type="datetime-local" name="localdatetime" />
<p>Time :</p>
<input type="time" name="time" />
<input type="Submit" value="Submit" />
</form>
</body>
</html>
Input Type - search
The search type is used for search fields, like a site search, or Google search.
The search field behaves like a regular text field.
Input Type - color
The color type is used for input fields that should contain a color.
The Opera browser will allow you to select a color from a color picker, Google's Chrome will only allow hexadecimal color values to be submitted:
Example
Color: <input type="color" name="user_color" />
