1. input元素新增类型
url类型
url类型的input元素是一种用来输入url的文本框,提交时如果该文本框中内容不是url格式,则不允许提交。
email类型
email类型的input元素是用来输入email的文本框,具有一个multiple属性允许在文本框中输入一串以逗号分隔的email地址。
date类型
date类型的input元素用来输入日期的文本框。
time类型
time类型的input元素是用来输入时间的文本框。
month类型
month类型的input元素用来输入月份的文本框。
week类型
week类型的input元素用来输入周号的文本框。
number类型
number类型input元素是用来输入数字的文本框,在提交时会检查其中的内容是否为数字,具有min、max及step属性。
range类型
range类型的input元素是只允许输入一段范围内数值的文本框,具有min、max及step属性。
2. input元素新增属性
autofocus属性
autofocus属性是一个Boolean值,在页面加载完成后,input自动获取焦点。
pattern属性
pattern是元素的验证属性,使用正则表达式验证文本输入框中的内容。
placeholder属性
input元素的placeholder属性为占位属性,显示在输入框中的提示信息,当输入框中输入内容时,该提示信息自动消失;当输入框内容为空时,提示信息重新显示。
required属性
input元素required属性用于校验输入内容是否为空。
list属性
input元素list属性的值为某个datalist元素的id,类似于选择框(<select>),当用户想要设置的值不在选择列表之内时,允许自行输入。
autocomplete属性
input元素autocomplete属性用于自动完成功能,autocomplete属性可以指定“on”、“off”值。
示例中使用datalist元素中数据作为候补输入的数据在文本框中自动显示。
formnovalidate属性
input元素formnovalidate属性用于设置在表单中不进行验证。
3. 新增表单元素
3.1 datalist元素
datalist元素用于附中表单中文本框的数据输入。datalist元素本身是隐藏的,与表单文本框的“list”属性绑定,“list”属性值为datalist元素的ID。
3.2 output元素
output元素必须从属于某个form,用于在页面中显示各种不同类型表单元素的内容。output元素的“onFormInput”事件,在表单输入框输入内容时触发该事件。
4. 表单验证
4.1 checkValidity显示验证
表单中的各元素可以利用pattern与required属性验证元素内容的有效性,每个元素都可以通过checkValidity(),校验本身是否与验证条件匹配。如果一致,返回true,否则返回false。
Index
4.2 取消验证
取消表单验证的两种常用方法:
(1)利用form元素的novalidate属性,关闭整个表单的验证;
(2)利用input元素或submit元素的formnovalidate属性,让表单对单个input元素取消验证。
4.3 setCustomValidity自定义错误信息
在表单与相应规则验证时,由于使用的是系统内置的验证方法,因此在出错提示也是由系统自带的。修改验证出错信息内容调用元素或表单的setCustomValidity()方法。
Index