HTML5 has introduced 13 new input types that cater to a variety of data types. Let us discuss them in brief here. All these new types are identified by specifying a value for the type attribute.The generic format is shown here with additional attributes that we will discuss as applicable.
<input type="TYPENAME_HERE" .. additional attributes/>
- Search Input : Use input type=”search” for providing a search box functionality to your form field. This field does not search anything. In fact, it provides a small delete icon as you type anything in it. This is extremely useful on mobile screens, where you simply want to clear off whatever you have typed in the search box.
- 6 Date Time Types: HTML5 introduces 6 date time types namely datetime, date, time, month, week and datetime-local. The browser is supposed to render the field as you click on it. Currently the Opera browser has the best initial support for this. You will find that if you click an input of type=”date”, it will dropdown a nice calendar widget that lets you select the date. It almost does away with the need for a custom date plugin.
- URL, Telephone and Email Input Types: Anyone who has filled out forms over the web knows that web site urls , phone numbers and email addresses are often required. You can now specifiy the type for the input elements by giving type=”email” or type=”url” or type=”tel” depending on kind of data. The browsers are now supposed to render them accordingly by giving a visual indication as to what kind of data is expected here. It is also helpful in data validation that we shall see in a later recipe, where the validation routine knows that if the type was say email and if you have not entered a valid formatted email address, then the validation will fail. The most interesting use of these input types is on the Mobile browsers. If you have used Apple iOS, you would have noticed that if the input is a phone number, then the virtual keyboard only displays digits and other characters that help type out a phone number quickly. Similarly, if it is of type=”email”, then the “@” sign will available in the virtual keyboard and so on.
- Number input : Use input type=”number” for allowing a user to enter only numeric values. The browsers which support this type will render the field with a spinbox control with little up and down arrows to increment and decrement the value respectively. The other attributes that you can with this input type are min, max, value and step, where min and max are the minimum and maximum values allowed, value is the current value of the field and step is the amount by which the value is incremented or decremented.
- Range input :Use input type=”range” in case you want to show a slider control that allows you to change values. The browsers which support this type will render the field using a slider control and the user can simply drag and select the value. The other attributes that you can use with this input type are min, max, value and step.
- Color Input : Use input type=”color” for providing a color selection dialog. This is currently not supported in any of the browser but should bring into mainstream the default color dialog that we are all accustomed to, while selecting a particular color.
One of the concerns that most developers have is that if they start using these new input types today and if their application users are using an older browser that does not support HTML5, will the site break? Absolutely not. If the browser does not understand the input type, then the default input type=”text” is used and you will simply see a text input where the user can then enter the value. While it does not make a good user experience, atleast your form is still usable.
Let us now combine several of these input types into a complete form that allows a user to submit feedback. Do note that we can use the additional attributes like placeholder, required and autofocus as needed. The code is shown below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML5 Form Input Types</title> </head> <body> <form id="feedbackform"> <label for="username">Your Name</label> <input name="usernamevalue" id="username" type="text" placeholder="First Name and Last Name" required autofocus /><br/> <label for="dob">Date of Birth</label> <input name="dobvalue" id="dob" type="date"/><br/> <label for="phonenumber">Phone Number</label> <input name="phonenumbervalue" id="phonenumber" type="tel" placeholder="Your Telephone Number"/><br/> <label for="email">Email Address</label> <input name="emailvalue" id="email" type="email" placeholder="Your Email Address"/><br/> <label for="blogurl">Blog Site URL</label> <input name="blogurlvalue" id="blogurl" type="url" placeholder="Your Blog Site URL"/><br/> <label for="rating">Please rate us (1 to 5, with 5 being highest)</label> <input name="ratingvalue" id="rating" type="range" placeholder="Give Your Rating" min="1" max="5" value="3"/><br/> <label for="numtimes">Daily Visits</label> <input name="numtimesvalue" id="numtimes" type="number" placeholder="Number of Daily Visits" min="1" max="50" value="1"/><br/> <button type="submit">Submit Feedback</button> </fieldset> </form> </body> </html>
I strongly suggest to view this in the latest version of your browser. If you have not checked out the Opera browser, give that a try too. If you are using an Android or iOS device, notice how the virtual keyboard shows up depending on the input type i.e. email, url or tel.
See it in action here.
HTML5 Forms Recipes
Back to HTML5 Series