表单基础

讲解

表单是网页与用户交换数据的通道：登录、搜索、下单、留言，背后都是 <form>。form 元素有两个核心属性：action 是数据提交到的服务器地址，method 是提交方式——get 把数据拼在 URL 问号后面（可见、可收藏，适合搜索这类「读取」操作），post 把数据放在请求体里（不可见、无长度限制，适合登录、下单这类「写入」操作）。语义规则很简单：不改变服务器状态的用 get，改变的用 post。

表单里每个输入控件靠 name 属性标识——提交时浏览器按 name=值 的格式组织数据，没有 name 的控件根本不会出现在提交数据里，这是新手最常踩的坑。value 是控件的当前值；对文本框它是初始内容，对提交按钮它是按钮文字。

<label> 是表单体验的灵魂：它给控件一个可点击的名字。用 <label for="email"> 关联控件的 id="email"（或直接把控件包在 label 里）之后，点击文字就能聚焦输入框——对触屏用户是放大点击区域，对读屏用户是念出字段名，缺一不可。placeholder 是输入框内的灰色提示，它不能替代 label：一旦输入内容提示就消失，用户会忘记这个框要填什么。required 标记必填，浏览器会在提交时做最基础的校验。

示例

<!-- 搜索：读取操作用 get，数据出现在 URL 里 -->
<form action="/search" method="get">
  <label for="keyword">关键词</label>
  <input type="text" id="keyword" name="keyword" placeholder="输入教程名，如 HTML" required />
  <button type="submit">搜索</button>
</form>

<!-- 登录：写入操作用 post -->
<form action="/login" method="post">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username" required />

  <label for="password">密码</label>
  <input type="password" id="password" name="password" required />

  <button type="submit">登录</button>
</form>

<!-- label 的另一种写法：直接包裹控件 -->
<label>
  <input type="checkbox" name="agree" value="yes" />
  我已阅读并同意服务条款
</label>

提交登录表单时，浏览器发出的数据形如 username=小明&password=123456——name 是键，用户输入是值。

常见坑

• 控件忘写 name：提交后服务器收不到这个字段，排查半天发现是 HTML 少了属性。每个要提交的控件都必须有 name。
• 用 placeholder 代替 label：输入后提示消失、读屏软件不一定念它、灰色文字对比度常常不达标。placeholder 只能做补充示例。
• 敏感操作用 get：密码出现在 URL 里，会留在浏览器历史和服务器日志中，是明确的安全事故。写入操作一律 post。
• label 的 for 与控件 id 对不上：for 关联的是 id 不是 name，写错一个字符关联就断了，点击文字无反应。

小结

form 用 action/method 定义提交去向与方式（读用 get、写用 post）；控件靠 name 进入提交数据；label 关联 id 提供可点可读的字段名；required 做基础校验。下一章盘点浏览器自带的丰富表单控件。