HTML5 Recipes: New Input Types

We saw in an earlier recipe, additional attributes introduced in HTML5 forms like autofocus, placeholder and required, that enhance form usability without the developer resorting to custom code. In this recipe, we shall take a look at new form input types that have been introduced in HTML5. The HTML5 Forms group has done a fantastic job and given us 13 new input types that address a variety of data inputs. The goal of these new input types is to not only make the data entry easier for different kinds of data but it also addresses key other points. First, it makes the task of the developer easier by making these new input types as first class citizens within HTML5. This removes the dependencies on 3rd party Javascript libraries that give similar behaviour or even Flash based plugins. The other point to note is that mobile browsers interpret the input types and provide a virtual keyboard that tends to lend itself to easier data entry.

Before we begin with the new input types, one point of caution. HTML5 Forms support is not uniform across browsers and no browser currently has full support for all these types. I suggest to use resources like html5test.com andcaniuse.com to determine if the browser you are testing against, supports the features. Alternately, you can also use modernizr javascript library, that was covered in an earlier recipe to have a fallback in your code.

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

  1. New features in HTML5 for Forms
  2. New Form Elements
  3. Form Validation

Back to HTML5 Series

One thought on “HTML5 Recipes: New Input Types

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s