Introduction to the New HTML5 Input Types

Introduction

 
In the "old" times, much of the user interaction with the web application was limited to plain vanilla controls such as text input boxes, checkboxes, radio buttons, lists, and the submit button. Almost all current-day web applications provide to the user a more sophisticated data entry. Various techniques using client-side scripts and/or CSS and/or third-party add-ons and/or server-side validations are used to give more semantics to the user data.
 
HTML 5 includes in it's standards some new input types that can be used within your web forms. These are commonly used data and provide a useful and standard interface resulting in a unified user experience and reduced errors.
 
The following are the details on the new input types along with the screenshots on supporting browsers. For using these new input types, do remember to first validate if the input type that you want to use is supported on the user's browser. In the code samples below, I have used the Opera browser (ver 11.51) since it has support for all these new input types. Different browsers may vary in the rendering of the controls.
 

Details

 

Dates:

 
Input Type: date
 
Description: selects the month, day and year. A calendar type entry is provided.
 
Syntax: <input type="date" name="payment_date" />
 
View (in Opera browser):
 
html5_1Date.jpg
 
html5_1Date1.jpg
 
html5_1Date2.jpg
Image: Date input
 
Input Type: month
 
Description: selects the month and year. A calendar type entry is provided.
 
Syntax: <input type="month" name="birth_month" />
 
View (in Opera browser):
 
html5_3Month.jpg
 
html5_3Month1.jpg
Image: Month input
 
Input Type: week
 
Description: selects the week within a year. A calendar type entry is provided. The selection indicates the week number that has been selected.
 
Syntax: <input type="week" name="conference_week" />
 
View (in Opera browser):
 
html5_4Week.jpg
 
html5_4Week1.jpg
 
Input Type: time
 
Description: selects the time (hours and minutes). A time selector is provided.
 
Syntax: <input type="time" name="pickup_time" />
 
View (in Opera browser):
 
html5_6Time.jpg
html5_6Time1.jpg
Input Type: datetime
 
Description: selects the UTC time (hours and minutes), date, month and year. A calendar and a time selector are provided.
 
Syntax: <input type="datetime" name="departure_time" />
 
View (in Opera browser):
  
html5_7DateTime.jpg
Input Type: datetime-local
  
Description: selects the date, month, year and time (hours and minutes) for local time.
 
Syntax: <input type="datetime-local" name="pickup_time" />
 
View (in Opera browser):
 
html5_8DateTimelocal.jpg
 

Web

 
Input Type: email
 
Description: used for email address input. Value is validated to be of email format when the form is submitted. Some browsers can enable/add the @ and .com options in the input.
 
Syntax: <input type="email" name="customer_email" />
 
View (in Opera browser): The opera browser validated the entered email address after the submit button was clicked.
 
html5_9Email.jpg
Input Type: url
 
Description: used for URL address input. Value is validated to be of url format when the form is submitted. Some browsers can add the http:// prefix suffix to the input.
 
Syntax: <input type="url" name="homepage" />
 
View (in Opera browser):
 
html5_10Url.jpg
 

Number

 
Input Type: number
 
Description: used for numeric input. Value is validated to be of numeric format when the form is submitted. You can also specify the range of numbers to be accepted.
 
Syntax: <input type="number" name="age" />
 
View (in Opera browser):
 
html5_11Number.jpg
Input Type: range
 
Description: used for selecting a number from a range of numbers. You can specify the range of numbers to be accepted. A slider bar is provided for the user.
 
Syntax: <input type="range" name="rating" min="1" max="5" />
 
View (in Opera browser):
 
html5_12Range.jpg 
 

Search

 
Input Type: search
 
Description: used for search fields. Behaves like a regular text field.
 
Syntax: <input type="search" name="catalog_search"  />
 
  html5_13Search.jpg
 

Telephone Number

 
Input Type: tel
 
Description: used for telephone number input.
 
Syntax: <input type="tel" name="work_number"  />
 
  html5_14Tel.jpg
 

Color

 
Input Type: color
 
Description: used for color specification. Some browsers provide a color picker and some user interfaces allow entry of hexadecimal color values.
 
Syntax: <input type="color" name="user_backcolor"  />
 
  html5_15Colot.jpg
 
Source Code
  1. <!DOCTYPE   
  2. HTML>  
  3. <html>  
  4.     <body>  
  5.         <form action="."   
  6. method="get">  
  7. Date:   
  8.             <input type="date"   
  9. name="payment_date" />  
  10. Month:   
  11.             <input type="month" name="birth_month"   
  12. />  
  13. Week:   
  14.             <input type="week" name="conference_week" />  
  15. Time:   
  16.             <input type="time" name="pickup_time" />  
  17. DateTime:   
  18.             <input   
  19. type="datetime" name="departure_time" />  
  20. DateTime-local:   
  21.             <input   
  22. type="datetime-local" name="pickup_time" />  
  23. Email:   
  24.             <input type="email"   
  25. name="customer_email" />  
  26. URL:   
  27.             <input type="url" name="homepage"   
  28. />  
  29. Number:   
  30.             <input type="number" name="age" />  
  31. Range:   
  32.             <input   
  33. type="range" name="rating" min="1" max="5" />  
  34. Search:   
  35.             <input   
  36. type="search" name="catalog_search"  />  
  37. Telephone:   
  38.             <input   
  39. type="tel" name="work_number"  />  
  40. Color:   
  41.             <input type="color"   
  42. name="user_backcolor"  />  
  43.             <BR/>  
  44.             <BR/>  
  45.             <input type="submit" />  
  46.         </form>  
  47.     </body>  
  48. </html>  

Conclusion

 
We went through the host of new input types introduced in the HTML5 standard. These input types help taking the web forms one level ahead in a standard consistent manner.
 
Happy Coding!   

Recommended Ebook

Printing in C# Made Easy

Download Now!
Similar Articles