HTML5 - Input（七）
HTML5 Input类型
HTML5 新的Input类型
- clolor
- date
- datetime
- dattetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input类型：color
color类型允许你从一个拾色器中选取颜色：
<P>
从拾色器中选择你喜欢的颜色：
</P>
<input type="color" name="favcolor">
Input类型：date
date类型允许你从一个日期选择器中选择一个日期
<p>
请选择你的生日：
</p>
<input type="date" name="bday">
Input类型：datetime
datetime类型允许你从一个日期选择器选择一个日期（UTC时间）：
<p>
请选择你的生日：
</p>
<input type="datetime" name="bdaytime">
Input类型：datetime-local
datetime-local类型允许你从一个日期选择器选择一个日期和时间（无时区）：
<p>
请选择你的生日：
</p>
<input type="datetime-local" name="bdaytime">
Input类型：email
email类型用于应该包含e-mail地址的输入域
<p>
E-mail：
</p>
<input type="email" name="email">
Input类型：month
month类型允许你选择一个月份
<p>
选择年月：
</p>
<input type="month" name="bdaymonth">
Input类型：number
number类型用于应该包含数值的输入域
<p>
定义一个数值输入域（数值1到10）：
</p>
<input type="number" name="quantity" min="1" max="10">
使用如下属性来规定对数字类型的限定：
| 属性 | 描述 |
|---|---|
| disable | 规定输入字段是禁用的 |
| max | 规定允许的最大值 |
| maxlength | 规定输入字段的最大字符长度 |
| min | 对顶允许的最小值 |
| pattern | 规定用于验证输入字段的模式 |
| readonly | 规定输入字段的值无法修改 |
| required | 规定输入字段的值是必须的 |
| size | 规定输入字段中的可见字符数 |
| step | 规定输入字段的合法数字间隔 |
| value | 规定输入字段的默认值 |
Input类型：range
range类型用于应该包含一定范围内数字值得到输入域
<p>
定义一个不需要非常精确的数值（类似于滑块控制）：
</p>
<input type="range" name="points" min=="1" max="10">
Input类型：search
search类型用于搜索域
<p>
百度一下：
</p>
<input type="search" name="baidusearch">
Input类型：tel
tel类型用于定义电话号码输入域
<p>
电话号码：
</p>
<input type="tel" name="usrtel">
Input类型：time
time类型允许你选择一个时间
<p>
选择一个时间：
</p>
<input type="time" name="usr_time">
Input类型：url
url类型用于应该包含 URL 地址的输入域
<p>
添加一个网址：
</p>
<input type="url" name="homepage">
Input类型：week
week类型允许你选择周和年
<p>
选择周和年：
</p>
<input type="week" name="week_year">
Input类型实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input类型</title>
</head>
<body>
选择一种颜色：<input type="color" name="color"><br />
选择你的生日：<input type="date" name="date"><br />
选择你的生日：<input type="datetime" name="datetime"><br />
选择你的生日：<input type="datetime-local" name="datetime-local"><br />
请输入邮箱：<input type="email" name="email"><br />
选择你的生日：<input type="month" name="month"><br />
请输入数值：<input type="number" name="number" min="1" max="10" step="3"><br />
请选择一个数值：<input type="range" name="range" min="1" max="20" step="2"><br />
搜索：<input type="search" name="search"><br />
请输入你的电话：<input type="tel" name="tel"><br />
请输入时间：<input type="time" name="time"><br />
请添加一个网址：<input type="url" name="url"><br />
选择你的生日：<input type="week" name="week">
</body>
</html>
