用户能顺利填写的表单

连接标签与控件，选择正确输入类型，并使用浏览器原生验证。

这一节要完成什么

加入学习反馈表单，键盘可操作，漏填或格式错误时有明确提示。

先理解：为什么要学它

每个控件都需要可被读出的名称，输入类型要匹配数据，验证规则应帮助用户完成任务，而不是提交后才猜哪里错了。

跟着做

<form action="/thanks" method="post">
  <fieldset>
    <legend>给学习主页提建议</legend>
    <label for="visitor-name">你的称呼</label>
    <input id="visitor-name" name="name" autocomplete="name" required />
    <label for="visitor-email">邮箱</label>
    <input id="visitor-email" name="email" type="email" autocomplete="email" />
    <label for="message">建议</label>
    <textarea id="message" name="message" minlength="10" required></textarea>
    <button type="submit">提交建议</button>
  </fieldset>
</form>

将表单放在 main 最后；action 暂为演示地址。
点击每个 label，焦点应跳到对应控件；否则检查 for 与 id。
空着提交，再输入错误邮箱，观察浏览器原生提示。
只用 Tab、Shift+Tab 和回车走完整个表单。

关键代码怎么读

name 是提交字段名，id 用于识别并连接 label。
fieldset 与 legend 为相关控件命名。
优先使用 email、required、minlength 等原生规则。

常见错误：看到什么，检查什么

现象	检查方法
只有 placeholder 没有 label	提示输入后会消失，也缺少稳定名称。
按钮未写 type	明确写 submit 或 button。
用 div 模拟按钮	直接使用带键盘行为的 button。

自己完成一次

增加“当前阶段”下拉框和“同意公开展示”的复选框，给两者可点击标签。

完成后再看参考答案

用带 id/name 的 select 与 option；复选框用 input type="checkbox"，label 的 for 指向其 id。

完成检查

我的页面出现了本节要求的新内容
我能不用看答案解释关键标签或属性
我主动制造并修复了至少一个错误