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

时间:2024-05-31 09:54:39

H5新增的表单元素

新增的type类型:
1、emaile
用来验证输入的字符串是否是email地址的格式,若不是,则不允许提交;
H5新增表单元素和表单验证
注:即检测输入内容是否含有@符号且@符号前后都必须有内容,但是它并不验证email是否存在。可以为空,除非用required属性(验证输入不能为空);此外它还允许文本框内输入一串以逗号分隔的email地址。
2、url
用来验证输入的内容是否是URL地址,不是则不允许提交;
H5新增表单元素和表单验证
注:即url规定输入内容必须含有http://或https://且其后必须有内容,同样,url并不验证输入的地址是否存在;
3、number
专门用来输入数字的文本框,具有min,max以及step的属性;
H5新增表单元素和表单验证
H5新增表单元素和表单验证
H5新增表单元素和表单验证
注:规定输入内容必须是纯数字(谷歌中设置number类型后其他字符根本无法输入),且可以配合min和max规定数字的最下和最大值;
4、range
是用来只输入一段范围内数字的文本框,表现形式为一个拖动框,具有min和max以及step属性,可以指定拖到步幅;
H5新增表单元素和表单验证
5、color
可以供用户自主选择背景颜色的文本框(默认为黑色)
H5新增表单元素和表单验证
6、search
用来搜索的文本框,为用户提供清空效果
H5新增表单元素和表单验证
8、date pickers
(date,month,week,time,datatime,datime-local)
多个可供选择日期和时间的新输入类型;
date:
H5新增表单元素和表单验证
此类类型存在许多兼容性问题,此处不再一一叙述。

H5新增的表单验证

1、placeholder(常用)
文本框未输入状态时的提示信息,对比于value属性,placeholder的提示信息在输入内容时会消失,而value的提示还需要用户手动删去;
H5新增表单元素和表单验证
2、autofocus
给文本框、选择框或者按钮控件加上后,该控件会自带聚焦,但是自动聚焦的控件一个页面只能有一个,比如百度首页的搜索框;
H5新增表单元素和表单验证
H5新增表单元素和表单验证
4、autocomplete
autocomplete=“on/off” on时可对之前提交的信息进行自动记忆,且生成提示信息:
H5新增表单元素和表单验证
注:使用autocomplete时,该表单必须要有name属性。
5、required
验证输入不能为空;
H5新增表单元素和表单验证
H5新增表单元素和表单验证
5、min max step(数字间隔) 已及maxlength(限制输入内容的长度,是字符的个数,而不是字节)

6、novalidate
取消验证;即在提交白丹时,不验证form或input域;
H5新增表单元素和表单验证
比如这里我们对form添加novalidate属性,input的required则不再验证,即使为空也不会提示。
7、datelist
做提示信息用的 必须和list属性结合使用(可以添加label属性):
H5新增表单元素和表单验证
效果:
H5新增表单元素和表单验证