H5新增表单元素和表单验证

H5新增的表单元素

新增的type类型：
1、emaile
用来验证输入的字符串是否是email地址的格式，若不是，则不允许提交;

注：即检测输入内容是否含有@符号且@符号前后都必须有内容，但是它并不验证email是否存在。可以为空，除非用required属性（验证输入不能为空）；此外它还允许文本框内输入一串以逗号分隔的email地址。
2、url
用来验证输入的内容是否是URL地址，不是则不允许提交；

注：即url规定输入内容必须含有http://或https://且其后必须有内容，同样，url并不验证输入的地址是否存在；
3、number
专门用来输入数字的文本框，具有min,max以及step的属性；



注：规定输入内容必须是纯数字（谷歌中设置number类型后其他字符根本无法输入），且可以配合min和max规定数字的最下和最大值；
4、range
是用来只输入一段范围内数字的文本框，表现形式为一个拖动框，具有min和max以及step属性，可以指定拖到步幅；

5、color
可以供用户自主选择背景颜色的文本框（默认为黑色）

6、search
用来搜索的文本框，为用户提供清空效果

8、date pickers
(date,month,week,time,datatime,datime-local)
多个可供选择日期和时间的新输入类型；
date:

此类类型存在许多兼容性问题，此处不再一一叙述。

H5新增的表单验证

1、placeholder（常用）
文本框未输入状态时的提示信息，对比于value属性，placeholder的提示信息在输入内容时会消失，而value的提示还需要用户手动删去；

2、autofocus
给文本框、选择框或者按钮控件加上后，该控件会自带聚焦，但是自动聚焦的控件一个页面只能有一个，比如百度首页的搜索框；


4、autocomplete
autocomplete=“on/off” on时可对之前提交的信息进行自动记忆，且生成提示信息：

注：使用autocomplete时，该表单必须要有name属性。
5、required
验证输入不能为空；


5、min max step(数字间隔) 已及maxlength(限制输入内容的长度，是字符的个数，而不是字节)

6、novalidate
取消验证；即在提交白丹时，不验证form或input域；

比如这里我们对form添加novalidate属性，input的required则不再验证，即使为空也不会提示。
7、datelist
做提示信息用的 必须和list属性结合使用(可以添加label属性)：

效果：