如何设置HTML表单的提交方式

HTML表单提交方式由method和action属性决定，method="GET"将数据附加到URL，适用于获取数据；method="POST"将数据封装在请求体中，适合提交敏感或大量数据。action指定提交目标URL，可为相对或绝对路径。GET请求数据可见、可缓存、幂等，用于搜索等操作；POST请求数据隐藏、非幂等，用于注册、登录等改变服务器状态的操作。数据传输时，GET通过URL编码查询字符串，POST通过请求体发送，支持application/x-www-form-urlencoded、multipart/form-data等格式。高级用法包括：使用JavaScript/AJAX异步提交，提升用户体验；target属性控制响应显示位置；novalidate禁用浏览器默认验证；提交按钮的formmethod、formaction等属性可覆盖表单默认行为，实现多按钮不同提交逻辑。

HTML表单的提交方式主要通过

<form>

method

action

解决方案

设置HTML表单的提交方式，核心在于

<form>

method

action

1.

method

• method="GET"

  当表单的

  method

  属性设置为

  GET

  时，表单数据会以查询字符串（query string）的形式附加到

  action

  属性指定的URL后面。
  • 特点：
    • 数据在URL中可见，例如：

      example.com/search?query=hello&page=1

      。
    • 对用户透明，可以直接通过URL分享或收藏。
    • 数据量有限制（取决于浏览器和服务器）。
    • 不适合传输敏感信息（如密码），因为数据会留在浏览器历史记录和服务器日志中。
    • 通常用于获取数据、搜索查询或不改变服务器状态的操作。
  • 示例：

    <form action="/search" method="GET">
        <label for="query">搜索：</label>
        <input type="text" id="query" name="q">
        <button type="submit">提交</button>
    </form>

• method="POST"

  当表单的

  method

  属性设置为

  POST

  时，表单数据会被封装在HTTP请求的请求体（request body）中发送给服务器。
  • 特点：
    • 数据在URL中不可见，相对更安全，适合传输敏感信息。
    • 数据量没有严格限制，可以传输大量数据，包括文件上传。
    • 不能直接通过URL分享或收藏特定的提交状态。
    • 通常用于提交表单数据（如注册、登录）、文件上传或任何会改变服务器状态的操作。
  • 示例：

    <form action="/submit-data" method="POST">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <button type="submit">注册</button>
    </form>

2.

action

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

action

• 它可以是一个相对路径（如

  /process-form

  ）或一个绝对路径（如

  https://api.example.com/data

  ）。

• 如果省略

  action

  属性，表单数据通常会提交到当前页面的URL。

• 示例：

  <!-- 提交到当前页面 -->
  <form method="POST">
      <!-- ...表单字段... -->
  </form>
  
  <!-- 提交到指定路径 -->
  <form action="/api/users" method="POST">
      <!-- ...表单字段... -->
  </form>

GET与POST：表单提交方式的选择依据是什么？

在我看来，选择GET还是POST，绝不是一个随便拍脑袋的决定，它背后牵扯到数据敏感性、操作幂等性以及用户体验等多个层面的考量。我个人在做项目时，对此是有些明确的原则的。

简单来说，如果你只是想从服务器“获取”一些信息，比如一个搜索结果、一个筛选列表，而且这个操作不会对服务器上的数据造成任何改变，那么GET方法是首选。它方便调试，数据直接体现在URL里，用户可以轻松地复制、分享这个URL，或者把它加入书签，下次直接访问就能得到相同的结果。这在技术上被称为“幂等性”——重复执行同一个GET请求，不会对服务器产生副作用。而且，浏览器和服务器通常会对GET请求进行缓存，这在一定程度上也能提升性能。

然而，一旦你的操作涉及到向服务器“发送”数据，并且这些数据可能会改变服务器状态（比如创建新用户、更新资料、删除记录），或者这些数据本身比较敏感（比如密码、银行卡号），那就必须使用POST方法了。POST请求的数据是放在HTTP请求体里的，不会直接暴露在URL中，这在一定程度上提升了安全性，虽然它并不能提供绝对的安全保障，但至少避免了数据泄露在浏览器历史、服务器日志或被轻易分享的风险。另外，POST请求对数据量几乎没有限制，非常适合文件上传这类需要传输大量数据的场景。重复提交POST请求通常会产生副作用（比如创建多条记录），所以它不是幂等的。这也是为什么当你刷新一个POST提交后的页面时，浏览器会提示你是否要重新提交表单。

所以，我的经验是：查询用GET，修改用POST。这是一个很实用的经验法则。

深入理解：表单数据是如何在GET和POST请求中传输的？

