Home » HTML5 » HTML5 Input Types Example

About Remi Goyard

I'm a senior web architect. Passionated by new technologies, programming, devops tools, and agile methodologies. I really enjoy to coach, or teach, people who wants to learn programming, from beginners to skilled programmers. Involved in local developer communities, Java User Group, PHP User Group, or Javascript User Group, i like to share with others about experiences, news or business. Coding is FUN !

HTML5 Input Types Example

If you are developing web applications, you may have created forms, at least for a contact page, or even a login page. So I suppose you should know how to create a form, and the major field you can add such as text element, password field, or other checkboxes and radio buttons. Of course you will add a submit button to submit data to the server, and maybe a reset button i you want to play the old school way.

HTML5 introduced more than twelve new types of input, and you can use them! Yes, even if they are not fully supported by the browser you’re using, they will be treated as an input type text, so yes you can use them in your web pages.

So in this article we will present you those new element types:

1. The input type color :

1.1 Presentation

<input type="color"/>

This type will allow the user to select a color using the system color picker.

Note : this type is not implemented in all browser, check availability on the can-i-use web site.

1.2 Javascript

The color selected by the user will be accessible via the value attribute. And in order to set the color,
simply set the value attribute, let see an example :

(function(){
    var colorElement = document.getElementById('colorinput');
    // Set the color to red
    colorElement.value="#FF0000";

    // Log the new color on change
    colorElement.addEventListener('change', function(e){
       console.log(colorElement.value);
    });
})();

Note : The browsers may set the value to #000000 if you try to set an invalid color string.

2. The input type date:

2.1 Presentation

<input type="date"/>

The date attribute will define a string representing a specific date.

Note : this type is not implemented in all browser, check availability on the can-i-use web site.

For example, in Chrome, when using this attribute, the browser will present you a calendar to select a date :

Input type date example

Input type date

2.2 Javascript

The date selected (or entered) by the user will be accessible via the value attribute.

(function(){
    var dateElement = document.getElementById('dateinput');
    dateElement.addEventListener('change', function(e){
        console.log(dateElement.value);

        // Get the value as a Date Object
        console.log(dateElement.valueAsDate);

        // Get the value as a number (timestamp)
        console.log(dateElement.valueAsNumber);
    });
})();

Note : The browser (if it supports the attribute) won’t allow you to set a date that is not a valid date string.

2.3 Other attributes

This type allow you to define constraints by adding some attributes :

  • min : The Minimum date, as a string, the browser won’t permit the selection of a date before the minimum.
    <input type="date" min="2015-04-01"/>
  • max : The Maximuim date, as a string, the browser won’t permit the selection of a date after the maximum.
    <input type="date" max="2015-04-10"  min="2015-04-01"/>
  • step : when define, the browser will start at a date (today, or the date define in the minimum attribute) and allow only date separated by “step” days.
    <input type="date" step="10" />

3. The input type datetime :

3.1 Presentation

<input type="datetime"/>

This will allow you to enter a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.

Note : None of my browsers supported this value

4. The input type datetime-local :

4.1 Presentation

<input type="datetime-local" id="dateinput1" />

This will allow you to enter a date and time (hour, minute, second, and fraction of a second) based on local time zone.

input type datetime example

input type datetime

4.2 Javascript

The date selected (or entered) by the user will be accessible via the value attribute.

(function(){
    var dateElement = document.getElementById('dateinput1');
    dateElement.addEventListener('change', function(e){
        console.log(dateElement.value);

        // Get the value as a number (timestamp)
        console.log(dateElement.valueAsNumber);
    });
})();

5. The input type email :

5.1 Presentation

<input type="email"  />

This will allow you to enter an email address.

There is no specific representation of this field, it is shown as an input type text element. But on mobile devices, the keyboard displayed when the user wants to enter some text in this type of field will add some special characters such as the @ or .com.

5.2 Javascript

The email entered by the user will be accessible via the value attribute.

(function(){
    var emailElement = document.getElementById('mail1');
    emailElement.addEventListener('change', function(e){
       console.log(emailElement.value);
    });
})();

5.3 CSS Pseudo Elements

In order to display the validation status of the element you can use the CSS 3 pseudo elements : :invalid and :valid

input[type='email']:invalid {
    color:red;
}

input[type='email']:valid {
    color:green;
}

6. The input type month :

6.1 Presentation

<input type="month"/>

This will allow you to enter a month and a year without timezone.

Note : The browser (if it supports the attribute) won’t allow you to set a month that is not a valid month string.

Note : This type, will accept the same attributes as the date type, ie : min, max and step. Here the value 1 for step represents a month.

input type month example

input type month

