HTML4 and HTML5 input types

HTML4 and HTML5 input types

Thirteen new input types!

HTML5 introduced 13 new input types, covering most of the needs reported by Web developers who until now had relied on JavaScript frameworks. HTML5 packages some of the “form best practices” in its specification. Web browsers providing native implementation will give a boost in performance, and reduce the size of JavaScript embedded in complex Web pages.

  • button
  • checkbox
  • file *
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
* The “file” type is disabled on IOS as this operating system does not give access to a filesystem.

Five HTML5 types are variants about choosing a date (in red)

<input type=color>


For years we used hundreds of lines of JavaScript for selecting colors, but now it’s bundled in the browser.


Inserting a color chooser is as simple as:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.     Choose a color : <input type=“color” value=”#FF00FF”/>
  5. </body>
  6. </html>

Note: In this chapter we are simplifying the examples, as we usually embed input elements in a <form>…</form>.

Try <input type=”color”> online on this JS Bin example. Or do it here in your browser: just click the purple square (and if you don’t see a light purple square, it means that you are using either Safari or Internet Explorer – see “current support” below):


The <input type=”color”> can fire change or input events. Here is an example that changes the background color of the page when a color is chosen. Try it online at JS Bin.

Source code:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.   Select a color : <input type=“color” id=“colorChooser”/>
  6.      var colorInputField = document.querySelector(“#colorChooser”);
  7.      colorInputField.addEventListener(‘input’, function(evt) {
  8.  = this.value;
  9.       }, false);
  10. </body>
  11. </html>


By default, the color selector offers many options that may either frighten some users or just not be appropriate for the purpose of the application.

Good news: it is possible to restrict the choices, and also simplify the user interface, by using a <datalist> with some <option> elements inside. This feature is not yet (as at April 2015) supported by all browsers, check this compatibility table.

Online example at JS Bin

Source code extract:

  1. <input type=“color” value=“#333333”list=“colors”>
  2. <datalistid=”colors”>
  3.      <option>#0000FF</option>
  4.      <option>#00FF00</option>
  5.      <option>#FF0000</option>
  6. </datalist>

Note that the id of the <datalist> element should be the same as the value of the listattribute of the input field.

Warning: color values must use the CSS hexadecimal notation; using ‘blue’, ‘green’ and ‘red’ does not work in current implementations.


As at June 2016, Safari and Internet Explorer still do not support this input type, as shown in the table below:

current support of input type=color

Check for mobile support.

Several polyfills are available

If you click on the link to the support table, you will find links to polyfills. There are a few available on the Web, and some are included in (a JavaScript library that detects HTML5 and CSS3 features in the user’s browser).

Below is an example with the polyfill spectrum.js. See how it renders in Safari (the same code renders natively on browsers that support <input type=”color”>):

For those of you who would prefer using a CDN, here is another example that uses this polyfill, directly on JS Bin. You just have to include two lines in the HTML and your <input type=range> will work on Safari and IE too 🙂 Notice that this polyfill does not fire the input event, only the change event, when a color is picked.

Example on JS Bin

We just added these two lines inside the <head>..</head> element:

And here is the HTML code (note, you first need to download the lib from the Web site):

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Spectrum polyfill example, for input type=color</title>
  5. <link rel=“stylesheet” type=“text/css” href=“../spectrum.css”>
  6. type=“text/javascript” src=“../docs/jquery-1.9.1.js”>
  7. type=“text/javascript” src=“../spectrum.js”>
  8. </head>
  9. <body>
  10.      <input type=“color” onchange=alert(this.value);></p>
  11. </body>
  12. </html>


The main criticism that Web designers make about this element is related to its default appearance being strongly dependent on the browser and its underlying operating system. Changing the look and feel is not possible, except with the use of the options we saw in the previous sections of this page. This problem is also true for other input elements that renders as complex widgets, like <input type=”date”> and its variants.

Another problem is that there is no way to control where the dialog that contains the color chooser will appear – no positioning via CSS or JavaScript is possible. The specification does not say anything about how to position it over the page, thus the result is vendor specific.

The solution proposed by the W3C and its contributors is called Web Components, a new approach for designing HTML5 widgets.

<input type=”date”>

For years, date and time pickers in HTML forms made Web developers rely heavily on JavaScript based widgets. The process is simpler in HTML5, which provides a special control to handle this specific kind of data natively. All mobile browsers support <input type=”time”> and<input type=”date”>, while support on desktop computers is not yet as good.

The problem is different on a desktop. While it’s great to have native support for a date picker, Web developers would sometimes prefer 100% control over the look and feel of the date picker widget. For this purpose, the solution undoubtedly lies with the new Web Components (a way to make custom reusable widgets in HTML/CSS/JS).

In this course, we will focus on native implementations. Desktop support is currently not 100% (see the “current support” section below), so it is better to try the following examples with Opera or Chrome.

Why don’t you try it yourself? Just click on this input field:    

With Google Chrome desktop, it shows this date picker widget:

On non-supported browsers, it defaults to an <input type=”text”> input field.


Default use

The default usage is something like:

  1. <label for=“birthday”>Choose birthday party date: </label>
  2. <input type=“date” id=“birthday”>

Result:             Choose birthday party date:     

Most of the time you will add other attributes to give some restrictions (choose a date in the past, in the future, only on a Saturday, etc.).

Restrict choice to an interval of dates: attributes min, max and value

The <input type=”date”> comes with several useful attributes. In particular the value, minand max attributes are used to propose a default date, a min and a max date, or for defining an interval of acceptable values.

Try this example: just click the next input field: , or try it online on JS Bin if you want to tweak the source code:

Source code:

  1. <input type=“date”
  2.      id=“birthdayParty”
  3.      value=“2015-06-20”
  4.      min=“2015-06-20”
  5.      max=2015-06-30″>

Choosing one day in a given week, etc. with the step: attribute

Using the value attribute for setting a date, and using step=7 for example, will make acceptable only the day of the week that corresponds to the value’s day (e.g.: only Mondays). Using step=2 will make acceptable only every other day, etc.

Example: we want to celebrate birthday parties only on Saturdays, check this on JS Bin!

Extract from source code:

  1. <input type=“date”
  2.     id=“birthdayParty”
  3.     value=“2015-06-20”
  4.     min=“2015-06-20”
  5.     max=2015-06-30″
  6.     step=“7”>

Combining with the <datalist> element to restrict the choice of possible values

This feature is not yet (in 2015) supported by all browsers, check this compatibility table.

Online example at JS Bin

Extract from source code:

  1. <input type=“date”
  2.     id=“birthdayParty”
  3.     list=“birthdayPartyPossibleDates”
  4.     value=“2015-06-20”>
  5. <datalistid=“birthdayPartyPossibleDates”>
  6.      <option label=“Best for me”>2015-06-20</option>
  7.      <option label=“Ok for me too “>2015-06-27</option>
  8.      <option label=“This one is a sunday, hmmm”>2015-06-28</option>
  9. </datalist>

The list attribute of the input element must match the id attribute of the datalistelement.

If you use the min, max, or step attributes with a list attribute, it may filter the restricted list even more. Check this example on JS Bin (tested with Google Chrome), that has a restricted list of three elements, one of which is filtered because it is not in in the min/max range.


Listening to the input event

Here is an interactive example at JS Bin where you can change the type of date/time chooser. It also shows how to listen to the input event when a date/time is chosen.

Source code:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. Testing the new date input field. So far works only in Chrome and Opera browsers.<p>
  5. Choose a date/time : <input type=“date” id=“date” /></p>
  6. <p>
  7. You picked: <span id=“pickedDate”></span>
  8. </p>
  9. After you have tried the first example, change the value of the “type” attribute to:
  10. <ul>
  11. <li>datetime</li>
  12. <li>datetime-local</li>
  13. <li>time</li>
  14. <li>week</li>
  15. <li>month</li>
  16. </ul>
  17. And see the result.
  18. var field = document.querySelector(“#date”);
  19. var result = document.querySelector(“#pickedDate”);
  20. field.oninput = function(evt) {
  21.    var date =this.value;
  22.    pickedDate.innerHTML = +date+;
  23. }
  24. </body>
  25. </html>

Lines 20-26 show how we can detect a date change using JavaScript.

Checking if the chosen date is in the past or in the future using the valueAsDate property

The object returned to the input event handler has a useful property named valueAsDate.This is a JavaScript date object that can be compared to other JavaScript date objects, in particular to the date of the day we can get with var date = new Date();

The following example at JS Bin shows how to ascertain whether a date is in the past or in the future:

Extract from source code:

  1. <body>
  2. <label for=“birthDate”>Enter your birth date: </label><p>
  3. <input type=“date” id=“birthDate” >
  4. <p>
  5. You picked: <span id=“pickedDate”></span><p>
  6. <span id=“pastFuture”></span>
  7. </p>
  8. var field = document.querySelector(“#birthDate”);
  9. var result = document.querySelector(“#pickedDate”);
  10. var pastFuture = document.querySelector(“#pastFuture”);
  11. field.oninput = function(evt) {
  12.    var date = this.value;
  13.    pickedDate.innerHTML = +date+;
  14.    if(date.valueAsDate new Date()){
  15. = ‘green’;
  16.        pastFuture.innerHTML = Date in the past, ok!
  17.    } else {
  18. = ‘red’;
  19.         pastFuture.innerHTML = Date in the future, you’re not even born!
  20.    }
  21. }
  22. </body>

Lines 17-23 show how we can compare the date picked in the calendar widget with the current date. Note that we can compare any given dates using JavaScript. To check that the chosen date is before 2000 we would do this:

  1. if(this.valueAsDate <= new Date(2000,1,1)) {
  2. }


The HTML5 specification indicates that we can use <input type=”date”> and <input type=”time”> while for some years (before the specification became a frozen standard in October 2014), other variants were also present, such as type=datetime, datetime-local,month and week.

These variants have been moved to the HTML 5.1 specification (still a work in progress) because so far they have only been implemented by Chrome and Opera.

Here is an interactive example at JS Bin where you can change the type of date chooser and try all the different possible values for the type attribute of date pickers.

Some screenshots from Opera desktops and Safari IOS:

<input type=”time”>:

<input type=”datetime”>

<input type=”datetime-local”>

<input type=”week”>:

<input type=”month”>:


These new input types are not yet supported by all browsers in their desktop versions(while mobile support is 100% for major browsers).

Managing dates in different languages/formats is a difficult task that browser developers have had to address. Furthermore, Web designers do not like the fact that you cannot really control the look and feel of this element (the same criticism as for the <input type=”color”>element, see previous section). These are undoubtedly the reasons why browser implementers did not make the implementation of these widgets high priority.

However, for simple date picking (especially on mobiles), these elements are  very practical as is, and many polyfills are available, bringing compatibility to browsers that do not yet support it.

There is also a growing set of Web Components for picking date/time. For example, see and enter the “date” keyword in the search field.

So far, as at early 2015, Safari, Internet Explorer and FireFox desktop browsers still do not support this input type, as shown in the table below:

support for input type=date

See the up-to-date version of the above table and check for the mobile support.


Many polyfills are available. Remember that including a polyfill means that if the target browser supports the native implementation, the polyfill will be ignored and the native implementation will be used instead. Polyfills use alternative JavaScript based widgets only as a fallback.


Other popular polyfills are:

<input type=”email”>, <input type=”tel”>, <input type=”URL”> and <input type=”search”>


This input type is relatively straightforward to use. In mobile applications, this new input type pops up a keyboard layout adapted to email input. Note the “@” key, the “.” key, etc.

This input type is very interesting as it provides default validation behaviors:

    • If the value entered looks like an email address (contains a “@”…), the field is valid, and gets the pseudo CSS class  :valid
    • If the value entered does not contain an “@”, and does not look like an email address, the field is invalid and gets the pseudo CSS class :invalid

Typical use

Online example at JS Bin

Try it on your browser:                         Enter your email:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>Example of input type=email</title>
  6. <style>
  7.     input:invalid {
  8.         backgroundcolor:pink;
  9.     }
  10. </style>
  11. </head>
  12. <body>
  13. <label for=“email”>Enter your email </label>
  14. <input type=“email” id=“email”>
  15. </body>
  16. </html>

Note the CSS rule that turns the background color of the email input field to pink if a user enters an invalid address (lines 7-8). Also note that the validation is based only on matching a regular expression (the address should contain a “@”,  a “.”, etc.). It does not check if the address is an existing one.

Current support: all browsers, on mobile or desktop versions, since 2012.


This input field is really useful on smartphones and tablets, as it makes the browser pop up a keyboard layout suitable for entering phone numbers:

This input type is often used with the new placeholder and pattern attributes that are detailed in another section of this course. It is supported by all recent major Web browsers, on mobile devices and desktops.

Online example at JS Bin


Source code:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <head>
  5. <title>Example of input type=tel</title>
  6. <style>
  7.   input:invalid {
  8.       backgroundcolor:pink;
  9.   }
  10. </style>
  11. </head>
  12. <body>
  13. <label for=“tel”>Enter a telephone number:</label>
  14. <input type=“tel” id=“tel”
  15.         placeholder=“(555) 555-5555”
  16.         pattern=“^(?\d{3})?[-\s]\d{3}[-\s]\d{4}.*?\)”/>
  17. </body>
  18. </html>


This input field is really useful on smartphones and tablets, as it makes the browser pop up a keyboard layout suitable for entering URLs:

This field is also compatible with the validation API (more on this in another section).

Here is an online example that shows the use of the placeholder and pattern attributes for entering only URLs that start with ftp:// or http:// . Check it at JS Bin!

Source code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Example of input type=url</title>
  5. <style>
  6.     input:invalid {
  7.         backgroundcolor: lightPink;
  8.     }
  9. </style>
  10. </head>
  11. <body>
  12. <label for=“url1”>Enter a URL (default validation):</label>
  13. <input type=“url1” id=“url”/>
  14.  <p>
  15. <label for=“url2”>Enter a URL (custom validation, must start with http, https or ftp):</label>
  16.     <input id=“url2” type=“url” placeholder=;
  17.            pattern=“(http|https|ftp)\:\/\/[a-zA-Z0-9\-\.\/]*”/><p>
  18. </body>
  19. </html>

Lines 16-17 show the use of a pattern attribute with a JavaScript regexp that accepts only URLs starting with http, https or ftp. More details on the pattern attribute are given in the section that presents the new HTML5 form attributes.


The search type is used for search fields (i.e., for a search engine). A search field behaves like a regular text field, except that it may provide some feedback GUI for stopping the current request and emptying the search field, or it may provide a drop-down list of recent search results.

The specification does not state what the GUI should look like, so current implementations show variations in the look and feel.


Typical use:

  1. <label for=“search1”>Simple search: </label>
  2. <input type=search id=“search1”>
  3. <p>
  4. <label for=“search2”>Search with attribute <code>results=5</code> (try with Safari): </label>
  5. <input type=search id=“search2” results=5>

Example that shows a drop down list of recent searches (Safari screenshot borrowed from this excellent site about HTML5 forms that is worth reading):


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>Example of input type=email</title>
  6. <style>
  7.     input:? {
  8.         backgroundcolor:pink;
  9.     }
  10.     input:?? {
  11.         backgroundcolor:lightGreen;
  12.     }
  13. </style>
  14. </head>
  15. <body>
  16.    <label for=“email”>Enter your email:</label>
  17.    <input type=“email” id=“email”>
  18. </body>
  19. </html>

<input type=”number”>

This input field is useful for entering numerical values (integer or float), but not for entering zip codes. On desktop implementations and on some mobile implementations, it provides a user interface with small vertical arrows for incrementing/decrementing the current value, while on mobiles it will display a numeric keyboard.

For zip codes, a <input type=”text” pattern=”……”> is preferable. See examples given in the pattern attribute section of this course.

Example: <input type=“number” value=“25” min=“0” step=“5” max=“500”/>


<input type=“number” value=“25” min=“0” step=“5” max=“500”/>

This field accepts specific attributes max, min, step, value (default displayed value).

This input type is very interesting as it provides default validation behaviors:

    • If the value entered using a keyboard is not a valid number, or is not in the range defined by the min and max attributes, the field is invalid and gets the pseudo CSS class :invalid.
    • If the difference between the value you enter and min is a multiple of step, then it gets the CSS pseudo class :valid, otherwise it will be invalid. Example: if min=1 and step=5, the field will be valid with value=1, 6, 11, 16 etc. if min=0, with value=0, 5, 10, 15etc.

WARNING 1: Using a step attribute with an integer value will make the arrows increment/decrement the current value with the step value, and make the input field valid only when the difference between the value you enter and min is a multiple of step.

WARNING 2: by default, omitting the step attribute is equivalent to step=”1″,so for entering float values, it is necessary to use step=”any” or step equal to a floating point value such as step=”0.1″.

With step=”any”, floating point values are valid, but vertical arrows will increment/decrement the value by one. If step=”0.1″, arrows will increment/decrement by 0.1, etc.

Online example at JS Bin:  (try changing the attribute values, use step=”any” and try float values, etc).


Source code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.    #number:invalid {
  6.       backgroundcolor:pink;
  7.    }
  8.    #number:valid {
  9.       backgroundcolor:lightGreen;
  10.    }
  11. </style>
  12. </head>
  13. <body>
  14. Example of <code><input type=number></code>:<p>
  15.    <label for=“number”>Quantity (between 0 and 500, should be a multiple of 5 otherwise it’s invalid): </label>
  16. <input type=“number” id=“number” value=“25” min=“0” step=“5”max=“500”/>
  17. <p>
  18. Change the different values for attributes step, max, min, value. Don’t forget to try step=”any” for float values…
  19. </body>
  20. </html>


  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>Example type=number</title>
  6. <style>
  7.      #myField:valid {
  8.          backgroundcolor:lightGreen;
  9.      }
  10.      #myField:invalid {
  11.          backgroundcolor:pink;
  12.      }
  13. </style>
  14. </head>
  15. <body>
  16.    <label for=“myField”>Please enter a number between 0 and 30: </label>
  17.    <input type=“number” id=“myField” min=“0” step=“5” max=“30”/>
  18. </body>
  19. </html>

<input type=”range”>

This input type renders as a slider. It accepts the same attributes as the <input type=”number”/> : min, max, step and value.


The basic use is to specify at least the value, min and max attributes, and eventually the stepattribute, too – like this:

  1. <input id=“slider6” type=“range” min=“0” max=“10” step=“2”value=“5”>

This online example at JS Bin shows how to add a visual feedback using a very short JavaScript function and an <output> element.

Source code:

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <style>
  5.           #rangeValue1 {
  6.               border:1px solid black;
  7.               padding:2px;
  8.           }
  9.       </style>
  11.         window.onload = function() {
  12.           // Called when the page is loaded, for displaying initial value in the output
  13.           printValue(‘slider1’,‘rangeValue1’);
  14.         }
  15.         function printValue(sliderId, outputId) {
  16.           var x = document.getElementById(outputId);
  17.           var y = document.getElementById(sliderId);
  18.           x.value = y.value;
  19.         }
  21. </head>
  22. <body>
  23.   <form >
  24.      <label for=“slider1”>Select a value:</label>
  25.      <input id=“slider1” type=“range”
  26.             min=“100” max=“500” step=“10” value=“150”
  27.             oninput=printValue(‘slider1’,‘rangeValue1’)/>
  28.      <output id=“rangeValue1”></output>
  29.   </form>
  30.   <br/>
  31.   Play with attributes: value, min, max, step…
  32. </body>
  33. </html>


