Post
Ask Question

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
 
<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
 
Output
 
color.jpg
 

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
 
<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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Date</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of date as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Choose Your Joining Date:  
  12.         <input type="date" name="jdate"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>DateTime</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of datetime as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Choose Your Joining Date and Time:  
  12.         <input type="datetime" name="jdatetime"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </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 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
  1. <input type="email" name="some-name"/>  
  2. <input type="email" list="email-choices" name="some-name"/>  
  3. <datalist id="email-choices">  
  4. <option label="First Person" value="[email protected]">  
  5. <option label="Second Person" value="[email protected]">  
  6. <option label="Third Person" value="[email protected]">  
  7. ...  
  8. </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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Email</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of email as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Your E-mail :  
  12.         <input type="email" name="user-email"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </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 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
 
<input type="number" min="0" max="20" step="2" value="10" name="some-name"/>
 
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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Number</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of number as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Select any even no :  
  12.         <input type="number" min="0" max="20" step="2" value="10" name="num" /><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </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
 
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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Month</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of month as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Joining (month and year):  
  12.         <input type="month" name="jmonth"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </html> 
Output
 
month.jpg
 
 

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
 
<input type="range" name="some-name"/>  
 
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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Range</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of range as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Range of points:  
  12.         <input type="range" name="points" min="1" max="10"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Telephone</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of telephone as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Telephone:  
  12.         <input type="tel" name="usertel"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Time</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of Time as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Choose Your Joining Time:  
  12.         <input type="time" name="jointime"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Week</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of week as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Select the Joining week:  
  12.         <input type="week" name="joinweek"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Search</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of search as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Search Site:  
  12.         <input type="search" name="googlesearch"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </html> 
Output
 
search.jpg
 
 

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
  1. <input type="url" name="some-name"/>  
  2. <input type="url" list="url-choices" name="some-name"/>  
  3. <datalist id="url-choices">  
  4. <option label="HTML5 Spec" value="http://dev.w3.org/html5/spec/">  
  5. <option label="Some other URL" value="http://example.com/blah.html">  
  6. <option label="Yet Another URL" value="http://foo.bar.com/baz.html">  
  7. ...  
  8. </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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>URL</title>  
  7. </head>  
  8. <body>  
  9.     <h2>Implementation Of URL as New Input Type</h2>  
  10.     <form action="form.asp">  
  11.         Add homepage of website:  
  12.         <input type="url" name="homepage"><br>  
  13.         <br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </html>   
Output
 
url.jpg
    


Similar Articles