{Tutorial}HTML5 Input Types.Step 31.

[MrHotFire]

HTML5 New Input Types

 

HTML5 has several new input types for forms. These new features allow better input control and validation.

 

This chapter covers the new input types:

 

    color

    date

    datetime

    datetime-local

    email

    month

    number

    range

    search

    tel

    time

    url

    week

 

Note: Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.

Input Type: color

 

The color type is used for input fields that should contain a color.

Select your favorite color: <input type="color" name="favcolor">

Input Type: date

The date type allows the user to select a date.

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

Input Type: datetime

 

The datetime type allows the user to select a date and time (with time zone).

Birthday (date and time): <input type="datetime" name="bdaytime">

Input Type: datetime-local

The datetime-local type allows the user to select a date and time (no time zone).

Birthday (date and time): <input type="datetime-local" name="bdaytime">

Input Type: email

E-mail: <input type="email" name="usremail">

Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).

Input Type: month

 

The month type allows the user to select a month and year.

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

Input Type: number

 

The number type is used for input fields that should contain a numeric value.

 

You can also set restrictions on what numbers are accepted:

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

Use the following attributes to specify restrictions:

 

    max - specifies the maximum value allowed

    min - specifies the minimum value allowed

    step - specifies the legal number intervals

    value - Specifies the default value

 

Input Type: range

 

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

 

You can also set restrictions on what numbers are accepted.

<input type="range" name="points" min="1" max="10">

Input Type: search

 

The search type is used for search fields (a search field behaves like a regular text field).

Search Google: <input type="search" name="googlesearch">

Input Type: tel

Telephone: <input type="tel" name="usrtel">

Input Type: time

 

The time type allows the user to select a time.

Select a time: <input type="time" name="usr_time">

Input Type: url

 

The url type is used for input fields that should contain a URL address.

 

The value of the url field is automatically validated when the form is submitted.

Add your homepage: <input type="url" name="homepage">

Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).

Input Type: week

 

The week type allows the user to select a week and year.

Select a week: <input type="week" name="week_year">

HTML5 <input> Tag

<input> 	Defines an input control

 

 

Credits Olympus,Internet,ME.