When you click and drag the slider, it “jumps” to some snap points corresponding to the integer values of the range defined by the min and maxattributes, and the “size of the jumps” depends on the value of the step attribute.

Try these examples and look at their behavior (complete online version is also available at JS Bin):

WARNING: Using a step attribute with an integer value will make the slider jump corresponding to the step value. By default, omitting the stepattribute is equivalent to step=”1″, so for accepting float values, it is necessary to use step=”any”, or step equal to a floating point value, such asstep=”0.5″.


Using the <datalist> element, it’s possible to display “ticks” above the range slider, at given positions.

This feature is not yet (in 2015) supported by all browsers, check this compatibility table.

    1. <label for=“slider2”>value=5 min=0, max=10 step=1, ticks at 2, 4, 6, 8 and 10:</label>
    2. <input id=“slider2” type=“range”
    3.        list=“ticks2”
    4.        min=“0” max=“10” step=“1” value=“5”/>
    5. <datalist id=ticks2>
    6.     <option>0</option>
    7.     <option>2</option>
    8.     <option>4</option>
    9.     <option>6</option>
    10.     <option>8</option>
    11.     <option>10</option>
    12. </datalist>



You can use CSS for “standard” styling (size, color, background color, etc), and special pseudo classes that depend on browser vendors for styling the cursor.

