The wonders of the input tag in HTML 5
The wonders of the input tag in HTML 5
Join the DZone community and get the full member experience.Join For Free
Have you seen our HERE Twitch channel to livestream our Developer Waypoints series?
The goal of the new <input> types available in HTML 5, which we'll explore in this article, is commoditizing the user experience with forms. At the same time, the widgets are backward compatible since they all submit plain text, and degrade gracefully to a plain text field (<input type="text">) when the type attribute is not recognized. Obviously, all the HTML 4 types are still supported.
A disclaimer: the HTML 5 specification is a working draft, and it is susceptible to modifications until it is accepted as a standard. Moreover, only Opera, Chrome and Safari have been implementing these standards right now: thus not all of the new <input> elements may be available in your browser of choice.
The types already available in HTML 4 are tagged with the word classic.
Classic; allows free text without line breaks.
Functionally equivalent to text, but used for targeting search boxes for a different appearance. For example, iPhones present it with the same look&feel of the operating system's search boxes.
Defines a field for entering a phone number. There is no particular validation because of the variety of phone numbers available, but a custom rule can be defined with other attributes (see below).
Used for entering URLs; while a simpler representation can be displayed (like the one in the location bar, without characters like %20), escapes the value to submit so that it always is a valid URL. In fact, this field has out-of-the-box validation of the value.
Used for email addresses, with automatic validation. Supports multiple addresses when the multiple attribute is set. The values are submitted as a comma separated list.
Classic; hides the user input.
Similar to datetime, but obviously it allows only to choose a date; both of them are available as Date objects in the DOM.
Selector for months, which accepts min and max attributes.
Selector for the week of a single year.
Another temporal selector; allows the user to choose a time of the day.
Equivalent to datetime, but without including a timezone (because it is not necessary or it is provided via other means). The purported example is a booking flight application where the user enters an absolute time and a departuring location.
Accepts a numeric value. It can validate the number for falling in a specified range, with min, max and step attributes.
Semantically equivalent to a number, but is displays a spinner instead of a text box. Due to this interface, it's one of the widgets that always posts something, without allowing an empty string.
Displays a widget for selecting a color. The submitted value is a valid simple color, like #006699. Like range, it always posts something instead of the empty string.
Classic; displays an on/off box.
Classic; offers the choice between multiple entries with the same "name" attribute.
Classic; lets the user select a file for upload. In HTML5 this element has been extended to support multiple files. It also has an accept attribute, which defined the mimetypes to accept so that the user does not upload a file which will be rejected.
Classic; a button for submitting the form.
Classic; submits the coordinates of the click.
Classic; return the form to its original state.
With these additions for the type attribute, there are also orthogonal attributes which work for most of the various <input> types. They are:
- value, classic, specificies a starting and default value for the input.
- pattern, specifies a regex that the value must match before being considered valid.
- readonly, classic, defines the field as immutable.
- required, specified that the element must be populated for validation to be considered.
- placeholder, specifies a plain text value which disappears when the element gets the focus (like the word Search).
Opinions expressed by DZone contributors are their own.