HTML5 新表单属性

本章节主要讲解 HTML5 中追加的新的表单属性 Autocomplete 与 Novalidate，及其用法。

Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

启用自动填写的表单：

<!DOCTYPE html>
<html>
<body>
<h1>form autocomplete 属性</h1>
<p>请填写并提交表单，然后重新加载页面，再次开始填写表单 - 查看 autocomplete 的工作原理。</p>
<p>然后，请尝试把 autocomplete 设置为 "off"。</p>
<form action="/example/html/action_page.aspx" autocomplete="on">
  <label for="fname">姓氏:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit">
</form>
</body>
</html>

运行一下

Novalidate 属性

novalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

未设置 novalidate 属性的表单：

<!DOCTYPE html>
<html>
<body>
<h1>form novalidate 属性</h1>
<p>novalidate 属性指示提交表单时不对输入进行验证：</p>
<form action="/example/html/action_page.aspx" novalidate="">
  <label for="email">输入您的 email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit">
</form>
<p><b>注释：</b>Safari 10（或更早版本）不支持 form 标签的 novalidate 属性。</p>
</body>
</html>

运行一下

所有 <form> 属性的列表

属性	描述
accept-charset	规定用于表单提交的字符编码。
action	规定提交表单时将表单数据发送到何处。
autocomplete	规定表单是否应打开自动完成（填写）功能。
enctype	规定将表单数据提交到服务器时应如何编码（仅供 method="post"）。
method	规定发送表单数据时要使用的 HTTP 方法。
name	规定表单名称。
novalidate	规定提交时不应验证表单。
rel	规定链接资源和当前文档之间的关系。
target	规定提交表单后在何处显示接收到的响应。

HTML5 新表单属性

Autocomplete 属性

Novalidate 属性

所有 <form> 属性的列表

分类导航