理解数据如何在GET和POST请求中传输，其实是深入理解HTTP协议的一部分，这对于我们调试和优化Web应用非常重要。它不仅仅是“可见”或“不可见”那么简单。

GET请求的数据传输：

当表单以GET方式提交时，所有的表单字段名和值都会被URL编码（默认是

application/x-www-form-urlencoded

action

name="username"

张三

yourdomain.com/process?username=%E5%BC%A0%E4%B8%89

%E5%BC%A0%E4%B8%89

POST请求的数据传输：

POST请求的数据传输机制则完全不同。表单数据不会出现在URL中，而是被放置在HTTP请求的请求体（Request Body）中。请求头（Request Headers）中的

Content-Type

• application/x-www-form-urlencoded

  (默认): 这是最常见的POST数据格式，数据以

  key=value&key2=value2

  的形式组织，与GET请求的查询字符串类似，但它在请求体中传输。

• multipart/form-data

  : 当表单包含文件上传字段（

  <input type="file">

  ）时，必须将

  <form>

  标签的

  enctype

  属性设置为

  multipart/form-data

  。这种格式会将表单数据和文件内容分割成不同的部分（parts），每个部分都有自己的

  Content-Disposition

  和

  Content-Type

  ，非常适合传输二进制数据。

• text/plain

  : 较少用于表单提交，通常用于调试或特殊场景。

服务器端会根据

Content-Type

聚好用AI

可免费AI绘图、AI音乐、AI视频创作，聚集全球顶级AI，一站式创意平台

下载

除了GET和POST，还有哪些表单提交的“变种”或高级用法？

是的，除了直接设置

method

1. 使用JavaScript/AJAX进行异步提交

这是现代Web开发中非常主流的一种方式。通过JavaScript（例如使用

fetch

XMLHttpRequest

• 优势： 提升用户体验，页面无缝更新，减少服务器负载（只传输数据，不传输整个页面）。

• 实现： 你可以捕获表单的

  submit

  事件，阻止其默认行为（即阻止浏览器进行常规的同步提交），然后用JavaScript手动收集表单数据，并通过

  fetch

  或

  XMLHttpRequest

  发送HTTP请求。这个HTTP请求底层依然是GET或POST，但你可以更精细地控制请求头、请求体，甚至发送JSON格式的数据。

  document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止表单默认提交行为
  
      const formData = new FormData(this); // 收集表单数据
      // 或者手动构建一个对象：
      // const data = {
      //     username: document.getElementById('username').value,
      //     password: document.getElementById('password').value
      // };
  
      fetch(this.action, {
          method: this.method, // 使用表单定义的GET或POST
          body: formData // 发送表单数据
          // headers: {
          //     'Content-Type': 'application/json' // 如果你发送的是JSON
          // }
      })
      .then(response => response.json())
      .then(data => {
          console.log('提交成功:', data);
          // 处理服务器响应
      })
      .catch(error => {
          console.error('提交失败:', error);
      });
  });

  说实话，这种JS提交，才是现代Web开发的主流。直接的表单提交虽然基础，但在很多场景下，我们更希望有更细致的控制和更好的用户体验，所以AJAX几乎成了标配。

2.

target

target

• _self

  ：在当前窗口/标签页加载响应（默认值）。

• _blank

  ：在新窗口/标签页加载响应。

• _parent

  ：在父级框架中加载响应。

• _top

  ：在整个窗口中加载响应（跳出所有框架）。

• framename

  ：在一个指定的

  <iframe>

  中加载响应。

  <form action="/report" method="GET" target="_blank">
      <button type="submit">在新标签页查看报告</button>
  </form>

3.

novalidate

HTML5引入了许多内置的表单验证功能（如

required

type="email"

<form>

novalidate

```html
<form action="/register" method="POST" novalidate>
    <!-- 带有required属性的输入框，但浏览器不会强制验证 -->
    <input type="text" name="username" required>
    <button type="submit">注册</button>
</form>
```

4. 提交按钮上的属性覆盖：

formmethod

formaction

formenctype

formtarget

formnovalidate

这些属性允许你在特定的提交按钮上，覆盖

<form>

```html
<form action="/save" method="POST">
    <input type="text" name="data">
    <button type="submit">保存</button> <!-- 默认提交到/save，POST方法 -->
    <button type="submit" formaction="/preview" formmethod="GET" formtarget="_blank">预览</button> <!-- 提交到/preview，GET方法，新标签页 -->
</form>
```
这个功能在某些复杂场景下非常有用，比如一个编辑页面既有“保存”按钮也有“预览”按钮。