HTML 教程 / 表单结构与 GET、POST 的区别

一个 form 汇总了由用户提交值的控件。为了理解数据的去向，请区分控件的 name 属性、action 中的目标以及 method 中的请求方法。HTML 可以创建输入界面，但保存或检索数据需要服务器端处理程序。

创建一个小型搜索表单

该示例接受一个搜索词。在将其用于网站之前，请将 /search 替换为实际端点。标签的 for 应与输入字段的 id 对应；name 则决定提交数据使用的键名。

<form action="/search" method="get">
  <label for="keyword">搜索的词语</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">搜索</button>
</form>

标签的 for 属性与输入字段的 id 属性匹配，并为其分配标签。name="q" 在发送的数据中识别该值。输入“HTML”通常会生成包含 ?q=HTML 的 URL。没有 name 的 id 仍然可以连接标签，但字段的值通常不会包含在提交中。

action 指定目标；method 选择浏览器如何发送值。如果两者都被省略，表单将默认使用 GET 方法发送到当前 URL。尝试输入带有空格或非 ASCII 字符的词：地址栏可能显示这些字符的编码表示。这是一种传输格式，并不表示输入消失。

选择 GET 或 POST

GET 将表单数据放在 URL 的查询字符串中。它适用于用户可以保存为书签或共享的搜索和筛选操作。不要用它来发送密码或其他敏感值，因为数据在 URL 中是可见的。POST 将表单数据发送在请求正文中，并且通常用于会更改服务器状态的操作，例如创建账户或发送消息。POST 本身不会加密数据；敏感数据的传输需要使用 HTTPS 并在服务器端进行适当管理。

<form action="/contact" method="post">
  <label for="message">消息</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">发送</button>
</form>

路径 /contact 是示例性的；没有处理程序它可能会返回一个错误。要尝试对当前文档进行 GET，请从第一个表单开始，保留 method="get" 并删除其属性 action。一个开头的斜杠指的是网站根目录，而不是本地文件中的功能端点。不要向示例端点发送真实的个人信息。

在发送数据前请进行检查

将完整示例保存为 inspect-form.html。省略 action 指向当前文档。显式编写的操作必须是有效且非空的 URL，因此请省略该属性，而不是写 action="" 来标识当前页面。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>表单数据练习</title>
</head>
<body>
  <h1>检查已发送的字段</h1>
  <form id="inspect-form" method="get">
    <p><label for="query">搜索的词语</label>
      <input id="query" name="q" value="HTML" required></p>
    <p><label for="limit">结果的最大数量</label>
      <input id="limit" name="limit" value="5" readonly></p>
    <p><label for="coupon">优惠券不可用</label>
      <input id="coupon" name="coupon" value="DEMO" disabled></p>
    <p><label><input type="checkbox" name="news" value="yes" checked> 接收消息</label></p>
    <button type="submit">检查 URL 中的值</button>
  </form>
</body>
</html>

打开文件后，在开发者工具的控制台中执行此行，以检查当前字段的名称和值。FormData 是浏览器的一个编程接口（API，应用程序编程接口），它从表单中创建名值对列表。该命令本身不会通过网络发送数据，也不会触发对约束的验证。

Array.from(new FormData(document.getElementById("inspect-form")).entries())

[["q", "HTML"], ["limit", "5"], ["news", "yes"]]

最初包含了只读的 limit，并且禁用的 coupon 被省略。取消勾选“接收消息”，该条目也会消失。删除搜索词仍然允许您检查空的 q 值，但提交按钮会触发必要的验证。在提交时，将数据列表的创建与交互式检查进行比较。

在服务器提供的页面上，打开开发者工具的网络面板，提交表单并检查对应请求。 本地文档 file:// 与对服务器的 GET 或 POST HTTP 请求不等价。404 或 405 可能反映目标或支持的方法；删除字段名称或验证属性无法解决此问题。

HTML 提交属性规则 · MDN 上的 FormData 构造函数

为什么传输的数据中可能缺少某个字段？

禁用的控件无法更改，也不会被传输。如果您希望传输一个不可编辑的值，请检查该控件类型是否支持 readonly。只有选中的复选框和被选中的单选按钮会传输它们的值；禁用的字段会被忽略。文件上传需要额外的表单设置和服务器端处理；仅在此示例中添加文件字段是不够的。关于哪些约束会阻止提交，可通过表单验证：必填项、文本长度与数值范围中的示例逐项比较。

如果结果出乎意料，请首先检查每个控件的 name，然后检查控件是否被选中且未禁用，接着检查 URL 和方法是否与服务器匹配。即使服务器返回错误，浏览器的网络面板也可以显示请求。正确的请求并不意味着服务器已经保存了该值。有关提交的详细信息，请参见表单参考文档 MDN。