语义化 HTML 与表单

学习目标

这一课练习用语义化 HTML（Semantic HTML，用「含义正确的标签」描述内容结构）编写一张学习计划表。读完你应该能用标题层级和语义标签搭出结构清晰的页面，用原生表单能力做出带校验的输入，并且仅用键盘就能走完整个提交流程。

问题场景

你要给学习小组做一个「本周计划」登记表：填姓名、选方向、写目标、提交。第一版全用 div 和 span 堆出来，结果点击「姓名」两个字输入框不聚焦，按 Tab 的跳转顺序乱七八糟，空表单也能提交。这些都不是逻辑 bug，而是结构没用对——HTML 本身自带这些能力，前提是标签用得对。

核心解释

语义化标签的价值在于「把含义交给浏览器」：

• <header> <main> <section> <footer> 描述页面骨架，屏幕阅读器（为视障用户朗读页面的软件）靠它们划分区域；
• <h1> 到 <h6> 形成标题大纲，一个页面一个 <h1>，往下逐级，不要按字号挑标题；
• 表单里 <label for="name"> 关联 <input id="name"> 之后，点击文字就能聚焦输入框，读屏软件也会朗读说明文字。

校验同样有原生方案：required 标记必填，type="email" 检查邮箱格式，minlength 限制最短长度。浏览器会在提交时自动拦截并显示提示，一行 JS 都不用写：

<form id="plan-form">
  <label for="name">姓名</label>
  <input id="name" name="name" required minlength="2">

  <label for="track">方向</label>
  <select id="track" name="track" required>
    <option value="">请选择</option>
    <option value="react">React</option>
  </select>

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

示例拆解

提交后取数据用 FormData（浏览器提供的表单数据读取接口），不需要逐个 input 查值：

const form = document.querySelector('#plan-form');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止浏览器默认的整页刷新式提交
  const data = Object.fromEntries(new FormData(form));
  console.log(data); // { name: '小明', track: 'react' }
});

• event.preventDefault() 拦下默认行为时，原生校验其实已经通过——因为 submit 事件只在校验通过后才会触发。
• name 属性是 FormData 的键：没有 name 的控件不会被收集，这是表单提交的老坑。
• 验证键盘操作：刷新后只按 Tab，焦点应按「姓名 → 方向 → 提交」移动；直接按 Enter 提交空表单，浏览器会拦截并聚焦到第一个错误项。

动手任务

本课没有在线实验，全部在本机完成（用 F01 的方法起本地服务）：

1. 给「目标」加一个多行输入 <textarea>，要求必填且至少 10 个字（minlength="10"），分别用鼠标和键盘验证提示。
2. 把「方向」改成三个 <input type="radio">（同一个 name），确认只能选一个，且每个都有关联的 label。
3. 在提交处理里打印 data，确认 textarea 和 radio 的值都被取到。

常见错误

• label 没关联上：写了 <label>姓名</label><input> 却漏掉 for/id 对应，点击文字不会聚焦，读屏软件也读不出说明。
• 用 type="text" 接邮箱再自己写正则：type="email" 自带格式检查和手机键盘优化，先用原生的。
• 在提交事件里重做必填检查：原生 required 已经拦截空值，submit 处理器里再查一遍通常多余；自定义规则才需要额外处理。
• radio 忘了写同一个 name：三个 radio 各有各的 name，结果可以同时选中多个。

检查与复盘

完成下方检查题确认理解。自查清单：

• 能说出手头页面里哪些 div 该换成什么语义标签
• 知道 for/id、name、required 各自的作用，并且用纯键盘走完过一次提交流程
• 能用 FormData 一次性拿到所有输入，而不是逐个 input 读 value

参考资料

• MDN：HTML 元素参考 —— 查「有没有更贴切的标签」时用
• MDN：Web 表单学习区 —— 表单从结构到样式的系统教程
• MDN：客户端表单校验 —— required、type、minlength 的完整用法