6.2 Javascript

     (function () {

        var element = document.getElementById('input1');
        element.addEventListener('change', function (e) {
            // Retreive the value
            console.log(element.value); // 2015-04

            // Set a ne Value
            element.value = "2015-06";

            // Log the value as Date (First of June ...)
            console.log(element.valueAsDate);

        });
    })();
    

7. The input type number :

7.1 Presentation

<input type="number"/>

This type will create a control, to only accept a numerical value.

Note : On Mobile devices, this input type, will make the device to show the numeric keyboard when the user wants to enter a value in the field.

7.2 Javascript

 (function () {

    var element = document.getElementById('input1');
    element.addEventListener('change', function (e) {
        // Retreive the value
        console.log(element.value); // 2
    });
})();

7.3 Attributes and CSS

Attributes

  • min : The Minimum Number
    <input type="number" min="0"/>
  • max : The Maximuim Nuhmber
    <input type="date" max="100"  min="0"/>
  • step : when define, the browser will not accept any value that are not separated from step (form 0 or min). This can be use to allow the user to enter a decimal value.
    <input type="date" step="0.1" />

CSS Pseudo Elements

In order to display the validation status of the element you can use the CSS3 pseudo elements : :invalid and :valid

input:invalid {
    color:red;
}
input:valid {
    color:green;
}

8. The input type range :

8.1 Presentation

<input type="range"/>

This type create a control, that will display a slider to define a value. Usefull for entering a number whose exact value is not really important.

The default values for the attributes are :

  • min : 0
  • max : 100
  • value : min + (max-min)/2, or min if max is less than min
  • step : 1
input type range example

input type range

8.2 Javascript

 (function () {
    var element = document.getElementById('input1');
    element.addEventListener('change', function (e) {
        // Retreive the value
        console.log(element.value); // 2
    });
})();

9. The input type search :

9.1 Presentation

<input type="search"/>

This type, is a kind of input type text, except that when the value entered in this input contains line breaks, they are automatically removed from the value sent to the server.

9.2 Javascript

 (function () {
    var element = document.getElementById('input1');
    element.addEventListener('change', function (e) {
        // Retreive the value
        console.log(element.value); // 2
    });
})();

10. The input type tel :

10.1 Presentation

<input type="tel"/>

This will help you to enter a phone number.

Note : There is no specificities for this element except that on mobile devices the numeric keyboard will be displayed when user want to enter a phone number.

10.2 Javascript

 (function () {
    var element = document.getElementById('input1');
    element.addEventListener('change', function (e) {
        // Retreive the value
        console.log(element.value); // 2
    });
})();

11. The input type time :

11.1 Presentation

<input type="time"/>

This will allow you to enter an hour without timezone.

Note : The browser (if it supports the attribute) won’t allow you to set an hour that is not a valid hour string.

Note : This type, will accept the same attributes as the date type, ie : min, max and step. Here the value 1 for step represents a second, default is 60 seconds.

11.2 Javascript

     (function () {
         var element = document.getElementById('input1');
        element.addEventListener('change', function (e) {
            // Retreive the value
            console.log(element.value); // 10:00

            // Set Value to last time of year
            element.value = "16:45";
        });
    })();
    

12. The input type url :

12.1 Presentation

<input type="url"/>

This attribute act as the email attribute.

This will allow you to enter an url (with schema : http, ftp …).

There is no specific representation of this field, it is shown as an input type text element. But on mobile devices, the keyboard displayed when the user wants to enter some text in this type of field will add some special characters such as .com and http://.

12.2 Javascript

The url entered by the user will be accessible via the value attribute.

(function(){
    var urlElement = document.getElementById('url1');
    urlElement.addEventListener('change', function(e){
       console.log(urlElement.value);
    });
})();

12.3 CSS Pseudo Elements

In order to display the validation status of the element you can use the CSS 3 pseudo elements : :invalid and :valid

input[type='url']:invalid {
    color:red;
}

input[type='url']:valid {
    color:green;
}

13. The input type week :

13.1 Presentation

<input type="week"/>

This will allow you to enter a week and a year without timezone.

Note : The browser (if it supports the attribute) won’t allow you to set a week that is not a valid week string.

Note : This type, will accept the same attributes as the date type, ie : min, max and step. Here the value 1 for step represents a week.

input type week example

input type week

13.2 Javascript

     (function () {
        var element = document.getElementById('input1');
        element.addEventListener('change', function (e) {
            // Retreive the value
            console.log(element.value); // 2015-W15

            // Set Value to last week of year
            element.value = "2015-W52";

            // Log the value as Date, this return the first day of the Week
            console.log(element.valueAsDate);

        });
    })();
    

14. Download

Download
You can download the full source code of this example here: HTML5 Input Type Example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments