各大网页都要用到输入框,用以提交各类信息。这些功能大部分都是由html中的input来完成的。H中新增段了input属性,这里总结一下input的几种使用类型。
1、url
url类型用于包含url地址的输入域,或者说,用于应该包含url地址的输入域,它在提交表单的时候会自动验证url域的值。
语法实例:
index:<input type="url"name=“user_url”/>
效果如下:
2、number
number类型用于应该包含数值的输入域。
语法示例:
numbers:<input type="number" name="user_name"/>
效果如下:
注:number类型可以设定对所接受数字的限定,在语句中用min或max 来限定。
如:numbers:<input type="number" name="user_name" min="0" max="9"/>
此外,还可以通过step 来限定数字间隔(step=“2”,则合法的数为0,2,4等),而value则用来规定默认值。
3、email
email类型用于应该包含e-mail地址的输入域。同上面两个一样,在提交表单时会自动验证email域的值。
语法示例:
E-mail:<input type="email" name="user_email"/>
效果如下:
4、search
search类型用于搜索域如google搜索,它显示为常规的文本框。
5、Date Pickers
Date Pickers(日期选择器)——H5中有多个可供选取日期和时间的输入类型。
date | 选取日 、月、 年 |
month | 选取月、年 |
week | 选取周和年 |
time | 选取时间(小时和分钟) |
datetime | 选取时间、日、月、年(UTC时间) |
datetime-local | 同上,但是选取的是本地时间 |
以date为例:
Date:<input type="date"name="user_date"/>
效果如下:
6、range
range类型用于应该包含一定范围内数字域的输入域,它显示为滑动条,同number一样,它可以设定对所接受数字的限定。
语法示例:
<input type="range" name="numbers" min="0" max="9"/>
效果如下: