HTML5 New Form Input Types

HTML5 gives us input types that provide for more data-specific UI elements and native data validation. HTML5 has a total of 13 new input types:

• ■ search
• ■ email
• ■ url
• ■ tel
• ■ datetime
• ■ date
• ■ month
• ■ week
• ■ time
• ■ datetime-local
• ■ number
• ■ range
• ■ color

The search input type expects a search term. This input type (type="search") provides a search field—a one-line text input control for entering one or more search terms. It displays a text input field that may visually differ from that of a regular text field, based on the stylistic conventions of the platform.

<form id="search" method="get">
    <input type="search" id="s" name="s">
    <input type="submit" value="Search">
</form>

Safari on MacOS displays the search field with rounded, instead of boxed, corners. Both Safari and Chrome display an icon within the field to delete the current value.

The search input type, like all the new input types, appears as a regular text box in non-supporting browsers.

The email type (type="email") is used for specifying one or more email addresses. It supports the Boolean multiple attribute, allowing for multiple, comma-separated email addresses.

<form>
    <fieldset>
        <legend>Contact Information</legend>
        <p>
            <label>E-mail address
                <input type="email" name="email">
            </label>
        </p>
    </fieldset>
    <p>
        <button type="submit">Submit</button>
    </p>
</form>

Change the input type from text to email, there will be no visible change in the user interface; the input still looks like a plain text field. However, there are differences behind the scenes.

When using an ios device and when you focus on email field keyboard optimized for email entry (with a shortcut key for the @ symbol).

Firefox, Chrome, and Opera also provide error messaging for email inputs: if you try to submit a form with content unrecognizable as one or more email addresses.

The url input (type="url") is used for specifying a web address. Like email, it will display as a normal text field. On many touch screens, the on-screen keyboard displayed will be optimized for web address entry, with a forward slash (/) and a “.com” shortcut key.

<form>
    <fieldset>
        <legend>Contact Information</legend>
        <p>
            <label>Web site
                <input type="url" name="website">
            </label>
        </p>
    </fieldset>
    <p>
        <button type="submit">Submit</button>
    </p>
</form>

Opera, Firefox, and WebKit support the url input type, reporting the input as invalid if the URL is incorrectly formatted. Only the general format of a URL is validated, So, for example, xyz://example.xyz will be considered valid, even though xyz:// isn’t a real protocol and .xyz isn’t a real top-level domain.

The tel input type (type="tel") is used for specifying the telephone numbers, Unlike the url and email types, the tel type doesn’t enforce a particular syntax or pattern. Letters and numbers—indeed, any characters other than new lines or carriage returns—are valid.

<form>
    <fieldset>
        <legend>Contact Information</legend>
        <p>
            <label>Telephone number
                <input type="tel" name="phone">
            </label>
        </p>
    </fieldset>
    <p>
        <button type="submit">Submit</button>
    </p>
</form>

The reason for this: all over the world countries have different types of valid phone numbers, with various lengths and punctuation and impossible to specify a standard format.

For example, in the USA, +1(415)555-1212 is just as well understood as 415.555.1212.

If we need only specific format use the pattern attribute or the setCustomValidity method to provide for client-side validation.

The number type (type="number") provides an input for entering a number. Usually, this is a “spinner” box, where you can either enter a number or click on the up or down arrows to select a number.

<form>
    <p>
        <label>Quantity
            <input type="number" name="quantity">
        </label>
    </p>
    <p>
        <button type="submit">Submit</button>
    </p>
</form>

The number input type restricts the value to a valid number – a floating point number, to be specific.If the user enters a value that is not valid then the user agent warns the user and the form data is not submitted. On some touch-screen devices, focusing on a number input type will bring up a number touch pad (rather than a full keyboard).

The number input has min and max attributes to specify the minimum and maximum values allowed. It is recommend to use these, otherwise the up and down arrows might lead to different (and very odd) values depending on the browser.

You can also provide a step attribute, which determines the increment by which the number steps up or down when clicking the up and down arrows. The min, max, and step attributes are supported in Opera and WebKit.

The range input type (type="range") displays a slider control in browsers that support it (currently Opera and WebKit). As with the number type, it allows the min, max, and step attributes. The difference between number and range, according to the spec, is that the exact value of the number is unimportant with range.

The default value of a range is the midpoint of the slider—in other words, halfway between the minimum and the maximum.

<form>
<p><label>Volume <input type="range" name="volume" min="0" max="10" step=".5" value="5"></label></p>
</form>

Like the number input type, you can specify minimum and maximum values using the min and max attributes, and an increment value using the step attribute. These could be used with range to replace the radio buttons commonly used for scaled ratings, such as satisfaction rankings.

The range input type is useful in cases of relative or subjective input, such as assigning a rating to an event or product.

If a user agent/ browser does not recognize this input type, it displays a text input field instead.

The color input type restricts the value to a valid RGB value in hexadecimal format including the number sign or octothorpe, “#”, displayed before the six digits. The HTML 5 specification prescribes a color well control for this input type, but so far only Opera has implemented this control.

<form>
	<p><label>Background color <input type="color" name="bg"></label></p>
	<p><label>Foreground color <input type="color" name="fg"></label></p>
	<p><button type="submit">Submit</button></p>
</form>

WebKit browsers that support color, like Chrome and Safari Safari, render a text input field but successfully validate entries and indicate whether the color is valid, and prohibit form submission if the value is not valid but don’t provide a color picker yet.

HTML 5 provides a number of new input types to assist in date and time entry. This first solution uses the input element with HTML5 type value of datetime to display both a date-picker widget and time spinner control in combination

There are several new date and time input types, including date, datetime, datetime-local, month, time, and week. All date and time inputs accept data formatted according to the ISO 8601 standard.

<form>
	<p><label>Appointment Date and Time <input type="datetime" name="dateAndTime"></label></p>
	<p><button type="submit">Submit</button></p>
</form>

<form>
    <fieldset>
        <legend>Appointment Request</legend>
            <p><label>Date <input type="date" name="date"></label></p>
            <p><label>Time <input type="time" name="time"></label></p>
    </fieldset>
    <p>
        <button type="submit">Submit</button>
    </p>
</form>

This comprises the date (year, month, and day), but no time; for example, 2004-06-24.

Only includes the year and month; for example, 2012-12.

This covers the year and week number (from 1 to 52); for example, 2011-W01 or 2012-W52.

A time of day, using the military format (24-hour clock); for example, 22:00 instead of 10.00 p.m.

This includes both the date and time, separated by a “T”, and followed by either a “Z” to represent UTC (Coordinated Universal Time), or by a time zone specified with a + or - character. For example, “2011-03-17T10:45-5:00” represents 10:45am on the 17th of March, 2011, in the UTC minus 5 hours time zone (Eastern Standard Time).

Identical to datetime, except that it omits the time zone.

The most commonly used of these types is date. The specifications call for the browser to display a date control, yet at the time of writing, only Opera does this by providing a calendar control.

Two new input element attributes, the min and max attributes, can limit the range of dates and times that users can select. This is useful in cases where you don’t want users to select appointment dates or times in the past or select birthdates in the future as given below.

You can also include the step attribute with the date and time input types. For example, step="6" on month will limit the user to selecting either January or July.

<form>
    <fieldset>
        <legend>Appointment Request</legend>
        <p><label>Date <input type="date" name="date" min="2011-03-15" max="2012-03-14"></label></p>
        <p><label>Time <input type="time" name="time" min="08:00" max="18:00"></label></p>
    </fieldset>
    <p>
        <button type="submit">Submit</button>
    </p>
</form>