HTML 表单标签

学习目标

理解 HTML <form> 标签的基本作用与结构
掌握常见表单元素的使用方式（如输入框、单选按钮、复选框等）
熟悉表单的核心属性（action、method、enctype 等）及其应用场景
能够构建结构清晰、语义合理的用户输入表单

什么是 `<form>`

<form> 标签用于在网页中创建一个表单容器，用于收集用户输入的数据。该容器可以包含多种输入控件，例如文本框、复选框、单选按钮、下拉菜单和提交按钮等。用户填写完信息后，表单数据可被发送到服务器进行处理，或通过客户端脚本（如 JavaScript）进行本地操作。

基础示例

用户信息表单

<form action="/submit" method="POST">
  <h2>用户信息</h2>
  <label for="fname">名字</label>
  <input id="fname" name="fname" placeholder="请输入您的名字" required type="text" />
  <br /><br />
  
  <label for="lname">姓氏</label>
  <input id="lname" name="lname" placeholder="请输入您的姓氏" required type="text" />
  <br /><br />
  
  <input type="submit" value="提交" />
</form>

说明：
action="/submit" 指定表单提交的目标 URL。
method="POST" 表示使用 POST 方法发送数据。
required 属性确保用户必须填写该字段才能提交。

常见表单元素

HTML 提供了丰富的表单控件，用于实现不同类型的用户交互：

元素	用途
`<input>`	通用输入控件（文本、密码、邮箱、单选、复选等）
`<button>`	可点击的按钮（提交、重置或自定义行为）
`<select>`	下拉选择列表
`<textarea>`	多行文本输入区域
`<label>`	为表单控件提供可点击的文本标签
`<fieldset>`	将相关控件分组
`<legend>`	为 `<fieldset>` 提供标题
`<datalist>`	提供输入建议（自动补全选项）
`<output>`	显示计算结果或脚本输出

核心属性

属性	描述
`name`	为表单指定名称，便于在脚本中引用
`target`	指定提交后响应内容的显示位置（如 `_blank` 新窗口）
`action`	表单数据提交的目标 URL
`method`	提交方法：`GET` 或 `POST`
`enctype`	编码类型，影响数据如何打包发送
`autocomplete`	是否启用浏览器自动填充（`on` / `off`）
`novalidate`	禁用浏览器默认的表单验证
`accept-charset`	指定表单提交时使用的字符编码（如 `UTF-8`）
`rel`	定义当前文档与目标资源的关系（较少用于表单）

方法对比

方法	特点	适用场景
`GET`	数据附加在 URL 后，长度受限，可被书签保存	查询类操作（如搜索）
`POST`	数据放在请求体中，无长度限制，不可书签化	敏感或大量数据提交（如注册、上传）

`enctype` 编码类型

值	说明
`application/x-www-form-urlencoded`	默认值，适用于普通文本数据
`multipart/form-data`	必须用于包含文件上传的表单
`text/plain`	纯文本格式，极少使用

单选按钮

Radio Buttons

用于让用户从互斥选项中选择一项，如性别选择。

<h1>性别选择</h1>
<form action="#" method="post">
  <label for="male">男</label>
  <input id="male" name="gender" type="radio" value="male" />
  
  <label for="female">女</label>
  <input id="female" name="gender" type="radio" value="female" />
  
  <label for="other">其他</label>
  <input id="other" name="gender" type="radio" value="other" />
  
  <br /><br />
  <input type="button" value="提交" />
</form>

关键点：所有单选按钮的 name 属性必须相同，才能实现互斥选择。

复选框

Checkboxes

允许用户选择多个选项，如兴趣订阅。

<h1>新闻订阅</h1>
<form action="/submit" method="POST">
  <p>请选择您感兴趣的领域：</p>
  
  <input id="tech" name="interests" type="checkbox" value="Technology" />
  <label for="tech">科技</label><br />
  
  <input id="sports" name="interests" type="checkbox" value="Sports" />
  <label for="sports">体育</label><br />
  
  <input id="music" name="interests" type="checkbox" value="Music" />
  <label for="music">音乐</label><br />
  
  <input id="movies" name="interests" type="checkbox" value="Movies" />
  <label for="movies">电影</label><br /><br />
  
  <input type="submit" value="订阅" />
</form>

注意：复选框的 name 相同但 value 不同，提交时会以数组形式发送所有选中项。

最佳实践

始终为每个输入控件添加 <label>，提升可访问性。
使用 placeholder 提供输入提示，但不能替代标签。
对必填字段使用 required 属性。
敏感操作（如支付、注册）应使用 POST 方法。
文件上传表单必须设置 enctype="multipart/form-data"。

重点总结

<form> 是用户数据输入的核心容器。
action 和 method 决定了数据如何发送到何处。
单选按钮通过共享 name 实现互斥；复选框通过相同 name 支持多选。
正确使用 enctype 对文件上传至关重要。
表单应具备良好的语义结构和可访问性支持。

思考题

为什么在包含文件上传的表单中必须设置 enctype="multipart/form-data"？如果省略会发生什么？
GET 和 POST 方法在安全性上有何区别？为什么登录表单通常使用 POST？
如何使用 <fieldset> 和 <legend> 改进一个包含“联系信息”和“账单信息”的复杂表单结构？请写出简要代码结构。