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

c3d4d2f9ea5641f7b9e92fba4fee1acb.jpg

 

4  range

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

dc493949eb2e48d99cbcbc02e0d8bbb8.jpg

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

51748330dfe44629b20d0477bf3a6508.jpg

图1  range的输入类型

 

5  Date picker

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

表  Date picker新输入类型

4ca7a264fc74493b9fb843e44f8282f2.jpg

 

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

088c311c375a466c9a07fd0912ceb5d2.jpg

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

f618a2c4662345c993c070d1fc91c46f.jpg

图2  date的输入类型

 

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

 

6  color

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

30b84dcfedd542039304250d99987405.jpg

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

b155c2efcafb4d008541b1cc6aff6a08.jpg

图3  color的输入类型

 

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

d59f9645400a4f82bd8b2addc59a8d73.jpg

图4  color的十六进制值

posted on 2019-10-17 09:01  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航