Example at JS Bin 


  1. <p>
  2. <label for=“sliderVolume”>value=0.5 min=0, max=11 step=”0.1″:
  3. </label><p>
  4. <input id=“sliderVolume” type=“range” min=“0” max=“11” step=“0.1”value=“0.5”
  5. oninput=printValue(‘sliderVolume’,‘volumeValue’)class=“custom”/>
  6. <output id=“volumeValue”/>
  7. </p>


  1. .custom { // horizontal rectangle of the slider
  2.     width: 60%;
  3.     height:15px;
  4.     borderradius: 8px;
  5.     boxshadow: inset 0 0 5px #333;
  6.     backgroundimage:lineargradient(to right, lightGreen, blue 100%, orange);
  7.     transition: background 450ms;
  8. }
  10. /* Change the Slider Button Color Webkit (Opera, Chrome, Safari) */
  11. .custom::-webkitsliderthumb {
  12.     webkitappearance: none !important;
  13.     backgroundcolor: #AAA;
  14.     backgroundimage:
  15.     lineargradient(to bottom, #EEE, #AAA);
  16.     border: 2px solid #999;
  17.     height:30px;
  18.     width:30px;
  19.     borderradius: 15px;
  20. }
  21. /* Change the Slider Button Color FireFox */
  22. .custom::-mozrangethumb {
  23.     backgroundcolor: #AAA;
  24.     backgroundimage:
  25.     lineargradient(to bottom, #EEE, #AAA);
  26.     border: 1px solid #999;
  27.     height:30px;
  28.     width:30px;
  29.     borderradius: 15px;
  30. }

JavaScript (just for changing the linear gradient of the CSS background color, the CSS transition (line 7 of the above code) makes the color change animated/smooth:

  1. function setVolume(sliderID, textbox) {
  2.     var x = document.getElementById(textbox);
  3.     var y = document.getElementById(sliderID);
  4.     x.value = y.value;
  5.     volumeListener(sliderID);
  6. }
  8. function volumeListener(id){
  9.     var slider=document.getElementById(id);
  10.      var val = (slider.value slider.min) / (slider.max – slider.min);
  11.      val *= 100; // val is between 0 and 1, values of the min and max attributes
  12.                  // We scale this to appropriate values for a gradient
  13.      var cssProp = ‘linear-gradient(to right , lightGreen, blue ‘+val +‘%, red)’;
  14. = cssProp;
  15. }





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s