
上QQ阅读APP看书,第一时间看更新
3.5 新的form属性
HTML5为form元素新增了两个属性:autocomplete和novalidate,下面分别进行说明。
3.5.1 autocomplete——自动完成

视频讲解
autocomplete属性用于规定form中所有元素都拥有自动完成功能。该属性在介绍input属性时已经介绍过,用法与之相同。
但是当autocomplete属性用于整个form时,所有从属于该form的控件都具备自动完成功能。如果要关闭部分控件的自动完成功能,则需要单独设置autocomplete="off",具体示例可参考3.3.1节autocomplete属性的介绍。
3.5.2 novalidate——禁止验证

视频讲解
novalidate属性规定在提交表单时不应该验证form或input域。适用于<form>标签,以及text、search、url、telephone、email、password、date pickers、range和color类型的<input>标签。
【示例1】下面示例使用novalidate属性取消了整个表单的验证。

【补充】
HTML5为form、input、select和textarea元素定义了一个checkValidity()方法。调用该方法,可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity()方法将返回布尔值,以提示是否通过验证。
【示例2】下面示例使用checkValidity()方法,主动验证用户输入的Email地址是否有效。

提示:在HTML5中,form和input元素都有一个validity属性,该属性返回一个ValidityState对象。该对象具有很多属性,其中最简单、最重要的属性为valid属性,它表示表单内所有元素内容是否有效或单个input元素内容是否有效。