HTML5 表单应用 输入型控件

    HTML5拥有多个新的表单输入型控件，这些新特性提供了更好的输入控制和验证，下面就来为大家介绍一下这些新的表单输入型控件。

    1.Input类型-email

    email类型用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值，代码实例如下：

    E-mail:<input type="email" name="email_url" />

2.Input类型-url

    url类型用于应该包含url地址的输入域。在提交表单时，表单会自动验证url域的值，代码实例如下:

    Home-page: <input type="url" name="user_url" />

3.Input类型-number

number类型用于应该包含数值的输入域。还能够设定对所接受数字的限定，代码实例如下：

points: <input type="numbert" name="points" max="10" min="1"/>

请使用如表所示的属性来规定对数字类型的限定。

4.Input类型-range

    range类型用于应该包含一定范围内数字值的输入域。range类型在页面中显示为可移动的滑动条，还能够设定对所接受数字的限定，代码实例如下：

    <input type="range" min="2" max="9" />

请使用如表所示的属性来规定对数字类型的限定。

5.Input类型-Date Pickers (日期选择器）

    HTML5拥有多个可供选取曰期和时间的新输入类型，包括：

© date：选取日、月、年。

© month：选取月、年。

© week：选取周、年。

© time：选取时间（小时和分钟）。

© datetime：选取时间、日、月、年（UTC时间）。

© datetime-local：选取时间、日、月、年（本地时间）。

如果我们想要从日历中选取一个日期，代码如下：

Date: 〈input type*3"date" xiame^Hdate" />

6.Input类型-search

    search类型用于搜索域，开发者可以用在大名鼎鼎的百度搜索。search域在页面中显示为常规的单行文本输入框。

7.Input 类型-color

color类型用于颜色，可以让用户在浏览器中直接使用拾色器找到自己想要的颜色。color会在页面中生成一个允许用户选取颜色的拾色器。

代码实例如下：

color: <input type="color" name="color_type" />