RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Exploring HTML 5 Forms : Page 3

One of the major initial goals of the HTML 5 effort was to update the core HTML form elements to reflect more contemporary thinking. Find out how well the HTML 5 specification has fulfilled that goal so far.


Input: The Swiss Army Knife of HTML 5

The <input> element is the workhorse of HTML 4. An abstract entity that is meant to hold a single value, <input> uses the @type attribute to determine its "expression," based upon the type of data that it holds. HTML 5 dramatically expands the set of types (referenced in the specification as input states) to provide different visual interfaces for the most common data types.

In a number of cases, the element in question doesn't look any different from a default text field, but it allows you to validate input. In some implementations (such as e-mail input fields), this feature might prohibit people from entering invalid characters. Most of the time, though, the field allows any input value and the control automatically throws a validation error event if the value fails to satisfy a pre-defined pattern (per the type). You can catch the validation error event with the appropriate event handler.

Text, Search, Tel, Email, and URL States

A new attribute for text fields within HTML 5 is the pattern attribute, a regular expression that you can use to provide a match for a given field. If the value in the field does not satisfy the given regular expression, then a validation error is thrown.

Text fields can be fairly complex, so HTML 5 provides specialized forms of text fields that have pre-defined patterns: email, url, and tel (for telephone values). In all cases, you can override the internal implementation of these fields by using an explicit pattern attribute value.

Number and Range States

The number state is a text field that will validate only if the value within the field is a number. The @min (minimum) and @max (maximum) attributes can provide additional constraints to ensure that the number is within a given range (@min must be less than @max, of course). You can also set the @step attribute to a specific value (usually 1) to indicate that the number must be given as @min + n * @step, where n varies between 0 and (@max - @min)/@step. Thus, @min="1",@max="5",@step="2" implies that a valid value can be only 1, 3, or 5.

Some implementations will represent this field as a spinner, with a read-only text field and arrows for moving between @min and @max values. The range state, on the other hand, is usually represented as a slider, with a thumb button that can "slide" between the minimum and maximum value. Range input fields generally make the most sense when the exact value is less important than the relative value, such as when you set audio volume between silent and max loudness.

Date, Time, and Datetime

Most of these input types combine some kind of date, time, or datetime validation format with visual representations of calendars or clocks. The HTML 5 specification does not provide formal specifications of the visual representations that these fields should use, as long as the end result binds a valid date, time, or datetime value to the field.

Valid date, time, and datetime fields make use of the standard W3C representations, so that January 2, 2010 at 10:15:00 PM Pacific Standard Time would be given as 2010-01-02T10:15:00-08:00Z, the fifth week in 2010 would be given as 2010-W05, and January 2010 (a month) would be rendered as 2010-01.

As with numbers, the various time fields also support the @min and @max attributes, allowing you to place limits on what would be valid. This may also be supported by the visual representation of the field. For example, a calendar with a @min of 2010-01 and a @max of 2010-12 would be able to display dates only in the year 2010.

Additionally, the date/time fields support the conversion property valueAsDate, which converts the W3C XML date representation into a JavaScript Date() object, and will also convert such a JavaScript object back into its string representation.

Image State

The image state is a new field type that may prove to be quite useful. This <input> control takes the @src attribute, which should point to an image resource. When you load an image, any time the user clicks on it, the control receives the coordinates of the mouse click relative to the image's origin as the value for the control.

The image state has a number of potential applications. It makes it easier to create visual range controls for non-numeric information, such as a gradient indicating the darkness or saturation of a given color. It also can simplify UI development for web games as well as the annotation of image content. You can use it to create quick and dirty area maps as well.

The spec currently is a little ambiguous about the exact nature of the coordinate representation, though it most likely will just be given as a comma delimited XY pair. Different HTML DOM representations already allow you to get mouse coordinates relative to an image, but it's not always easy. The image state will simplify that code and make it possible to be consistent across all HTML 5 browsers.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date