1. Technology

HTML5 Form Input Tags

Use These Tags Today for Better Forms


A simple form with email and text input fields

View full size images

Screen shot by J Kyrnin

Many people are reluctant to learn HTML5 because browsers like Internet Explorer don’t support the tags, and they don’t want to use workarounds to get them to work. But there is one set of HTML5 tags that you should be using right now even if 99% of your readers use IE: the new INPUT tag types.

Don’t Worry About Browser Support

The great thing about these tags is that your forms will still work in IE and other browsers if you use them. That’s because browsers that don’t support these tags display the default INPUT type: text.

In other words, if you add an email input field in your HTML form, Internet Explorer and other browsers that don’t support that tag will display a text box, just like a typical email form field.

The screen shots above demonstrate this. Can you tell which field is the “email” field and which one is the “text” field? If you think I’m doctoring the image, look at the HTML code, either in the screen shot or right on the sample page.

If They Display the Same, Why Use Them?

The great thing about these tags is that they don’t always display the same way. If I view the sample page on my iPad, I can tell the minute I try to enter text which field is the email field and which is a standard text field.

The standard keyboard on an iPad has letters and a few punctuation keys. On a second screen are the numbers and a few more commonly used punctuation characters. The at-sign (@) is not found until you go to a third screen. But in the email form field, the at-sign as well as a couple other characters that are common in email addresses like underscore (_) and dash (-) are present right on the first screen. This is a much more pleasant experience, and makes the form much more usable.

And it’s not just the iPad that does this. Other mobile devices like Android and iPhone can recognize HTML5 input fields and alter their display to support them.

Using the HTML5 Input Fields Future-Proofs Your Forms

By using the various new HTML5 input fields, you create forms that work now, and work better later. Before HTML5 all you had available were text input boxes, and as browsers start supporting HTML5 you’ll get color pickers, calendars, number sliders, search boxes and more. This is one part of HTML5 that you should start using now, if you haven’t already.

HTML5 Input Types

The new HTML5 input types are:

©2014 About.com. All rights reserved.