The Useful Parts of HTML 5

New Form Types

There are more than a dozen new types that are proposed to be added to the input tag. Some of these appear to be far more useful than the others. There is one reason though why even those types which at first glance don't appear all that useful should not be discarded without a closer examination.

When HTML 4 was developed the web ran in web browsers running on desktop computers. These computers all had a keyboard with a full selection of letters, numbers and other symbols all easily available. Now web pages run on all sorts of other devices including mobile phones and tablet computers which do not have a keyboard. Instead these devices have a touch screen and display a partial keyboard on the screen. To cover all of the characters of a normal keyboard generally requires at least two or more different displays that you'd need to switch between to be able to access all the characters found on a keyboard. Some of the new types target this situation specifically. Types such as "email", "tel", and "url" identify the type of input expected for those fields and so the on screen keyboard can be customised to display the characters most commonly expected in that particular type of input - the @ symbol would be more accessible for email addresses and for phone numbers the number keys along with space + ( and ) would be offered - so a phone number such as +61 (0)2 9999 9999 would be able to be entered without needing to switch to display alternative keys on the touch screen.

Other proposed types provide form fields that have been commonly emulated in the past using JavaScript since until now those fields have not been available directly in HTML.

Adding a list attribute to any input field to attach it to a <datalist> (another new HTML 5 tag) provides you with a combobox. This is the form field type that is most commonly available on other platforms that was missed from the field types available in HTML 4. It is called a combobox of course because it effectively combines two input fields into one with the field containing the equivalent of both a regular input field and a select list. The value can either be selected from the list or if the required value isn't in the list it can be typed in. This is very useful where there is a small range of very common values for the field to have as well as a large number of not so common values. Hopefully the addition of a true combobox field will eventually do away with those amateur web page writers incorrectly referring to the select list as a combobox. A select list is only half of a combobox.

Possibly the input field most commonly emulated using JavaScript is a date picker. This basically displays a calendar allowing the date to be selected which it then inserts into the input field in a specific format. This helps to remove the ambiguity of people entering dates the wrong way around. The dates that are easiest to use within the computer are those in ccyy-mm-dd format which apart from a few Asian countries is not the way most people generally write their dates. A date picker solves this by allowing people to click on the date they want on a calendar and then converting that to the desired format. The ambiguity with dates such as 12/12/12 as to which of the 12s is the day, which is the month and which is the year is eliminated except for where people type in the date in that ambiguous format rather than either using the picker or the ccyy-mm-dd format (not that 12/12/12 itself is ambiguous since all three alternatives equate to 12th December 2012 but imagine if the date was 10th November 2012 and could have been entered as 12/11/10, 10/11/12 or even 11/10/12 and so could be misinterpreted as 12th November 2010, 11th December 2010, 11th October 2012, or 12th October 2011). The type="date" replaces the date picker JavaScript with a version that will hopefully work even without JavaScript.

Similarly type="color" will produce a colour wheel allowing colours to be picked more easily, type="number" will create a spinner tool and type="range" will produce a slider. While these are perhaps not needed quite as often the addition of these form field types expands the options available for creating consistent forms and so these types are definitely a useful addition.

The other new types are probably less useful than the ones already discussed but with most of them the new controls that they will add will at least be useful in those instances where you need to collect that type of data and they certainly do no great harm having them there as people are unlikely to misuse any of them as they each will restrict the possible input to that which corresponds to their type.

The only new type that serves no purpose that I have yet been able to discover is type="search". This is the only one that I can see that could potentially be misused since it seems to have nothing to distinguish it from a regular type="text" field (particularly in a form where the only other field is a submit button and the form uses method="get" as that combination effectively defines a search form).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow