表单：和用户对话

这是什么：<form> 表单 = 网页上收集用户输入的一组控件，<input> 负责输入、<button> 负责提交。

为什么用：前几章的网页都是"网站说、用户听"，表单让用户能说话——输入、选择、提交，网站才知道你是谁。

如何用：先搭一个只有名字输入框和提交按钮的表单骨架，页面里点「▶ 运行」就能输入试试。

表单骨架：<form>

<form>
  <label>名字：<input type='text' placeholder='请输入名字'></label>
  <button type='submit'>提交</button>
</form>

常用输入控件：<input> 的 type

<input> 是自闭合标签，type 属性决定它长什么样、干什么活：

关键细节

1. name 相同的 radio 是一组——不写 name 的话两个单选框能同时选中，就失去"单选"意义了
2. placeholder 是提示文字（幽灵提示），用户输入后消失
3. label 包住文字：点击文字也能选中控件，手机上体验好很多
4. checked 设置默认选中

多行输入与下拉框

<textarea rows='3' placeholder='自我介绍'></textarea>

<select>
  <option>北京</option>
  <option>上海</option>
  <option selected>广州</option>
</select>

❓ 常见问题

Q1：两个单选框能同时选中，「单选」失效了？

○王子 ○公主 ←—— 两个圆圈都能同时点亮

原因：radio 的"单选"不是天生的，是靠 name 分组实现的——两个控件的 name 没写或不一样，浏览器就把它们当两伙人，各自为政。 修复三步：① 找到同组所有 radio；② 给它们写上完全相同的 name，如 name='sex'；③ 刷新验证选一个另一个自动弹起。 举一反三：radio 一切异常先查 name——拼错、大小写不同都算不同组。

Q2：点了提交按钮，页面刷新、输入全没了？

原因：type='submit' 的按钮会触发表单提交，但现在还没有后端接数据，浏览器就把表单发给当前页面——地址栏多出一串 ?呱名=xxx，页面重装如新。

?%E5%91%B1%E5%90%8D=%E5%91%B1%E5%91%B1 ←—— 地址栏多出一串看不懂的东西

修复三步：① 知道这是正常现象，不是你写错了；② 练习阶段只是看效果，可以不点提交；③ 真要接住数据，等到后面学了后端再玩。 举一反三：前端表单只管"收集"，"收去哪、怎么存"是后端的事。

Q3：label 包了文字，但点击文字没反应？

原因：label 必须把 <input> 本身包进去才生效——只包文字的 label 和控件没有关联，点字当然没反应。 修复三步：① 检查 label 的内容；② 把 <input> 挪进 label 里面，文字放它后面；③ 刷新验证点文字也能选中。 举一反三：label 是控件的"感应手套"，包住了才连体，手机上点字比点小圆圈舒服十倍。

Q4：textarea 不写闭合标签会怎样？

原因：textarea 不是自闭合标签——浏览器会把它后面的所有内容都当成文本框的默认文字，直到找到 </textarea> 才罢休，后面的控件全被吞进框里。

页面上只剩一个大空框，后面的下拉框、按钮全消失了。

修复三步：① 找到 textarea；② 在该结束的位置补上 </textarea>；③ 刷新确认后面的控件回归。 举一反三：自闭合名单（input、br、hr、img）要记牢，不在名单上的一律写全闭合。

⚠️ 新手翻车现场

翻车一：radio 忘写 name，单选变多选

<p>性别：
  <label><input type='radio'>王子</label>
  <label><input type='radio'>公主</label>
</p>

翻车现象：

○王子 ○公主 ←—— 两个圆圈可以同时点亮

逐行分析：第 2~3 行的 radio 都没有 name 属性，浏览器不知道它们是"同一道单选题"，只能让它们各选各的。同一组单选框的 name 必须一字不差。正确写法：

<p>性别：
  <label><input type='radio' name='sex'>王子</label>
  <label><input type='radio' name='sex'>公主</label>
</p>

翻车二：textarea 吞掉后半页

<textarea rows='3' placeholder='自我介绍'>
<p>城市：
<select>
  <option>北京</option>
</select>

翻车现象：

页面上只剩一个大空框，「城市」和下拉框全不见了。

