HTML5 Input Types

来源：互联网发布：sql with cte as 编辑：程序博客网时间：2024/04/27 07:26

http://www.w3schools.com/html/html5_form_input_types.asp

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

Not all 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.

<!DOCTYPE html><html><body><form action="demo_form.asp">  Select your favorite color: <input type="color" name="favcolor"><br>  <input type="submit"></form></body></html>

Not all 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: date

The date type allows the user to select a date.

<!DOCTYPE html><html><body><form action="demo_form.asp">  Birthday: <input type="date" name="bday">  <input type="submit"></form></body></html>

Birthday:
想不到date类型在chrome中显示效果那么不好，在ie8中就直接是普通的text

Input Type: datetime

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

<!DOCTYPE html><html><body><form action="demo_form.asp">  Birthday (date and time): <input type="datetime" name="bdaytime">  <input type="submit"></form></body></html>

Birthday (date and time):

Input Type: datetime-local

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

<!DOCTYPE html><html><body><form action="demo_form.asp">  Birthday (date and time): <input type="datetime-local" name="bdaytime">  <input type="submit"></form></body></html>

Birthday (date and time):

Input Type: email

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

<!DOCTYPE html><html><body><form action="demo_form.asp">  E-mail: <input type="email" name="email">  <input type="submit"></form><p><b>Note:</b> type="email" is not supported in Internet Explorer 9 and earlier versions.</p></body></html>

Note: type="email" is not supported in Internet Explorer 9 and earlier versions.

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.

<!DOCTYPE html><html><body><form action="demo_form.asp">  Birthday (month and year): <input type="month" name="bdaymonth">  <input type="submit"></form></body></html>

Birthday (month and year):

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:

<!DOCTYPE html><html><body><form action="demo_form.asp">  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">  <input type="submit"></form><p><b>Note:</b> type="number" is not supported in Internet Explorer 9 and earlier versions.</p></body></html>

Note: type="number" is not supported in Internet Explorer 9 and earlier versions.

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: Try it yourself

<!DOCTYPE html><html><body><form action="demo_form.asp" method="get"><input type="number" name="points" min="0" max="10" step="3" value="6"><input type="submit"></form></body></html>

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.

Define a control for entering a number whose exact value is not important (like a slider control):

<!DOCTYPE html><html><body><form action="demo_form.asp" method="get">Points: 0<input type="range" name="points" min="1" max="10">10<input type="submit"></form><p><b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions.</p></body></html>

Note: type="range" is not supported in Internet Explorer 9 and earlier versions.

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: search

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

Define a search field (like a site search, or Google search):

<!DOCTYPE html><html><body><form action="demo_form.asp">  Search Google: <input type="search" name="googlesearch"><br>  <input type="submit"></form></body></html>

Input Type: tel

Define a field for entering a telephone number:

<!DOCTYPE html><html><body><form action="demo_form.asp">  Telephone: <input type="tel" name="usrtel"><br>  <input type="submit"></form></body></html>

Input Type: time

The time type allows the user to select a time.
Define a control for entering a time (no time zone):

<!DOCTYPE html><html><body><form action="demo_form.asp">  Select a time: <input type="time" name="usr_time">  <input type="submit"></form></body></html>

Select a 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.

Define a field for entering a URL:

<!DOCTYPE html><html><body><form action="demo_form.asp">  Add your homepage: <input type="url" name="homepage"><br>  <input type="submit"></form><p><b>Note:</b> The type="url" is not supported in Internet Explorer 9 and earlier versions.</p></body></html>

Note: The type="url" is not supported in Internet Explorer 9 and earlier versions.

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.

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

<!DOCTYPE html><html><body><form action="demo_form.asp">  Select a week: <input type="week" name="year_week">  <input type="submit"></form></body></html>