2026-09-04 日报

今日主题

freeCodeCamp · Learn HTML · Ch4 Certification Project · Survey Form

BriefIntroduction

HTML 章认证项目：Build a Survey Form。把表单、label、分组、基础校验揉进一个可提交的问卷页。

项目页：在 RWD v9 的 HTML 章里完成 Survey Form lab / cert project。

---

一、目标清单（User Stories 备忘）

按课程测试为准，常见要求大致包括：

• 有页面标题（h1#title 一类）
• 有说明文案（p#description）
• 有 <form id="survey-form">
• Name / Email / Number 等字段，且都有对应 label
• 下拉 select、单选 radio、多选 checkbox
• 多行 textarea
• 提交按钮 button / input type="submit"

（具体 id / 文案以 freeCodeCamp 当前测试套件为准。）

---

二、实现要点

结构

<h1 id="title">……</h1>
<p id="description">……</p>
<form id="survey-form">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />

  <label for="number">Age</label>
  <input id="number" name="age" type="number" min="1" max="120" />

  <!-- select / radio / checkbox / textarea / submit -->
</form>

注意

• 每个输入都要有可见、可关联的 label（点文字也能聚焦）
• radio 同组 name 相同；checkbox 可用数组式 name 或不同 name
• required、合理的 type / min / max 先过客户端校验
• 先过测试再纠结样式；样式可后补 CSS

---

三、自测

• 本地打开，Tab 键能按预期聚焦
• 空提交会触发浏览器校验提示
• freeCodeCamp 测试套件全绿

---

四、今日随记

（边做边记坑：测例、命名、分组……）