IT兄弟连 HTML5教程 HTML5表单 多样的输入类型2

4  range

range类型用于包含一定范围内数字值的输入域，跟number一样，我们还可以对数值设置限定，range类型显示为滑动条用法如下：

上述代码使用了range类型输入框，为该类型设置了数值范围为1~100。移动滑动条可以改变数值大小，当点击提交后，弹出该值大小。效果如图1所示：

图1  range的输入类型

5  Date picker

Date picker是日期选择器，HTML5拥有多个可供选取日期和时间的新输入类型。具体选择如表。

表  Date picker新输入类型

下面我们以date为例，我们可以通过日期选择器从日历中选取一个日期，代码如下：

上述代码使用了date类型输入框，效果如图2所示：

图2  date的输入类型

感兴趣的读者，可以使用其它类型的日期选择器，用法与date一致。

6  color

color类型就是一个拾色器，用于规定颜色，该输入类型允许我们从拾色器中选取颜色。它的值为颜色得16进制值。color类型的输入框用法如下：

上述代码使用了color类型输入框，点击后出现拾色器以供我们选取特定的颜色。效果如图3所示：

图3  color的输入类型

选取好颜色后，点击提交按钮，这是会弹出警示框显示该颜色的十六进制值。效果如图4所示：

图4  color的十六进制值