前端——HTML5之input属性

各大网页都要用到输入框，用以提交各类信息。这些功能大部分都是由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"/>

效果如下：