HTML 表单

表单（<form>）让用户输入数据并提交到服务器。从登录框、搜索栏到复杂的注册页面，所有用户输入都离不开表单。

第一个表单

html 
<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">提交</button>
</form>

<form> 核心属性

属性说明
action数据提交到的 URL
methodHTTP 请求方法：GET 或 POST
enctype数据编码方式（文件上传时用 multipart/form-data）
autocomplete是否启用浏览器自动填充
novalidate禁用浏览器原生验证

GET vs POST

GETPOST
数据位置URL 查询字符串请求体
可见性地址栏可见不可见
数据量有限（约 2KB）大
缓存可缓存不可缓存
用途搜索、筛选登录、注册、上传
html 
<!-- GET：搜索表单 -->
<form action="/search" method="get">
  <input type="text" name="q" placeholder="搜索...">
  <button type="submit">搜索</button>
</form>
<!-- 提交后 URL: /search?q=HTML -->

<!-- POST：登录表单 -->
<form action="/login" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
</form>

绝不要用 GET 提交密码等敏感信息——它们会暴露在 URL 和浏览器历史记录中。敏感数据一律用 POST。

<label> — 标签

<label> 为表单控件提供文字说明。关联方式有两种：

html 
<!-- 方式一：for 属性关联 id -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 方式二：将 input 包在 label 内 -->
<label>
  用户名：
  <input type="text" name="username">
</label>

点击 <label> 会自动聚焦到对应的输入框。这对于复选框和单选框（小点击目标）尤其重要，能显著提升可用性。

<fieldset> + <legend> — 分组

将相关字段组织在一起：

html 
<fieldset>
  <legend>个人信息</legend>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age">
</fieldset>

<fieldset>
  <legend>偏好设置</legend>
  <label>
    <input type="checkbox" name="newsletter"> 订阅新闻简报
  </label>
</fieldset>

<legend> 作为分组标题，浏览器会渲染在边框上。