HTML <form> 标签

Begindev 编辑部 March 25, 2026

任何交互式网站的核心都在于它能够收集用户的信息。HTML 表单为这种交互提供了结构，允许你输入数据并将其发送给服务器进行处理。

在这套结构中，<form> 标签就像一个容器，装下了构成表单的所有交互元素。

掌握 <form> 标签及其属性的用法，是构建高效、用户友好的 Web 应用的关键。本章将全面解析 <form> 标签，带你迈出创建交互式表单的第一步。

1. 认识 `<form>` 标签

HTML 中的 <form> 标签用于定义一个收集用户输入的表单。它是文本框、复选框、单选按钮、提交按钮等各种表单元素的“大包装盒”。

<form> 标签本身在页面上是不可见的；它的主要作用是在逻辑上将相关的输入元素分组，并定义这些收集到的数据应该如何被提交。

1.1 基础语法

<form>
</form>

任何放在 <form> 开头和结尾标签之间的 HTML 元素，都被视为该表单的一部分。这让你能有条理地组织表单元素。

示例：

<form>
  <label for="name">姓名：</label><br>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="email">邮箱：</label><br>
  <input type="email" id="email" name="email"><br><br>
  
  <input type="submit" value="提交">
</form>

在这个例子中，<form> 标签包含了两个标签（label）、两个输入框（一个用于姓名，一个用于邮箱）以及一个提交按钮。它们被打包成了一个完整的表单。

2. `<form>` 标签的核心属性

<form> 标签有几个非常重要的属性，用来控制表单的行为和数据处理方式。其中最核心的两个是 action 和 method。

2.1 `action` 属性

action 属性指定了表单提交时，数据应该发送到哪个 URL（网址）。这个 URL 通常指向一个处理数据的服务器端脚本或应用程序。

语法：

<form action="URL">
</form>

实际应用场景：

提交给 PHP 脚本：

<form action="process_form.php" method="post">
</form>

表单数据会被发送到服务器上的 process_form.php 文件。这个文件里的 PHP 代码会接管数据（比如存入数据库或发送邮件）。
提交给 API 接口：

<form action="https://api.example.com/submit" method="post">
</form>

数据会被发送到一个 API 接口。在现代 Web 开发中，前后端分离时经常这么做。

提交给当前页面：

<form action="" method="post">
</form>

如果 action 属性留空，数据会提交给包含该表单的同一个页面。这通常与服务器端脚本配合使用，在同一页面处理提交并显示结果。

2.2 `method` 属性

method 属性规定了提交表单数据时使用的 HTTP 方法。最常用的两种方法是 GET 和 POST。

语法：

<form method="GET 或 POST">
</form>

2.2.1 GET 方法

GET 方法会将表单数据附加到 URL 的末尾，形成一个查询字符串（query string）。
适用场景：适合提交少量且非敏感的数据（比如搜索查询）。
特点：数据在浏览器地址栏中是可见的，这意味着它可以被加入书签或分享。
限制： GET 请求对数据长度有严格限制（通常在 2048 个字符左右）。

GET 示例：

<form action="search.php" method="get">
  <label for="query">搜索：</label>
  <input type="text" id="query" name="query">
  <input type="submit" value="搜索">
</form>

如果用户输入了 "HTML forms" 并提交，浏览器地址栏的 URL 会变成类似这样：search.php?query=HTML+forms。

2.2.2 POST 方法

POST 方法会将表单数据放在 HTTP 请求的“请求体（body）”中发送。
适用场景：适合提交大量数据或敏感信息（如密码、个人隐私）。
特点：数据不会显示在 URL 中，相对更安全。
限制： POST 请求没有长度限制。

POST 示例：

<form action="login.php" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br><br>
  
  <input type="submit" value="登录">
</form>

提交这个登录表单时，用户名和密码会藏在 HTTP 请求体里发送给 login.php，绝不会暴露在网址上。

GET 还是 POST？怎么选：

如果你只是想获取数据（如简单搜索），且数据不敏感、希望可以被分享，用 GET。
如果你需要提交改变服务器状态的数据（如注册账号、下订单、更新资料），或者数据包含敏感信息（如密码），必须用 POST。

3. 其他重要属性

除了 action 和 method，还有一些属性可以进一步定制表单的行为。

