Over a million developers have joined DZone.

The wonders of the input tag in HTML 5

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

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.

text

Classic; allows free text without line breaks.

search

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.

tel

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

url

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.

email

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.

password

Classic; hides the user input.

datetime

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

date

Similar to datetime, but obviously it allows only to choose a date; both of them are available as Date objects in the DOM.

month

Selector for months, which accepts min and max attributes.

week

Selector for the week of a single year.

time

Another temporal selector; allows the user to choose a time of the day.

datetime-local

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.

number

Accepts a numeric value. It can validate the number for falling in a specified range, with min, max and step attributes.

range

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.

color

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.

checkbox

Classic; displays an on/off box.

radio

Classic; offers the choice between multiple entries with the same "name" attribute.

file

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.

submit

Classic; a button for submitting the form.

image

Classic; submits the coordinates of the click.

reset

Classic; return the form to its original state.

button

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}