H5增强表单input标签、数据列表和属性

1、增强表单input的功能 

下面是H5新增的一些type属性：

接下来我们用代码来演示一下它们的用法：

（1）type=“color”颜色属性值：

 结果：

 这个单独的type=“color”input标签是没有什么意义的，要配合form标签使用，这个颜色属性值，结果如上面所示，可以选择颜色，可以通过吸管工具或者直接点击颜色区域选择，这个功能是为了让用户选择自己想要的颜色，然后提交给后端的，看下面点击提交以后，网页的网址就会加上对应颜色值：

默认是黑色，网址是：

 选择一个颜色以后，点击提交，网址是：

（2）type=“email”邮箱属性值

代码：

 结果：

 填入正确的邮箱格式，一定要加@，不然网页就会提示你邮箱格式不正确，填好了，点击提交，此时的网址就会加上你的邮箱信息，当然是必须要在input里写上name属性才可以。

（3）type=“url”网址属性值

代码：

 结果：

 这个网址输入的时候，一定要输入完整的网址，要加上前面的http/https协议，不然他就会提示你请输入网址。

（4）type=“tel”电话号码属性值

代码：

 结果：

 这个tel属性值，在手机端可以用，在电脑端因为能输入字母所以就没什么用

（5）type=“range”滑块属性值

代码：

 结果：

 range是滑块属性值，接下来是属性介绍，min是滑块最左边代表的值，max是滑块最右边代表的值，默认滑块最左边是0，最右边是100，现在设置了以后，滑块就从min到max了，那个value设置的是初始值，step是步长，从左到右滑动滑块默认步长是1，现在设置了步长，那滑块滑一次就是10,。

（6）type=“number”数字类型属性值

代码：

 结果：

 只写上面这个属性的话，结果可以输入多个数字，点击右边那个上下的箭头可以变大变小，但是它也有一些其他的属性值，代码如下：

 结果：

 设置了min和max值，那输入框里的数字就只能在这两个值之间，步长和value和上面一样，不解释了

（7）type=“search”属性值

 结果：

 这个没什么好讲的，就是可以输入东西，就多了个后面的×号

（8）type=“date”日期属性值（最重要）

 结果：

 结果运行出来就会让你选择日期，type=“datetime-local”这个属性从年具体到分钟选择。

2、增强表单-数据列表

这个选项列表是比如我们在淘宝搜索框输入了一些词，然后搜索框下面会出现一些词供你选和参考，这就是数据列表。

图示：

 代码：

 结果：

 这样在搜索框里搜索“手”，就会出现数据列表让你选择，上面那个datalist标签和input标签是通过id=“mylist”联系起来的。

3、属性问题

autofocus是聚焦的属性，作用上面图中有解释，只能一次用在一个标签身上；required属性是验证输入不能为空；pattern属性结合正则表达式，检查其内容是否符合给定的格式。

代码演示：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！