The wonders of the input tag in HTML 5

DZone 's Guide to

The wonders of the input tag in HTML 5

· Web Dev Zone ·
Free Resource

HTML 5 includes many features that can enrich the user experience without resorting to external JavaScript libraries. There are many markup-level improvements that web application can take advantage of, and the <input> element has become one of the most powerful ones.

In HTML 4 and its previous versions, the <input> tag was somewhat limited as it could treat text, checkboxes, radio elements and a few other types of input. This lead to the proliferation of JavaScript-based widgets that performed client-side validation and aided the user in entering a value. For example, we have seen so many date or color picker that we consider them a commodity now. The same can be said for email validation code.

HTML 5 moves towards less use of JavaScript kung fu and a greater declarative usage of this widget, by defining them in the language and pushing the implementation on browsers instead of on web developers.
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 elements

The types already available in HTML 4 are tagged with the word classic.

Classic; an <input> with no visibility or easy modification by the user (without editing the code itself or using JavaScript). Its value will be submitted with the other inputs.


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.


Displays a date time picker (previously available only in JavaScript) and submits a string in a standard format i(like 1970-01-01T00:00:00.0Z).


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.


Classic; generic button available for JavaScript bindings.

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).

Thanks to HTML 5, web developers will gain news instruments for simplifying user interface coding. JavaScript frameworks will change in the future: nice date pickers or color widgets won't be a killer feature anymore, and they will have to look for other improvement areas.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}