HTML5 Input Types / PDF

 Sample of the pdf document :

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.

Example

Select a color from a color picker:

Select your favorite color: <input type="color" name="favcolor">Try it yourself »

---

Input Type: date

The date type allows the user to select a date.

Example

Define a date control:

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

---

Input Type: datetime

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

Example

Define a date and time control (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).

Example

Define a date and time control (no time zone):

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

---

Input Type: email

The email type is used for input fields that should contain an e-mail address.

Example

Define a field for an e-mail address (will be automatically validated when submitted):

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.

Example

Define a month and year control (no time zone):

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:

Example

Define a numeric field (with restrictions):

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

Try an example with all the restriction attributes: 

---

Input Type: range

The range type is used for inpu.......

Click here for  Download PDF / FREE