Input elements are very important for designing a form. HTML5 has introduced several new input types. These new types offer input controls and validation in simpler manner.

In this article, we have discussed about the following new HTML5 input types:

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

Web browser support:

All these HTML5 input types are not supported by all web browsers. But hopefully all browsers will support these new input types in near future. If you use these input types in your HTML5 document and these are not supported by your web browser then regular text fields will be displayed in place of unsupported input types.

Input Type – date

HTML5 date type input element allows user to select a date. Presently date type is supported by Google Chrome, Opera and Safari web browsers.

Example:

Birthday: <input type="date" name="dob">

Input Type – datetime

HTML5 datetime type input element allows user to select a date with time (hour and minute). It always shows ‘UTC’ timezone which can’t be modified. Presently datetime type is supported by Opera and Safari web browsers.

Example:

Journey Start Date: <input type="datetime" name="journey_start_date">

Input Type – datetime-local

HTML5 datetime-local type input element allows user to select a date with time (hour and minute) for local timezone. It does not show any timezone. Presently datetime-local type is supported by Opera and Safari web browsers.

Example:

Birthday with Time: <input type="datetime-local" name="dob">

Input Type – time

HTML5 time type input element allows user to select a time (hour and minute). Presently time type is supported by Google Chrome, Opera and Safari web browsers.

Example:

Event Start Time: <input type="time" name="event_start_time">

Input Type – month

HTML5 month type input element allows user to select a month with year. Presently month type is supported by Google Chrome, Opera and Safari web browsers.

Example:

Birthday (month and year): <input type="month" name="dob">

Input Type – week

HTML5 week type input element allows user to select a week with year. Presently week type is supported by Google Chrome, Opera and Safari web browsers.

Example:

Event Week: <input type="week" name="event_week">

Input Type – color

HTML5 color type input element allows user to select a color from predefined color palate. Presently color type is supported by Google Chrome and Opera web browsers.

Example:

Select Color: <input type="color" name="pick_color">

Input Type – email

HTML5 email type input element is used to create input field which specifically takes an email address as value. It also provides default client-side email address validation. Presently email type is supported by latest versions of all web browsers except Safari.

Example:

Email Address: <input type="email" name="user_email">

Input Type – url

HTML5 url type input element is used to create input field which specifically takes a web address or URL as value. It also provides default client-side URL validation. Presently url type is supported by latest versions of all web browsers except Safari.

Example:

Website Address: <input type="url" name="website_address">

Input Type – tel

HTML5 tel type input element is used to create input field which specifically takes a telephone number as value. Unfortunately at present time no web browser supports tel type input element.

Example:

Phone Number: <input type="tel" name="phone_number">

Input Type – number

HTML5 number type input element is used to create input field which takes a numeric value. To enforce restrictions, the following attributes can be used:

  • max – It specifies the maximum value that is allowed
  • min – It specifies the minimum value that is allowed
  • step – It specifies the legal number intervals

Presently number type is supported by latest versions of all web browsers except Firefox.

Example:

Age (from 1 to 18): <input type="number" name="age" min="1" max="18">

Input Type – range

HTML5 range type input element is used to create input field which takes a numeric value from a specified range of numbers. To enforce restrictions, the following attributes can be used:

  • max – It specifies the maximum value that is allowed
  • min – It specifies the minimum value that is allowed
  • step – It specifies the legal number intervals

Presently range type is supported by latest versions of all web browsers except Firefox.

Example:

Marks (0 - 80): <input type="range" name="marks" min="0" max="80">

Input Type – search

HTML5 search type input element is used to create search field. It is quite similar to regular text type input element. Presently search type is supported by Google Chrome and Safari web browsers.

Example:

Search: <input type="search" name="search_field">

S Ghosh

Leave a Reply

Your email address will not be published. Required fields are marked *

8 − three =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>