HTML 表单默认使用 GET 方法提交数据，这会导致表单字段及其值作为查询参数附加到 URL 中，造成 URL 冗长且暴露数据。为保持 URL 简洁和隐藏提交数据，应将表单的 `method` 属性明确设置为 `POST`。POST 方法将数据封装在 HTTP 请求体中发送，从而避免了 URL 污染，适用于敏感数据或修改服务器状态的操作。

在 Web 开发中，处理用户输入是常见的任务，HTML

元素是实现这一功能的关键。然而，初学者常会遇到一个问题：表单提交后，URL 会变得很长，包含了所有表单字段及其值，例如 http://localhost:3000/test?login-username=&login-password=&login-submit-button=Submit。这不仅影响美观，也可能在某些情况下暴露不应直接在 URL 中显示的数据。本文将深入探讨这一现象的原因，并提供解决方案，确保表单提交后 URL 保持简洁。

理解 HTML 表单的默认行为

当一个 HTML 表单被提交时，如果未明确指定其 method 属性，浏览器会默认使用 GET 方法。GET 方法的特点是将表单数据编码为 URL 的查询字符串（query string），并将其附加到 action 属性指定的 URL 后面。这种行为是 HTTP 协议规范的一部分，具体表现为：

1. 数据可见性：所有表单字段的 name 属性和对应的 value 会以 name=value 的形式出现在 URL 中，并用 & 符号连接。
2. 数据传输：数据通过 URL 传输，因此对数据量有限制（不同浏览器和服务器有不同限制）。
3. 安全性：不适合传输敏感信息，因为数据会记录在浏览器历史、服务器日志中，并可能被缓存。
4. 幂等性：GET 请求应该是幂等的，即重复执行多次请求，服务器状态不会发生改变。它主要用于获取资源。

考虑以下示例表单代码：

立即学习“前端免费学习笔记（深入）”；

<div>
     <form action="/test">
          <input type="text" name="login-username" id="login-username" placeholder="Username" />
          <input type="password" name="login-password" id="login-password" placeholder="Password" />
          <input type="submit" name="login-submit-button" id="login-submit-button" value="Submit" />
     </form>
</div>

当用户点击提交按钮后，由于 method 未指定，浏览器会执行 GET 请求。如果用户未输入任何内容，URL 将变为 http://localhost:3000/test?login-username=&login-password=&login-submit-button=Submit。

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

解决方案：使用 POST 方法

要解决表单数据出现在 URL 中的问题，最直接且标准的方法是将表单的 method 属性设置为 POST。

POST 方法的特点是：

1. 数据隐藏：表单数据不会作为查询字符串附加到 URL 中，而是被封装在 HTTP 请求的请求体（request body）中发送给服务器。
2. 数据传输：对数据量没有理论上的限制，可以传输大量数据。
3. 安全性：相对 GET 更适合传输敏感信息，因为数据不会直接暴露在 URL 中。
4. 非幂等性：POST 请求通常用于向服务器提交数据以创建、更新资源或执行特定操作，重复执行可能会导致不同的结果。

将上述表单修改为使用 POST 方法非常简单，只需在

标签中添加 method="post" 属性即可：

<div>
     <form action="/test" method="post">
          <input type="text" name="login-username" id="login-username" placeholder="Username" />
          <input type="password" name="login-password" id="login-password" placeholder="Password" />
          <input type="submit" name="login-submit-button" id="login-submit-button" value="Submit" />
     </form>
</div>

通过这一改动，当用户提交表单时，URL 将保持为 http://localhost:3000/test，而表单数据则安全地在请求体中发送到服务器。服务器端接收数据的方式会根据所使用的后端框架和语言有所不同（例如，在 Node.js Express 中通过 req.body 获取，在 PHP 中通过 $_POST 获取）。

注意事项与最佳实践

• 何时使用 GET 与 POST？
  • GET：适用于请求数据，如搜索查询、筛选结果、分页链接等。当用户希望能够收藏、分享或刷新页面时，GET 更合适。
  • POST：适用于提交数据以创建或修改资源，如注册、登录、发表评论、上传文件等。当数据敏感、数据量大或操作具有副作用时，POST 是首选。
• 安全性考量：虽然 POST 方法将数据隐藏在请求体中，但它并非加密。对于敏感数据（如密码），除了使用 POST 外，还必须通过 HTTPS（HTTP Secure）协议进行传输，以确保数据在客户端和服务器之间传输过程中的加密性。
• 前端框架（如 React）中的处理：在现代前端框架如 React 中，通常会通过 JavaScript 来拦截表单的默认提交行为（使用 event.preventDefault()），然后使用 fetch API 或 axios 等库以异步方式（AJAX）发送数据。这种方式提供了更精细的控制，可以自定义请求头、处理响应、并在不刷新页面的情况下更新 UI，同时也能轻松控制 URL 是否发生变化。然而，对于简单的表单重定向场景，直接设置 method="post" 仍然是有效的原生 HTML 解决方案。

总结

为了避免 HTML 表单数据出现在 URL 中，保持 URL 简洁并提升数据传输的隐蔽性，关键在于将表单的 method 属性从默认的 GET 更改为 POST。理解 GET 和 POST 方法的差异及其适用场景，是构建健壮和用户友好型 Web 应用的基础。在处理用户输入时，根据数据的性质和所需操作的副作用，选择合适的 HTTP 方法至关重要。