HTML5 Input Type Tutorial

As with many other HTML5 tags, not all browsers support all the new <input> types. In browsers that do not support the new HTML5 <input> types, the inputs usually appear as a simple text field. The latest version of the Opera browser supports all the new <input> types. This tutorial will include pictures of what these inputs will look like in the Opera browser. To get a clear sense for how these tags display in the browser, it is recommended that you download and use Opera browser for the tutorial.

Date and Time Inputs

 

HTML5 introduces six new <input> types for date and time.

The simple date type creates an input field with a drop down calendar which you can use to specify date month and year.

The markup looks like this:

Date: <input type= "date" name = "simple_date" />

[Note: In all the examples in this tutorial the name attribute can be anything.]

Here is what it looks like as field

Here is what it looks like with the calendar dropdown.

The datetime types lets you go a step further and allows your users to select a date and a time. The date section includes a calendar, and the time section has up down keys to select time using hour, minute, second and fraction of a second in UTC.

Here is what the markup looks like

Date and Time: <input type= "datetime" name = "Time_Date" />

Here is what the display looks like (note the UTC label automatically set by the browser)

Here is what it looks like with the dropdown calendar

The datetime-local type allows you to set a date input and a time input in the user’s local time instead of UTC.

Here is the markup

<input type = "datetime-local" name= "LocalTime" />

Here is what the display looks like. (Note there is no UTC in the display)

Here is what the dropdown looks like

The month type lets you set an input for selecting month and year from a dropdown calendar.

Here is what the markup looks like:

<input type= "month" name= "month_name" />

Here is what the display looks like

Here is what the calendar looks like.

The week type lets you set an input field for selecting the week of a given year, from a calendar.

Here is the markup.

<input type = "week" name= "year_week" />

Here is what the display looks like

Here is what the calendar looks like. As you can see, you are selecting a specific week in a given year.

The time input type allows you set a field for selecting time.

Here is the markup

<input type = "time" name= "Clock" />

Here is what it looks like

New Text Fields

HTML5 introduces several new <input> text fields for search, URL, telephone numbers and email. As such these fields don’t display any differently than a regular text input. However, these tags new tags make it easier to validate the inputs. You no longer have to depend on JavaScript to validate your input for you.  With HTML5 this part of the validation will be handled by the browsers. We will see more in a tutorial on validation.

Here is what the markup looks like.

Email: <input type= "email" name= "webmail" />

Telephone number: <input type="tel" />

URL: <input type= "url" name= "web_location" />

Search: <input type= "search" name = "site_search" />

Here is what the display looks like.

 

Additional types for numbers and color selection

 

The color type allows you to set an input for selecting color using a color picker.

Here is the markup.

<input type= "color" name = "color_selector" />

Here is what display looks like.

Here is the drop down.

The number type allows you to set an input field to select numbers fixed at certain values. The values can be selected using a spinner control. The range type is another number input type which allows users to select number inputs using a slider control.

These <input> types include an additional set of attributes to set specific values

Attribute	Value	Description
max	number	The maximum value
min	number	The minimum value
step	number	Sets the intervals between values
value	number	The default value

 

Here is what the markup for number type looks for a maximum value of 30, a minimum value of 0, to move in increments of 5 and set to a default value of 10.

<input type = "number" min = "0" max = "30" step = "5" value =  "10" />

Here is what the display looks like.

Here is what the markup for range type.

<input type = "range" min = "0" max = "30" step = "5" value = "10" />

Here is what the display looks like.