表单2.0之Input标签新增类型详解
HTML5的新特性扩展了 input 标签的类型，使得表单组件更丰富。
下述示例代码使用了 HTML5 提供的表单 2.0 中的 input 类型：
| 代码如下 | |
| <form> Email:<input type="email"><br> 搜索:<input type="search"><br> URL地址:<input type="url"><br> 电话号码:<input type="tel"><br> 数字类型:<input type="number" min="18" max="50" step="2"><br> 范围类型:<input type="range" min="0" max="10" step="2" value="10"><br> 颜色类型:<input type="color"><br> 日期类型:<input type="date"><br> <input type="submit"> </form> | |
email类型
email 类型是专门用于输入 email 地址的文本框。
如果输入内容不是 email 地址，则不允许提交，并提示错误信息。效果如下图所示：
根据上图效果，总结 email 类型的规则是：提交表单时，检查 email 类型的文本框中是否包含 @ 符号。
值得注意的是： email 类型的文本框并不能检查 email 地址是否真实存在。
<input type="email" />
```
### url类型
`url` 类型是专门用于输入 `url` 地址的文本框。
如果输入内容不是 `url` 地址，则不允许提交，并提示错误信息。效果如下图所示：
根据上图效果，总结 `url` 类型的规则是：提交表单时，检查 `url` 类型的文本框中是否包含 `http://` 符号。
```html
<input type="url" />
search类型
search 类型是专门用于输入搜索关键词的文本框。
在移动设备中，当 search 类型的元素获取焦点时，键盘的“前往”会改为“搜索”字样。效果如下图所示：
iPhone设备：
Android设备：
值得注意的是：在PC端浏览器 search 类型与 text 类型外观相同。
<input type="search" />
tel类型
tel 类型是专门用于输入电话号码的文本框。
在移动设备中，当 tel 类型的元素获取焦点时，键盘使用数字面板。效果如下图所示：
iPhone设备：
Android设备：
值得注意的是：该元素没有特殊的校验规则，不强制输入数字。
<input type="tel" />
number类型
number 类型是专门用于输入数字的文本框。
如果输入内容不是数字，则不允许提交，并提示错误信息。效果如下图所示：
根据上图效果，总结 number 类型的规则是：提交表单时，检查 number 类型的文本框中是否为数字。
属性名称 类型 描述
min Number 允许输入的最小数值。
max Number 允许输入的最大数值。
step Number 设置增加或减少的间隔。（步长）
<input type="number" min="0" max="100" step="5" />
date类型
date 类型是专门用于输入日期，提供日期选择控件。
当用户单击向下箭头按钮时浏览器页面中显示日历。效果如下图所示：
<input type="date" />
range类型
range 类型是专门用于输入一定范围内数字值。
range 类型在HTML页面显示为滑动条。效果如下图所示：
属性名称 类型 描述
min Number 允许输入的最小数值。
max Number 允许输入的最大数值。
step Number 设置增加或减少的间隔。（步长）
value Number 设置滑动条的当前值。
<input type="range" min="0" max="100" step="5" value="50" />
color类型
color 类型是专门用于选取颜色。
color 类型提供了一个颜色选取器。效果如下图所示：
显示效果：
颜色选取器：
color 类型的显示效果，当用户单击 color 类型弹出显示颜色选取器。
<input type="color" />