逐行分析：第 1 行 textarea 只写了开始标签；浏览器从那以后一直在找 </textarea>，把后面几行统统当成文本框的默认内容吞掉。教训：多行框先敲好一对标签再填属性。正确写法：

<textarea rows='3' placeholder='自我介绍'></textarea>
<p>城市：
  <select>
    <option>北京</option>
  </select>
</p>

翻车三：label 只包文字不包控件

<input type='radio' name='sex'>
<label>王子</label>

翻车现象：

点「王子」两个字没反应，只有点小圆圈才能选中。

逐行分析：第 2 行的 label 里只有文字，没有 input——它们俩没建立关联，label 就只是普通文字的容器。label 的核心价值是"点文字=点控件"。正确写法：

<label><input type='radio' name='sex'>王子</label>

📦 完整小示例

把本章控件串成一张报名表，存成 signup.html：

<h2>荷叶读书会·报名表</h2>
<form>
  <p><label>呱名：<input type='text' placeholder='你的名字'></label></p>
  <p><label>密码：<input type='password' placeholder='6 位以上'></label></p>
  <p>
    班级：
    <label><input type='radio' name='class' checked>晨读班</label>
    <label><input type='radio' name='class'>夜读班</label>
  </p>
  <p><label><input type='checkbox' checked>同意《池塘公约》</label></p>
  <p>晚餐偏好：
    <select>
      <option>虫子拼盘</option>
      <option selected>荷叶沙拉</option>
    </select>
  </p>
  <p>留言：<textarea rows='3' placeholder='想对班长说…'></textarea></p>
  <p><button type='submit'>提交报名</button></p>
</form>

人工校验：form/label/p/select/textarea/button 均开闭配对；两个 radio 的 name 相同成组；input 自闭合无需闭合；select 含两个 option；无交叉嵌套；示例无 script，无需脚本校验。

运行后在浏览器会看到：

标题「荷叶读书会·报名表」；
呱名文本框（框内有灰色提示字）、密码框（输入显示圆点）、
两个单选框（晨读班默认选中）、一个打勾的复选框「同意《池塘公约》」、
下拉框（默认显示「荷叶沙拉」）、三行高的留言框；
最下面一个「提交报名」按钮。

逐段中文精讲

• 第 1~2 行：<h2> 标题加 <form> 容器——表单把所有控件圈成"一组对话"，提交时整体打包。
• 第 3~4 行：text 收单行文字，password 输入变圆点防偸看；placeholder 是框里的灰色幽灵提示，输入即消失。
• 第 5~8 行：两个 radio 的 name 同为 class → 同组单选，checked 让晨读班默认选中；label 包住控件，点文字也能选。
• 第 9 行：checkbox 天生可多选，适合"同意条款"这类独立勾选。
• 第 10~15 行：select 下拉框，selected 指定默认项；option 随加随用。
• 第 16~17 行：textarea 多行输入，记得写闭合标签；最后 type='submit' 的按钮负责交卷。

跑通后做个小实验：把两个 radio 的 name 一个改成 class、一个改成 class2，刷新——两个能同时选上了。"单选"不是 radio 天生的，是 name 分组给的。

🎯 什么时候用它

• 注册/登录页：text 收用户名、password 收密码、radio 选性别、checkbox 勾"同意条款"——几乎所有网站的标配组合。
• 订单与问卷：select 收城市和规格，textarea 收备注留言，file 传头像凭证。
• 搜索框：一个 text 输入框加一个提交按钮，就是世界上最小的表单。

📝 本章小结

• form 是容器，收罗所有控件；type='submit' 的按钮负责提交。
• input 自闭合，type 决定长相和功能；radio 同组必须 name 相同，checked 设默认选中。
• label 包住 input：点文字＝点控件。
• select+option 下拉选一，textarea 多行输入且必须写闭合标签。
• 记忆锚点：表单像点菜单——form 是整张菜单，radio 是"套餐三选一"（name 是套餐名），checkbox 是"加料随便勾"，button 是"下单"按钮。

小练习

做一个「课程报名表单」：姓名（text）+ 密码（password）+ 课程下拉框 + 付费方式单选 + 同意条款复选框 + 提交按钮。

下一章：综合练习，把 8 章所学拼成一个完整的个人主页 🐸