HTML5 New Input Types

New Input Types in HTML5

In HTML5 several new input types have been added and these new input types are sliders, number spinners, popup calendars, color choosers, autocompleting suggestion boxes, and more.

This article covers the new input types:

color
date
datetime
email
month
number
range
search
tel
time
URL
week

In order to define all these new input types the "<input>" Tag is used.

1. Input type Color

Description

This input type allows the collection of color of the form. If a browser supports this input type then the intention is that clicking in the textfield will result in a color chooser popping up.

The input element with a type attribute whose value is "color" represents a color-well control, for setting the element's value to a string representing a simple color.

Note: Color keywords (for example, strings such as "red" or "green") are not allowed.

Syntax

Browser Support

The Color input type is supported in Chrome and Opera only. It is not supported by Internet Explorer, Safari and Firefox.

Attribute

value: The initial value. The intention is that if a browser pops up a color chooser, the initial selection will match the current value.

Example of color input type

Output

2. Input type Date

Description

The date type allows the user to select a date. The input element with a type attribute whose value is "date" represents a control for setting the element's value to a string representing a date. Or in simple words, we can say that this input type allows the collection of date.

Syntax

Browser Support

The Date input type is supported in Chrome, Safari and Opera only. It is not supported by Internet Explorer and Firefox.

Attribute

In Opera and other future browsers that pop-up calendars, the calendar selection defaults to the current date. So, value, step, min, and max can all be omitted. However, in the current version of Chrome, selecting the up/down arrows starts at 0001-01-01 unless you supply a value. The Chrome behavior is not helpful, since you will need JavaScript to calculate the current date at run time. Also, if you have two related date input fields (e.g., start date and end date), you might want to use JavaScript to change the second field when the first field changes (e.g., set the end date to one day after the start date).

value: The initial value. The format is "yyyy-mm-dd".
step: The step size in days. The default is 1.
min, max: The smallest and largest dates that can be selected, formatted as date strings of the form "yyyy-mm-dd".

Example of date input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Date</title>
</head>
<body>
<h2>Implementation Of date as New Input Type</h2>
<form action="form.asp">
Choose Your Joining Date:
<input type="date" name="jdate"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

3. Input type DateTime

Description

The datetime type allows the user to choose a date and time (with time zone).The input element with a type attribute whose value is "datetime" represents a control for setting the element's value to a string representing a global date and time (with timezone information).

Syntax

Browser Support

The DateTime input type is supported in Safari and Opera only. It is not supported by Internet Explorer, Chrome and Firefox.

Example of datetime input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>DateTime</title>
</head>
<body>
<h2>Implementation Of datetime as New Input Type</h2>
<form action="form.asp">
Choose Your Joining Date and Time:
<input type="datetime" name="jdatetime"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

4. Input type Email

Description

The email type is used for input fields that should contain an e-mail address. A field for entering the e-mail address(es).This input type allows the collection of an email address. If the "list" attribute is not specified, then the intention is that the browser supplies some help in entering a legal email address (e.g., the iPhone browser uses an email-optimized keyboard) and/or validation on submission.

If the "list" attribute is specified, then the intention is that the browser lets the user choose among a set of email addresses defined separately with the "datalist" element. Your browser (Firefox 16 on Windows) does support this input element.

Syntax

<input type="email" name="some-name"/>
<input type="email" list="email-choices" name="some-name"/>
<datalist id="email-choices">
<option label="First Person" value="[email protected]">
<option label="Second Person" value="[email protected]">
<option label="Third Person" value="[email protected]">
...
</datalist>

Browser Support

The Email input type is supported in Firefox, Chrome, and Opera only. It is not supported by Internet Explorer and Safari.

Attributes

If you supply the "list" attribute, you must also supply a separate "datalist" entry.

value: The initial value (a legal email address).
list: The id of a separate "datalist" element that defines a list of email addresses for the user to choose among.

Example of email input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Email</title>
</head>
<body>
<h2>Implementation Of email as New Input Type</h2>
<form action="form.asp">
Your E-mail :
<input type="email" name="user-email"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

5. Input type number

Description

The number type is for input fields that should contain a numeric value. This input type allows the collection of a number (either integer or floating-point). In other words, input type number means picking a number.

The input element with a type attribute whose value is "number" represents a precise control for setting the element's value to a string representing a number.

Syntax

Browser Support

The email input type is supported in Safari, Chrome, and Opera only. It is not supported by Internet Explorer and Firefox.

Attributes

You should normally supply all of the value, min, and max. Browsers that support this input type provide inconsistent behavior when these attributes are omitted. If you want to collect floating point numbers, use a non-integer for min or step.

value: The initial value. If omitted, the field is initially blank, but the internal value is not consistent across browsers.
step: How much to change the value when you click on the up or down arrows of the control. The default is 1.
min, max: The smallest and largest values that can be selected with the up/down arrows.

Example of number input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Number</title>
</head>
<body>
<h2>Implementation Of number as New Input Type</h2>
<form action="form.asp">
Select any even no :
<input type="number" min="0" max="20" step="2" value="10" name="num" /><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

