{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

HTML5 Form Input Types Tutorial

HTML5 defines 13 new form field types.

Browser Support for HTML5 Form Input Types

NOTE: if a web browser does not support HTML5 form input types, the input fields will simply behave as regular text fields.

Input Type IE Firefox Opera Chrome Safari
email No No 9.0 No No
url No No 9.0 No No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
date pickers No No 9.0 No No
search No No 11.0 No No
color No No 11.0 No No

Input Type: email

The HTML5 email type is meant to be used for input fields that should contain an email address.

An example of the code for an HTML5 email field type is shown below.

<form action="process.php" method="post"> Email: <input type="email" name="user_email" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 email field type appears in this web browser is shown below.

Email:

On web browsers that support HTML5 input fields, the value of the email field is automatically validated when the form is submitted.

There is no reason NOT to use HTML5 form email field types. The reason is that all web browsers support "type='email'". Web browses that do not recognize "type='email'" will simply treat it as "type='text'" instead and render the input field as a plain text field.

To use the HTML5 email field type, the type attribute of the input type attribute should be "email", instead of the type attribute "text" which is used in standard HTML forms.

Each web browser that supports the HTML5 input field type "type='email'", may do so differently when compared to other web browsers. For example, the web browser Opera styles the form field with a small email icon while Chrome and Safari render an email field as a simple text field and users of Chrome or Safari will not know the difference unless they view the the page source code.

Apple's Iphone web browser recognizes many of the HTML5 form input types, including, "type='email'". The Iphone does not have a physical keyboard. Instead, it has an on-screen keyboard that pops up when needed, for example, when trying to fill out a form.

When the Iphone regonizes that a form input field is an email with a "type='email'" attribute, the on-screen keyboard includes keys for the @ sign and the period (.) as shown in the example image below.

iphone keyboard

Forms that do not include the HTML5 email type attribute will see an on-screen keyboard that does not include keys for the @ sign or the period (.) as shown in the example image below.

iphone keyboard

Input Type: url

The HTML5 url input type is meant to be used for input fields that should contain a URL address.

The value of the url field is automatically validated by web browsers that support this HTML5 feature when the form is submitted.

An example of the code for an HTML5 url field type is shown below.

<form action="process.php" method="post"> URL: <input type="url" name="url_address" /> <br /> <input type="submit" /> </form>

An example of how and HTML5 url field type appears in this web browser is shown below

URL:

Apple's Iphone web browser recognizes many of the HTML5 form input types, including, "type='url'". The Iphone does not have a physical keyboard. Instead, it has an on-screen keyboard that pops up when needed, for example, when trying to fill out a form.

When the Iphone regonizes that a form input field is an email with a "type='url'" attribute, the on-screen keyboard includes key .

Apple's Iphone web browser recognizes many of the HTML5 form input types, including, "type='email'". The Iphone does not have a physical keyboard. Instead, it has an on-screen keyboard that pops up when needed, for example, when trying to fill out a form.

When the Iphone regonizes that a form input field is an email with a "type='url'" attribute, the on-screen keyboard includes keys for the period (.), the forward slash (/) and the ".com" extension. You can continue to press the ".com" button to choose between other extensions like ".net", ".org" or ".edu".

An example of how the on-screen keyboard looks when an input field with a "type='url' attribute pops up is shown in the example image below.

iphone keyboard

There is no reason NOT to use HTML5 form url field types. The reason is that all web browsers support "type='url'". Web browses that do not recognize "type='url'" will simply treat it as "type='text'" instead and render the input field as a plain text field.

Input Type: number

The HTML5 number input type is meant to be used for fields that should contain a numeric value. It also allows you to set restrictions on what numbers are accepted.

An example of the code for an HTML5 number field type is shown below.

<form action="process.php" method="post"> Number: <input type="number" name="numbers" min="1" max="10" step="2" value="4" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 number field type appears in this web browser is shown below.

Number:

The table below gives a description of each value and its' attribute.

attribute/value attribute description
type="number" Means that this is a number field
min="0" Specifies the minimum acceptable value for this field
max="10" Specifies the maximum acceptable value for this field
step="2" This is based on the minimum acceptable value for this field. It specifies the acceptable number values in the range: 0, 2, 4, ... up to the maximum value
value="4" Is the default value

The following are some things to note. All of these attributes are optional. If you specify a minimum attribute value but not a maximum attribute value, you can specify a minimum attribute but not a maximum attribute. The default step value is 1 and you can omit the step attribute if the value is 1, however, you need to specify the step value if the value will be anything other than 1. If you do not want to specify a default value, the default attribute can be left empty or you can not include the default attribute all together if you want.

Different web browsers will display the HTML5 number type attribute input field differently. For example, the iPhone will display an on-screen keyboard with numbers and symbols as shown in the example image below.

iphone keyboard

There is no reason NOT to use HTML5 form number field types. The reason is that all web browsers support "type='number'". Web browses that do not recognize "type='number'" will simply treat it as "type='text'" instead and render the input field as a plain text field.

Input Type: range

The HTML5 range type should be used for input form fields that should contain a value from a range of numbers.

The HTML5 range type is displayed as a slide bar that contains a given range of numbers on web browsers that fully support this feature. Web browsers that do not fully support this feature will simply display an input field with the default value, if one is given.

An example of the code for an HTML5 range field type is shown below.

<form action="process.php" method="post"> Range: <input type="range" name="points_range" min="1" max="10" value="4" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 range field type appears in this web browser is shown below.

Range:

The HTML5 range attributes, values and value descriptions are listed below.

Attribute Value Description
max number Specifies the maximum valued allowed
min number Specifies the maximum valued allowed
step number Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
value number Specifies the default value

Web browsers that do not fully support this feature will simply treat the HTML5 range input field as "type='text'".

Input Type: date and time pickers

HTML5 allows you to define a way to include a date picker control without having to use a script. HTML5 defines six date and time picker controls, which include: date, month, week, time, date + time, and date + time - timezone.

Unfortunately, at this moment only the web browser Opera version 9.0 supports these features.

The HTML5 date and time input type and description of each is listed below.

Input Type Description
date Selects date, month and year
month Selects month and year
week Selects week and year
time Selects time (hour and minute)
datetime Selects time, date, month and year (UTC time)
datetime-local Selects time, date, month and year (local time)

type="date"

An example of the code for an HTML5 date field type is shown below.

<form action="process.php" method="post"> Date: <input type="date" name="date" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 date field type appears in this web browser is shown below.

Date:

Web browsers that do not fully support this feature will simply treat the HTML5 range input field as "type='text'".

type="month"

An example of the code for an HTML5 month field type is shown below.

<form action="process.php" method="post"> Month: <input type="month" name="month" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 month field type appears in this web browser is shown below.

Month:

Web browsers that do not fully support this feature will simply treat the HTML5 range input field as "type='text'".

type="week"

An example of the code for an HTML5 week field type is shown below.

<form action="process.php" method="post"> Week: <input type="week" name="week" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 week field type appears in this web browser is shown below.

Week:

Web browsers that do not fully support this feature will simply treat the HTML5 range input field as "type='text'".

type="time"

An example of the code for an HTML5 time field type is shown below.

<form action="process.php" method="post"> Time: <input type="time" name="time" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 time field type appears in this web browser is shown below.

Time:

Web browsers that do not fully support this feature will simply treat the HTML5 range input field as "type='text'".

type="datetime"

An example of the code for an HTML5 datetime field type is shown below.

<form action="process.php" method="post"> Date & Time: <input type="datetime" name="date_time" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 datetime field type appears in this web browser is shown below.

Date & Time:

Web browsers that do not fully support this feature will simply treat the HTML5 range input field as "type='text'".

type="datetime-local"

An example of the code for an HTML5 datetime-local field type is shown below.

<form action="process.php" method="post"> Local Date & Time: <input type="datetime-local" name="date_time" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 datetime-local field type appears in this web browser is shown below.

Local Date & Time:

Web browsers that do not fully support this feature will simply treat the HTML5 range input field as "type='text'".

The HTML5 search field type is meant to be used for search fields. The HTML5 search field type behaves like a regular text field, with some web browsers adding some features to the search field.

Some web browsers will display search fields with an HTML5 search field type as a regular text field. In other web browsers, for example, Safari and Chrome round the corners of the search field.

Some other differences are that some web browsers are highlighted with an outer blue colored blur around the search box. Safari also inserts an "x" button on the right side of the search box. Clicking the "x" clears the content of the field.

Web browsers that do not recognize "type='search'" will treat it like "type='text'".

An example of the code for an HTML5 search field type is shown below.

<form> Search: <input type="search" name="search" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 search field type appears in this web browser is shown below.

Search:

Input Type: color

The HTML5 color field type is meant for input fields that should contain a color.

Web browsers that support the HTML5 color type feature, which currently is only Opera version 11, allows you to select a color from a color picker.

An example of the code for an HTML5 color field type is shown below.

<form> Select a Color: <input type="color" name="color" /> <br /> <input type="submit" /> </form>

An example of how an HTML5 color field type appears in this web browser is shown below.

Select a Color:

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends