![HTML5+CSS3从入门到精通(微课精编版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/697/24172697/b_24172697.jpg)
上QQ阅读APP看书,第一时间看更新
3.5 新的form属性
HTML5为form元素新增了两个属性:autocomplete和novalidate,下面分别进行说明。
3.5.1 autocomplete——自动完成
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P91_17439.jpg?sign=1738805523-26gOYAXlhCLmksHxXdnfHaL9TydSzJg4-0-531c10b119497d6597b46846b12021a2)
视频讲解
autocomplete属性用于规定form中所有元素都拥有自动完成功能。该属性在介绍input属性时已经介绍过,用法与之相同。
但是当autocomplete属性用于整个form时,所有从属于该form的控件都具备自动完成功能。如果要关闭部分控件的自动完成功能,则需要单独设置autocomplete="off",具体示例可参考3.3.1节autocomplete属性的介绍。
3.5.2 novalidate——禁止验证
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P91_17436.jpg?sign=1738805523-jTOwCuNWgbc4xbss1q5daqJGKgQB1Pk3-0-50c0b032e7a1207a0837d6ec21402520)
视频讲解
novalidate属性规定在提交表单时不应该验证form或input域。适用于<form>标签,以及text、search、url、telephone、email、password、date pickers、range和color类型的<input>标签。
【示例1】下面示例使用novalidate属性取消了整个表单的验证。
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P91_78355.jpg?sign=1738805523-PKZyiffSuKZc8BrHsFWftDOt7DD1TV5T-0-c6a5b9936ba0ed2d2e67bf1e95119696)
【补充】
HTML5为form、input、select和textarea元素定义了一个checkValidity()方法。调用该方法,可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity()方法将返回布尔值,以提示是否通过验证。
【示例2】下面示例使用checkValidity()方法,主动验证用户输入的Email地址是否有效。
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P91_78356.jpg?sign=1738805523-NBPlQ5hiGSwkqv8L4MOnVUtWPLrD5pC9-0-e61f3d22621eca823be6b43c8b09656c)
提示:在HTML5中,form和input元素都有一个validity属性,该属性返回一个ValidityState对象。该对象具有很多属性,其中最简单、最重要的属性为valid属性,它表示表单内所有元素内容是否有效或单个input元素内容是否有效。