target：规定在何处显示提交表单后的响应结果。常见的值包括 _blank（在新标签页/窗口打开）、_self（在当前窗口打开，默认值）、_parent 和 e。它的用法和链接 <a> 标签的 target 属性一模一样。

<form action="process_form.php" method="post" target="_blank">
</form>

enctype： 规定提交表单数据时使用的编码类型。这在上传文件时极其重要。默认值是 application/x-www-form-urlencoded。但如果你需要让用户上传文件，必须将其设置为 multipart/form-data。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <label for="file">选择文件：</label>
  <input type="file" id="file" name="file"><br><br>
  <input type="submit" value="上传">
</form>

如果没有 enctype="multipart/form-data"，服务器将无法正确接收你上传的文件。

autocomplete： 规定浏览器是否应该根据用户以前的输入自动完成表单。可以设置为 on（开启）或 off（关闭）。你也可以在单个输入框上单独设置。

<form action="submit.php" method="post" autocomplete="off">
</form>

name： 虽然在 <form> 标签上不如在输入框上常用，但 name 属性可以用来在 JavaScript 或服务器端代码中标识这个表单。

<form action="submit.php" method="post" name="myForm">
</form>

有了它，你就可以在 JavaScript 中用 document.forms["myForm"] 来快速获取这个表单。

novalidate： 这是一个布尔属性。添加它意味着在提交表单时，不要进行验证。这会覆盖浏览器内置的表单验证功能。

<form action="submit.php" method="post" novalidate>
   <label for="email">邮箱：</label>
   <input type="email" id="email" name="email" required><br><br>
   <input type="submit" value="提交">
 </form>

通常不建议这么做，因为保留浏览器的客户端验证可以提升用户体验，防止用户填错低级错误。

4. 表单的排版结构

虽然 <form> 定义了容器，但表单内部元素的结构和布局同样重要。合理使用 HTML 元素和 CSS，能大幅提升表单的颜值和易用性。

4.1 常见的表单排版方式

1. 基础垂直布局（利用 <br>）：
最简单的结构，元素从上到下垂直堆叠。

<form>
  <label for="name">姓名：</label><br>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="提交">
</form>

2. 使用 <p> 标签增加间距：
利用段落标签自带的外边距，让表单元素之间有呼吸感。

<form>
  <p>
    <label for="name">姓名：</label><br>
    <input type="text" id="name" name="name">
  </p>
  <p>
    <input type="submit" value="提交">
  </p>
</form>

3. 使用 <div> 标签进行逻辑分组（推荐）：
使用 <div> 将相关的标签和输入框包裹起来。这在现代开发中最常见，极其方便后续用 CSS 进行灵活布局（如 Flexbox 或 Grid）或用 JavaScript 进行操作。

<form>
  <div>
    <label for="name">姓名：</label><br>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <input type="submit" value="提交">
  </div>
</form>

4. 使用表格 <table> 布局（不推荐，但可行）：
在很早期的网页开发中，人们用表格来对齐表单。现代开发中更推崇使用 CSS 来控制布局，表格仅应用于展示真正的表格数据。

<form>
  <table>
    <tr>
      <td><label for="name">姓名：</label></td>
      <td><input type="text" id="name" name="name"></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" value="提交"></td>
    </tr>
  </table>
</form>

5. 语义化 HTML5 元素：`<fieldset>` 和 `<legend>`

现代 HTML5 提供了语义化标签来增强表单的结构和无障碍访问性（可读性）。

<fieldset>：将表单内的相关元素进行逻辑分组，浏览器通常会为它画一个边框。
<legend>：为 <fieldset> 定义一个标题（说明文字）。

示例：

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名：</label><br>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">邮箱：</label><br>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>联系偏好</legend>
    <label for="phone">电话：</label><br>
    <input type="text" id="phone" name="phone"><br><br>
    <label for="contact_method">首选联系方式：</label><br>
    <select id="contact_method" name="contact_method">
      <option value="email">邮件</option>
      <option value="phone">电话</option>
    </select>
  </fieldset>

  <input type="submit" value="提交">
</form>

这个例子中，表单被清晰地划分成了“个人信息”和“联系偏好”两个区块。这不仅在视觉上更清晰，也让屏幕阅读器能更好地理解表单结构。

1. 认识 <form> 标签