04 - New Input Types in HTML5

HTML5 adds a number of new input types that can be used with the <input> element. However, not every browser displays these new input types in the same way. So, you might not see the same output that is displayed here even if you run the same lines of code. We are going to see these new input types one by one.

number

The number input type allows you to collect a number. It appears as a textbox with a spinner (an up and a down arrow) to increase or decrease the number easily. You can either directly enter the value or use the spinner to change the current value. You can set the minimum and maximum values allowed using the min and max attributes respectively and how much to change the value when you click the up or down arrow using the step attribute. The default value of step is 1. You can also set the initial value using the value attribute.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Number Example</title>
  </head>
  <body>
    <form action="">
     Purchase <input type="number" name="dozens" min="0" max="50" step="5" value="25"> dozens of pencils<br />
     <input type="submit">
    </form>
  </body>
</html>

Output:

                 HTML5_number_input_type_example

date

The date input type allows you to collect a date. Different browsers display date picker differently. Most browsers display a textbox where 1) you can enter the date, month and year separately in place of dd, mm and yyyy, 2) an up and a down arrow button to increase or decrease the date, month and year as you want and a Delete button (cross mark) to delete the entered value and 3) a down arrow which displays a date picker once clicked and you can select a date easily.

     HTML5 date input example1

      HTML5 date input example2

      HTML5 date input example3

You can use the min and max attributes to set the smallest and largest dates that can be selected. You can also set an initial value using value attribute and the step size in days using the step attribute.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Date Example</title>
  </head>
  <body>
    <form action="">
      Date of Birth:
      <input type="date" name="birthday">
    </form>
  </body>
</html>

Output:

    HTML5 date input example4

week

The week input type can be used to collect a number representing a week and also a year.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
    <title>Week Example</title>
  </head>
  <body>
    <form>
      Select a week:<br>
      <input type="week">
    </form>
  </body>
</html>

Output:

        HTML5_week_input_example_06

month

The month input type can be used to collect a string representing a month and also a year.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Month Example</title>
  </head>
  <body>
    <form>
     Select Month and Year of your Birthday:<br>
     <input type="month" min="5" max="8">
    </form>
  </body>
</html>

Output:

      HTML5_month_input_example_07

color

You can easily create a color picker using the input type color and it allows you to collect a color in the format #RRGGBB. Browsers that support this input type will display color popup when the field is clicked. You can specify your initial color choice using the value attribute.

Sample Code:   

<!DOCTYPE html>
<html>
 <head>
  <title>Color Example</title>
  <style>
   div{
   height:100px;
   width:100px;
   }
  </style>
  <script type="text/javascript">
    window.onload = function()
    {
      document.getElementById("favColor").onchange = function()
      {
      document.getElementById("box").style.backgroundColor = document.getElementById("favColor").value;
      }
    }
  </script>
 </head>
 <body>
  Your favorite color:
  <input type="color" id="favColor" value="#FA5882"><br>
  <div id="box"></div>
 </body>
</html>

Output:

    /HTML5_color_input_example

range

The range input type is used for inputs that should contain a value within a range. It sometimes appears like a slider control. You can specify the smallest and largest values that can be selected using min and max attributes. You can also specify the initial value using value attribute and how much to change the value when you click on the control using step attribute.

Sample Code:    

<!DOCTYPE html>
<html>
 <head>
  <title>Range Example</title>
  <script type="text/javascript">
    window.onload = function()
    {
     document.getElementById("result").innerHTML = "The value you selected is " + document.getElementById("myRange").value;
     document.getElementById("myRange").onchange = function()
     {
      document.getElementById("result").innerHTML = "The value you selected is " + document.getElementById("myRange").value;
     }
    }
  </script>
 </head>
 <body>
   Select a value:
   <input type="range" value="50" min="10" max="100" step="2" id="myRange"><br>
   <div id="result"></div>
 </body>
</html>

Output:

        HTML5_range_input_example

email

The email input type can be used to collect email addresses. Browsers supporting email input type automatically validate the entered email address when submitted. You can set an initial email address using the value attribute and also the id of a separate datalist element that defines a list of email addresses for the user to choose using the list attribute.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
    <title>Email Example</title>
  </head>
  <body>
   <form action="#">
     Email: 
     <input type="email" name="office" id="office" list="mails"><br>
     <datalist id="mails">
     <option value="abc@gmail.com">
     <option value="xyz@yahoo.com">
     <option value="admin@abctest.com">
     </datalist>
     <input type="submit">
   </form>
  </body>
</html>

Output:

        HTML5_email_input_example1

url

The url input type can be used to collect a web address. Browsers supporting url input type automatically- validate the entered value when submitted. You can set an initial URL using the value attribute and also the id of a separate datalist element that defines a list of URLs for the user to choose using the list attribute.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>URL Example</title>
  </head>
  <body>
   <form action="#">
    Your blog address: 
    <input type="url" name="blog" id="blog"><br /><br>
    <input type="submit">
   </form>
  </body>
</html>

Output:

         HTML5_url_input_example

tel

The tel input type can be used to collect a phone number. You can set an initial phone number using the value attribute and specify a regular expression to check the input against using the pattern attribute.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Phone Example</title>
  </head>
  <body>
   <form action="#">
    Your mobile number:
    <input type="tel" name="personal" id="personal" pattern="[0-9]{10}" title="Ten digit mobile number"><br /><br>
    <input type="submit">
   </form>
  </body>
</html>

Output:

     HTML5 tel input example1

search

The search input type can be used for search fields. It behaves like a normal text field. You can set an initial value using the value attribute and also make it a compulsory field by adding required attribute.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Search Example</title>
  </head>
  <body>
    <form action="#">
     Search by name:
     <input type="search" required><br /><br>
     <input type="submit">
    </form>
  </body>
</html>

Output:

               HTML5 search input example

Summary

In this section, we have seen a number of new input types that can be used with the <input> element. We have seen how to use input types such as number, date, week, month, color, email, url, range, tel and search and make the whole process of coding lot easier.

Like us on Facebook