Post
Ask Question

Working With HTML5 Form Input Tags

Introduction

 
HTML5 is the new standard for HTML that has 13 new input types for forms. Using these new input types, we can create more interactive and easy-to-use web forms. It also provides better data validation, input control, color picker controls, and many others.
  • The new input types are:
    • Time
    • Date
    • Datetime
    • Datetime-local
    • Week
    • Month
    • Email
    • Color
    • Number
    • Range
    • Search
    • Telephone
    • URL

Advantage

 
These new input types are very useful for web designers. These input types reduce our dependency on the client and server-side scripting, now we don't need to validate our common data types like URLs, email, dates, and so on. You know that one of the biggest pains these days while creating a website is to make those websites cross-platform based that includes Desktop, mobile, and tablets, and if you are creating such web forms using HTML4 standards then you encounter many issues. That's the reason HTML5 input types are a real life-saver and makes our work much easier. 
Let's see an example of cross-platform. Here, we have two browsers, the first one is desktop-based and the second one is mobile-based. We used the same code compatible with both platforms:
 
1. Desktop browser vs Mobile Browser.png
 
Here, you can see that the Blackberry native keyboard picks the month because it already knows that the input box is a month type.
Note: It is important to know that not all major browsers are able to support all the input types. Perhaps you can start using them and if they are unable to work properly then at least they'll behave as normal text fields.
 
Now, let's understand all the input types using examples with their outputs.
 
1. time
 
The time type control selects a time, without the time zone.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="time-input">Please choose Time:</label> <br /> <br />  
  5.         <input type="time" id="time-input" /> <br />  
  6.         <input type="time" id="time1" /> <br />  
  7.         <input type="time" id="time2" /> <br />  
  8.         <input type="time" id="time3" /> <br />  
  9.         <input type="time" id="time4" /> <br />  
  10.     </div>  
  11.     </form>  
  12. </body>  
Output
 
 
2. Time.png
 
2. date
 
The date type of control is used to enter a date including month and year (without time).
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="date-input">Please choose a date:</label>  
  5.          <input type="date" id="date-input" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
 
3. Date.png
 
3. datetime
 
The datetime control enters a date and time (hour, minute, second, and fraction of a second) that is based on the UTC time zone.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="date-input">Select your Birth Date & Time(with time zone):</label>  
  5.         <input type="datetime" id="date-input" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
 
 
4.DateTime.PNG
 
4. datetime-local
 
The datetime-local control enters a date and time, without any time zone.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="dateTimeLocal-input">Select your Birth Date & Time(without time zone):</label> <br />  
  5.         <input type="datetime-local" id="dateTimeLocal-input" /> <br />  
  6.         <input type="datetime-local" id="Datetime-local1" /> <br />  
  7.         <input type="datetime-local" id="Datetime-local2" /> <br />  
  8.     </div>  
  9.     </form>  
  10. </body> 
Output
 
5. DateTimeLocal.png
 
5. week
 
The week type control selects a week and year.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="week-input">Select week:</label>  
  5.         <input type="week" id="week-input" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
6. Week.png
 
6. month
 
The month type control selects a month and year, without a time zone.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="month-input">Select month:</label>  
  5.         <input type="month" id="month-input" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
 
7. month.png
 
7. email
 
The email type control enters only an e-mail address. It will automatically validate that the user enters a correct email address or not.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="email-input">Enter your E-Mail address:</label>  
  5.         <input type="email" id="email-input" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
 
8. email.gif
 
8. email.png
 
8. number
 
The number type of control accepts the only numeric value. We can also restrict the user with various restrictions like:
  • max: It specifies the maximum value
  • min: It specifies the minimum value
  • step: It specifies the number of intervals
  • value: It specifies the default value
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="number-input">Select your age:</label>  
  5.        <input type="number" id="number-input" min="18" max="50" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
 
9. number.gif
 
9. number.png
 
9. color
 
The color type of control specifies a color in the input fields.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="color-input">Select Color: </label>  
  5.        <input type="color" id="color-input" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
 
10. color.png
 
10. range
 
The range type control is a slider control so that the user can pick a number between two numbers. We can also restrict the user from entering any other value. If you are not specifying attributes then the range type control uses these default values:
  • min: 0
  • max: 100
  • value: min + (max-min)/2, or min if max is less than min
  • step: 1
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="range-input">Select Range(1-20)</label>  
  5.        <input type="range" id="range-input" min="1" max="20" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
 
11. range.gif
 
11. range.png
 
11. search
 
The search type control searches a text field in which the user can enter search strings.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="search-input">Search : </label>  
  5.        <input type="search" id="search-input" />  
  6.     <input type="submit">  
  7.     </div>  
  8.     </form>  
  9. </body> 
Output
 
12. search.PNG
 
12. tel
 
The tel (telephone) type control enters a telephone number. It is able to validate telephone number formats.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="tel-input">Enter your Telephone Number: </label>  
  5.        <input type="tel" id="tel-input" maxlength="10"/>  
  6.     </div>  
  7.     </form>  
  8. </body>   
Output
 
13. tel.PNG
 
13. URL
 
The URL type control accepts only a URL address. From the input fields, line-breaks are automatically removed. We can use restrict values that are entered in the control using "pattern" and "maxlength" attributes.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <label for="url-input">Enter URL: </label>  
  5.        <input type="url" id="url-input" size="40" />  
  6.     </div>  
  7.     </form>  
  8. </body> 
Output
 
14. url.gif
 
14. url.png
 


Similar Articles