6. Input type month

Description

The month type allows the user to choose a full month and year.

The input element with a type attribute whose value is "month" represents a control for setting the element's value to a string representing a month.

Syntax

Browser Support

The month input type is supported in Safari, Chrome, and Opera only. It is not supported by Internet Explorer and Firefox.

Example of month input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Month</title>
</head>
<body>
<h2>Implementation Of month as New Input Type</h2>
<form action="form.asp">
Joining (month and year):
<input type="month" name="jmonth"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

7. Input type range

Description

This input type allows the collection of a number (either integer or floating-point). All known browsers that support this use a slider. The exact value is not displayed to the user unless you use JavaScript.

So, use the number (spinner) input type if you want to let the user choose an exact value. Browsers are supposed to use a horizontal slider unless you attach CSS that specifies a smaller width than height, in which case they are supposed to use a vertical slider

It offers a slider to set to a certain value/position.

Syntax

Browser Support

The range input type is supported in Safari, Chrome, and Opera only. It is not supported by Internet Explorer and Firefox.

Attributes

value: The initial value. The default is halfway between the min and the max.
step: How much to change the value when you click on the up or down arrows of the control. The default is 1.
min, max: The smallest and largest values that can be selected. The default for min is 0, and the default for max is 100.

Example of range input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Range</title>
</head>
<body>
<h2>Implementation Of range as New Input Type</h2>
<form action="form.asp">
Range of points:
<input type="range" name="points" min="1" max="10"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

8. Input type tel

Description

It is used for entering a telephone number.

This input type is intended to help you collect a telephone number. However, since the format of telephone numbers is not specified, it is not clear how a normal browser would help you with this. However, a cell phone might use an on-screen keyboard that is optimized for phone number input.

Syntax

Browser Support

As of January 2013, Firefox, Chrome, Safari, and Opera claim to support telephone input, but show no difference when entering values and perform no validation when submitting values. Your browser (Firefox 16 on Windows) does support this input element.

Attributes

value: The initial value as a phone number.

Example of tel input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Telephone</title>
</head>
<body>
<h2>Implementation Of telephone as New Input Type</h2>
<form action="form.asp">
Telephone:
<input type="tel" name="usertel"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

9. Input type time

Description

It allows the user to select a time. The input element with a type attribute whose value is "time" represents a control for setting the element's value to a string representing a time (with no timezone information).

Syntax

Browser Support

Input type Time is supported in Safari, Chrome, and Opera only. It is not supported by Internet Explorer and Firefox.

Example of time input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Time</title>
</head>
<body>
<h2>Implementation Of Time as New Input Type</h2>
<form action="form.asp">
Choose Your Joining Time:
<input type="time" name="jointime"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

10. Input type week

Description

The week type allows the user to select a week and year. Or it means picking up a specific week.

Syntax

Browser Support

Input type Week is supported in Safari, Chrome, and Opera only. It is not supported by Internet Explorer and Firefox.

Example of week input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Week</title>
</head>
<body>
<h2>Implementation Of week as New Input Type</h2>
<form action="form.asp">
Select the Joining week:
<input type="week" name="joinweek"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

11. Input type Search

Description

This input type is intended to help you collect a string for a search. Since search queries are free-form text, there is never any help in inputting characters, and never any validation on submission. However, on some platforms, search fields should look slightly different than regular textfields (e.g., with rounded corners instead of with square corners).

Define a search field (like a site search, or Google search).

Syntax

Browser Support

Input type search is supported in Safari and Chrome only. It is not supported by Internet Explorer, Opera, and Firefox.

Attribute

value: The initial value.

Example of search input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Search</title>
</head>
<body>
<h2>Implementation Of search as New Input Type</h2>
<form action="form.asp">
Search Site:
<input type="search" name="googlesearch"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output

12. Input type URL

Description

This input type allows the collection of an absolute URL. If the "list" attribute is not specified, then the intention is that the browser supplies some help in entering a legal URL (e.g., the iPhone browser uses a URL-optimized keyboard) and/or validation on submission.

If the "list" attribute is specified, then the intention is that the browser lets the user choose among a set of URLs defined separately with the "datalist" element.

Syntax

<input type="url" name="some-name"/>
<input type="url" list="url-choices" name="some-name"/>
<datalist id="url-choices">
<option label="HTML5 Spec" value="http://dev.w3.org/html5/spec/">
<option label="Some other URL" value="http://example.com/blah.html">
<option label="Yet Another URL" value="http://foo.bar.com/baz.html">
...
</datalist>

Browser Support

Input type URL is supported in Firefox, Opera and Chrome only. It is not supported by Internet Explorer, Opera, and Safari.

Attribute

value: The initial value, as an absolute URL.
list: The id of a separate "datalist" element that defines a list of URLs for the user to choose among.

Example of URL input type

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>URL</title>
</head>
<body>
<h2>Implementation Of URL as New Input Type</h2>
<form action="form.asp">
Add homepage of website:
<input type="url" name="homepage"><br>
<br>
<input type="submit">
</form>
</body>
</html>

Output