HTML5 New Input Types

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

This chapter covers the new input types:

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

---

Browser Support

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	5.1
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	5.1
search	No	4.0	11.0	10.0	No
color	No	No	11.0	12	No

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

---

Input Type – email

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

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

E-mail: <input type=”email” name=”user_email” />

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

 

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.

Homepage: <input type=”url” name=”user_url” />

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

 

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:

Points: <input type=”number” name=”points” min=”1″ max=”10″ />

 

Use the following attributes to specify restrictions for the number type:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value 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

 

 

Tagged with: html • html5 • input • input types • number • types
 

This entry was posted on Monday, July 19th, 2010 at 10:00 AM and is filed under html5, input, input types, types, web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.