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

效果如下：



 

---------------------

本文来自 一只野生饭卡丘 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/Searchin_R ... 930?utm_source=copy

奈斯