13 New Form Text Input Types

With HTML5, 13 new form text input types are available.

You're already familiar with type="text" and type="password" input fields and the textarea text box field. They've been available officially with the release of HTML2 in September 1995, and may have been available as early as April 1993 when the first Mosaic browser was released.

Those original text input field types have been around a while, a couple decades.

I'll talk about the new ones that arrived with HTML5. Each has short blurb about it, along with an example and source code to copy and paste.

Not all browsers will provide the widgets mentioned for some of the text input types. For those, its generally a graceful degradation where the text can be typed into the field manually.

Input type="text" is the default input type. If a browser doesn't recognize an input type, it assumes the default.

Some of the new form field types are especially suitable for mobile devices. Depending on device, the type="tel", for example, brings up a keypad. And type="email" changes the primary keyboard layout to include the "@" and/or the ".com" keys.

A browser brand may provide support for certain input types on mobile that it doesn't on desktop computers. Expect browsers to support more and more input types as new versions are released.

As you use each of the examples, you'll see which text input types your browser treats differently than a standard type="text" field.

Input type="color"

Some browsers will provide a color picker when the text field is clicked on. When a color picker selection is made, the text field is filled with the color. And when the form is submitted, the hex color code of the color selection is sent to the form processing software.

If you see a black bar background, your browser has implemented the input type. Click the field to get a color picker.

Live example:

Code example:

<input type="color" name="example-color">

Input type="date"

Some browsers will provide a calendar to pick the date from.

Live example:

Code example:

<input type="date" name="example-date">

Input type="datetime"

This field is for a date and time, UTC time standard. For browsers that provide a widget, they'll generally provide a calendar, like for the type="date" field. The time can be typed in manually. Some browsers also provide up/down arrows the user can use to adjust the time.

Live example:

Code example:

<input type="datetime" name="example-datetime">

Input type="datetime-local"

This is identical to type="datetime" except for one important difference — the time zone is local instead of the UTC time standard. The local time zone is whatever time zone is default for the script that processes the form.

Live example:

Code example:

<input type="datetime-local" name="example-datetime-local">

Input type="email"

The text field needs to be typed in manually, no widget to help. With type="email" specified, some devices will offer "@" and/or ".com" keys on the primary keyboard layout. In addition, some browsers will respond with a prompt if the user tries to submit the form with content in the field that's not a validly-formatted email address.

Live example:

Code example:

<input type="email" name="example-email">

Input type="month"

Similar to type="date" except, if a date picker is provided, only the month and year is inserted into the text field.

Live example:

Code example:

<input type="month" name="example-month">

Input type="number"

Some browsers provide up/down arrows to adjust the number typed into the form field (with 0 being default if no other number is typed in).

Live example:

Code example:

<input type="number" name="example-number">

Input type="range"

Either blank or a range from 1 to 100 is expected. For browsers that provide a slider instead of a standard input field, sliding the indicator all the way to the right submits a value of 100. But sliding all the way to the left submits a null value. The next increment from the left submits a value of 1. (With the slider, values in the field aren't visible. The server software determines how to interpret the value it receives.)

Live example:

Code example:

<input type="range" name="example-range">

Input type="search"

The type="search" generally is used for search fields. Some browsers will provide an x in a circle at the right edge of the field that can be used to clear the text from the field. Other than that particular, type="search" behaves like type="text".

Live example:

Code example:

<input type="search" name="example-search">

Input type="tel"

Some browsers, especially those running in mobile devices, provide a telephone-number-characters-only keyboard or keypad for inputting the telephone number.

Live example:

Code example:

<input type="tel" name="example-tel">

Input type="time"

The time can be typed in manually. Some browsers also provide up/down arrows the user can use to adjust the time.

Live example:

Code example:

<input type="time" name="example-time">

Input type="url"

The text field needs to be typed in manually, no widget to help. With type="url" specified, some devices will offer a ".com" key on the primary keyboard layout. In addition, some browsers will respond with a prompt if the user tries to submit the form with content in the field that's not a valid URL.

Live example:

Code example:

<input type="url" name="example-url">

Input type="week"

Similar to type="month" except, if a week picker is provided, only the week number and year is inserted into the text field. Weeks are numbered from the first week of the year through the last week of the year.

Live example:

Code example:

<input type="week" name="example-week">

As you were able to see, not all browsers yet recognize all text input types.

But not to worry. If a browser doesn't recognize an input type, it generally assumes the default type, type="text".

The new input types can make things easier for both the site owner and the user.

For the site owner, less error-checking code needs to be implemented and more of the content submitted with the form is correctly formatted. For the site user, widgets and rearranged keyboards can make filling out a form less arduous and, perhaps, even fun.

(This article first appeared in Possibilities ezine.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.