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 collection of a 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
<input type="color" name="some-name"/>
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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Color</title>
</head>
<body>
<h2>Implementation Of color as New Input Type</h2>
<form action="form.asp">
Choose your favorite color:
<input type="color" name="favcolor"><br>
<br>
<input type="submit">
</form>
</body>
</html>
Output
![color.jpg]()
2. Input type Date
Description
The date type allow 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 collection of a date.
Syntax
<input type="date" name="some-name"/>
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
![date.jpg]()
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
<input type="datetime" name="some-name"/>
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
![datetime.jpg]()
4. Input type Email
Description
The email type is used for input fields that should contain an e-mail address. A field for entering e-mail address(es).This input type allows 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="abc@example.com">
<option label="Second Person" value="xyz@example.com">
<option label="Third Person" value="pqr@example.com">
...
</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
![email.jpg]()
5. Input type number
Description
The number type is for input fields that should contain a numeric value. This input type allows 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
<input type="number" min="0" max="20" step="2" value="10" name="some-name"/>
Browser Support
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 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
![number.jpg]()
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
<input type="month" name="some-name"/>
Browser Support
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
![month.jpg]()
7. Input type range
Description
This input type allows 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
Offers a slider to set to a certain value/position.
Syntax
<input type="range" name="some-name"/>
Browser Support
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 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
![range.jpg]()
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
<input type="tel" name="some-name"/>
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
![tel.jpg]()
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
<input type="time" name="some-name"/>
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
![time.jpg]()
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
<input type="week" name="some-name"/>
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
![week.jpg]()
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
<input type="search" name="some-name"/>
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
![search.jpg]()
12. Input type URL
Description
This input type allows 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
![url.jpg]()