38 Chapter 3—Intelligent Forms
3.1 New Input Types
The HTML5 specification enhances the input element by allowing several more
values for the type attribute. The new types, for example, date, color, and range,
enable browser manufacturers to make user-friendly input elements available
and also make it possible for the browser to ensure that the input is of the de-
sired type. If a browser does not recognize the type of the input element, it will
fall back on type=text and display a text field, which is useful in any case. Even
older browsers show this behavior, so there is nothing to stop us from using the
new types right away.
The types for date and time will probably be the most useful. Currently, there are
countless different versions of more or less successful JavaScript calendars avail-
able on the Internet. Entering a date comfortably, be it for booking a flight or a
hotel room, or registering for a conference, is a problem that until now required
manual work. Of course, JavaScript libraries, such as jQuery, offer ready-made
calendars, but this function should really be supported by the browser directly.
At the time of this writing, there is only one desktop browser that includes a
graphic input element for entering the date: Opera. In Figure 3.1 you can see the
open calendar that will be displayed if you click on an input element with the type
date. But let’s tackle things in order: Table 3.1 provides an overview of the new
types; then you can see what they look like in the Opera browser in Figure 3.1.Table 3.1 New Input Types in HTML5Type Description Exampletel Text without line breaks +1 234 567890search Text without line breaks search termurl An absolute URL http://www.example.comemail A valid e-mail address [email protected]datetime Date and time (always in UTC time
zone)2010-08-11T11:58Z
date Date without time zone 2010-08-11month Month without time zone 2010-08week Year and week in the year without
time zone2010-W32
time Time without time zone 11:58:00