HTML 表单属性

HTML 的 form 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

Action 属性

action 属性定义提交表单时要执行的操作。

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

在下面的例子中，表单数据被发送到名为 "action_page.aspx" 的文件。该文件包含处理表单数据的服务器端脚本，将表单数据发送到 "action_page.aspx"：

<!DOCTYPE html>
<html>
<body>
<h1>HTML 表单</h1>
<form action="/example/html/action_page.aspx">
  <label for="fname">姓氏:</label><br>
  <input type="text" id="fname" name="fname" value="比尔"><br>
  <label for="lname">名字:</label><br>
  <input type="text" id="lname" name="lname" value="盖茨"><br><br>
  <input type="submit" value="提交">
</form>
<p>如果您点击提交按钮，form-data 会被发送到名为 "/action_page.aspx" 的页面。</p>
</body>
</html>

运行一下

提示：如果省略 action 属性，则将 action 设置为当前页面。

Target 属性

target 属性规定提交表单后在何处显示响应。target 属性可设置以下值之一：

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

默认值为 _self，这意味着响应将在当前窗口中打开。

实例

此处，提交的结果将在新的浏览器标签中打开：

<!DOCTYPE html>
<html>
<body>
<h1>form target 属性</h1>
<p>在提交这个表单后，胡在新浏览器标签页中打开结果：</p>
<form action="/example/html/action_page.aspx" target="_blank">
  <label for="fname">姓氏:</label><br>
  <input type="text" id="fname" name="fname" value="比尔"><br>
  <label for="lname">名字:</label><br>
  <input type="text" id="lname" name="lname" value="盖茨"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

运行一下

Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。提交表单数据时，默认的 HTTP 方法是 GET。

此例在提交表单数据时使用 GET 方法：

<!DOCTYPE html>
<html>
<body>
<h1>method 属性</h1>
<p>该表单会使用 GET 方法提交：</p>
<form action="/example/html/action_page.aspx" target="_blank" method="get">
  <label for="fname">姓氏:</label><br>
  <input type="text" id="fname" name="fname" value="比尔"><br>
  <label for="lname">名字:</label><br>
  <input type="text" id="lname" name="lname" value="盖茨"><br><br>
  <input type="submit" value="Submit">
</form>
<p>提交后，请注意，表单值在新的浏览器标签页的地址栏中是可见的。</p>
</body>
</html>

运行一下

此例在提交表单数据时使用 POST 方法：

<!DOCTYPE html>
<html>
<body>
<h1>method 属性</h1>
<p>该表单会使用 POST 方法提交：</p>
<form action="/example/html/action_page.aspx" target="_blank" method="post">
  <label for="fname">姓氏:</label><br>
  <input type="text" id="fname" name="fname" value="比尔"><br>
  <label for="lname">名字:</label><br>
  <input type="text" id="lname" name="lname" value="盖茨"><br><br>
  <input type="submit" value="Submit">
</form>
<p>提交后，请注意，与 GET 方法不同，表单值在新浏览器的地址栏中不可见。</p>
</body>
</html>

运行一下

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）URL 的长度受到限制（2048 个字符）对于用户希望将结果添加为书签的表单提交很有用GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）POST 没有大小限制，可用于发送大量数据。带有 POST 的表单提交无法添加书签提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

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">邮箱:</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">输入你的邮箱:</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	规定提交表单后在何处显示接收到的响应。

HTML 表单属性

Action 属性

Target 属性

实例

Method 属性

关于 GET 的注意事项：

关于 POST 的注意事项：

Autocomplete 属性

Novalidate 属性

所有 <form> 属性的列表

分类导航