HTML 表单属性 详解
HTML 表单属性
本章介绍 HTML <form> 元素的不同属性。
Action 属性
action 属性定义提交表单时要执行的操作。
通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。
在下面的例子中，表单数据被发送到名为 "action_page.php" 的文件。该文件包含处理表单数据的服务器端脚本：
示例代码：
提交后，将表单数据发送到 "action_page.php"：
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Bill"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Gates"><br><br>
<input type="submit" value="Submit">
</form>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>HTML 表单</h1>
<form action="/demo/html/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Bill"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Gates"><br><br>
<input type="submit" value="提交">
</form>
<p>如果您点击提交按钮，form-data 会被发送到名为 "/action_page.php" 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：如果省略 action 属性，则将 action 设置为当前页面。
Target 属性
target 属性规定提交表单后在何处显示响应。
target 属性可设置以下值之一：
| 值 | 描述 |
|---|---|
| _blank | 响应显示在新窗口或选项卡中。 |
| _self | 响应显示在当前窗口中。 |
| _parent | 响应显示在父框架中。 |
| _top | 响应显示在窗口的整个 body 中。 |
| framename | 响应显示在命名的 iframe 中。 |
默认值为 _self，这意味着响应将在当前窗口中打开。
示例代码：
此处，提交的结果将在新的浏览器标签中打开：
<form action="/action_page.php" target="_blank">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>form target 属性</h1>
<p>在提交这个表单后，将在新浏览器标签页中打开结果：</p>
<form action="/demo/html/action_page.php" target="_blank">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Bill"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Gates"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Method 属性
method 属性指定提交表单数据时要使用的 HTTP 方法。
表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。
提交表单数据时，默认的 HTTP 方法是 GET。
示例代码：
此例在提交表单数据时使用 GET 方法：
<form action="/action_page.php" method="get">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>method 属性</h1>
<p>该表单会使用 GET 方法提交：</p>
<form action="/demo/html/action_page.php" target="_blank" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Bill"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Gates"><br><br>
<input type="submit" value="Submit">
</form>
<p>提交后，请注意，表单值在新的浏览器标签页的地址栏中是可见的。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
此例在提交表单数据时使用 POST 方法：
<form action="/action_page.php" method="post">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>method Attribute</h1>
<p>该表单会使用 POST 方法提交：</p>
<form action="/demo/html/action_page.php" target="_blank" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Bill"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Gates"><br><br>
<input type="submit" value="Submit">
</form>
<p>提交后，请注意，与 GET 方法不同，表单值在新浏览器的地址栏中不可见。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
关于 GET 的注意事项：
- 以名称/值对的形式将表单数据追加到 URL
- 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
- URL 的长度受到限制（2048 个字符）
- 对于用户希望将结果添加为书签的表单提交很有用
- GET 适用于非安全数据，例如 Google 中的查询字符串
关于 POST 的注意事项：
- 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
- POST 没有大小限制，可用于发送大量数据。
- 带有 POST 的表单提交无法添加书签
提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！
Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
示例代码：
启用自动填写的表单：
<form action="/action_page.php" autocomplete="on">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>form autocomplete 属性</h1>
<p>请填写并提交表单，然后重新加载页面，再次开始填写表单 - 查看 autocomplete 的工作原理。</p>
<p>然后，请尝试把 autocomplete 设置为 "off"。</p>
<form action="/demo/html/action_page.php" autocomplete="on">
<label for="fname">First name:</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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Novalidate 属性
novalidate 属性是一个布尔属性。
如果已设置，它规定提交时不应验证表单数据。
示例代码：
未设置 novalidate 属性的表单：
<form action="/action_page.php" novalidate>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>form novalidate 属性</h1>
<p>novalidate 属性指示提交表单时不对输入进行验证：</p>
<form action="/demo/html/action_page.php" novalidate>
<label for="email">Enter your 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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有 <form> 属性的列表
| 属性 | 描述 |
|---|---|
| accept-charset | 规定用于表单提交的字符编码。 |
| action | 规定提交表单时将表单数据发送到何处。 |
| autocomplete | 规定表单是否应打开自动完成（填写）功能。 |
| enctype | 规定将表单数据提交到服务器时应如何编码（仅供 method="post"）。 |
| method | 规定发送表单数据时要使用的 HTTP 方法。 |
| name | 规定表单名称。 |
| novalidate | 规定提交时不应验证表单。 |
| rel | 规定链接资源和当前文档之间的关系。 |
| target | 规定提交表单后在何处显示接收到的响应。 |
