53. 表单 form 标签基础

本节目标：理解 form 元素是表单的”外壳”，掌握数据如何从浏览器发送到服务器。

网页上那些”登录”、“注册”、“搜索”框，背后都是 <form> 在工作。

form 是什么

<form> 是一个容器，把输入框、按钮等表单控件包在一起。

用户填完数据点提交，form 负责把所有数据打包发给服务器。

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

没有

包裹的输入框也能存在，但提交数据时不方便统一管理。

action：数据发到哪里

action 指定数据提交到哪个 URL。

<form action="/api/login">
  <!-- 表单内容 -->
</form>

数据会发送到 /api/login 这个地址，由后端的登录接口处理。

如果不写 action，数据默认提交到当前页面。

method：怎么发

method 决定数据以什么方式发送，常用的有两个值：

GET 方式

<form method="get">

数据拼在 URL 后面，像这样：

/api/search?keyword=html&page=1

特点：

数据在地址栏可见
URL 长度有限制（约 2000 字符）
可以被收藏为书签
适合搜索、筛选这类”读取”操作

POST 方式

<form method="post">

数据藏在 HTTP 请求体里，URL 上看不到。

特点：

数据不在 URL 中显示
没有大小限制
不能收藏为书签
适合登录、注册、上传文件等”写入”操作

登录表单一定要用 POST，否则密码会出现在 URL 里。

enctype：数据怎么编码

enctype 决定数据发送到服务器时的编码方式。默认是：

application/x-www-form-urlencoded

普通文本数据用这个就够了。

如果要上传文件，必须改成：

<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

上传文件时三个条件缺一不可：method=“post”、enctype=“multipart/form-data”、type=“file”。

autocomplete：自动填充

浏览器会记住用户之前输入过的值，下次自动提示。

<form autocomplete="on">

默认是开启的。如果你希望某个表单不被自动填充（比如验证码输入框），可以单独关闭：

<input type="text" name="captcha" autocomplete="off">

完整示例

一个登录表单的基本结构：

<form action="/api/login" method="post">
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">登录</button>
</form>

记住：form 只是”外壳”。里面具体有哪些输入控件，后面章节一个一个学。