freeCodeCamp 基础 HTML 挑战精讲：为 Radio Buttons 与 Checkboxes 设置 `value` 属性，根治表单提交出现无意义的 `on`

表单（form）提交时，被选中的单选按钮和复选框会以"字段名=字段值"的键值对形式把数据发往服务器。如果没有为它们设置 value 属性，浏览器会退回默认值 on，导致服务器端拿到一堆无法区分选项的数据。本篇文章以 freeCodeCamp 开源仓库中 "Basic HTML and HTML5" 课程单元的第 23 道挑战（Use the value attribute with Radio Buttons and Checkboxes）为主体，完整讲解 radio/checkbox 的提交取值机制、逐条验收（hints）规则的实现原理，并给出可直接运行的解题代码，帮助你彻底理解 name、value、id 与 label 如何协同完成一次可靠的表单提交。

挑战在课程中的位置与文档结构

这道挑战的文件位于仓库 curriculum/challenges/english/blocks/basic-html-and-html5/5c6c06847491271903d37cfd.md，属于免费响应式 Web 设计认证（Responsive Web Design）大课程下 basic-html-and-html5 代码块。它的前驱是两道上节课：

1. Create a Set of Radio Buttons：学会用相同 name 的 input[type="radio"] 建立单选组；
2. Create a Set of Checkboxes：学会用相同 name 的 input[type="checkbox"] 建立多选组。

本章（下一题）则是 Check Radio Buttons and Checkboxes by Default，讲解 checked 默认选中。课程顺序由块级清单 curriculum/structure/blocks/basic-html-and-html5.json 中的 challengeOrder 定义，而该块被挂载到 curriculum/structure/superblocks/responsive-web-design.json 声明的 Responsive Web Design 大课程下。

从该文档的 YAML 头（frontmatter）可以看出 freeCodeCamp 挑战的标准元数据结构：

id: 5c6c06847491271903d37cfd
title: Use the value attribute with Radio Buttons and Checkboxes
challengeType: 0
forumTopicId: 301099
dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes

其中 challengeType: 0 表示 HTML 挑战。在仓库 packages/shared/src/config/challenge-types.ts 中，类型枚举第一行就是 const html = 0;；curriculum/schema/challenge-schema.js 的 Joi 校验则要求 challengeType 取值在 0 到 33 之间且必填，保证每个挑战文件的类型与结构合法。

文档正文则遵循 --description--（讲解）、--instructions--（任务）、--hints--（自动验收）、--seed-contents--（初始代码）、--solutions--（参考解答）的固定分区。

核心概念：提交数据里的 name=value 键值对

当表单被提交时，数据会发往服务器，其中包含用户所选选项的条目。type 为 radio 和 checkbox 的输入控件，其上报的值来自各自的 value 属性。

原文档给出的示例：

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>

这里有两个 radio 输入。当用户勾选了 indoor 项并提交表单时，表单数据会包含这样一行：indoor-outdoor=indoor。这个结果正是由 "indoor" 输入框的 name 与 value 属性组合而来：name 充当数据字段名，value 充当该字段的值。

下表总结了单选按钮、复选框与普通文本框在提交时的差异：

控件类型	用户输入内容如何上报	是否随表单提交	含义
input[type="radio"]	只上报被选中项的 value（由开发者写死）	仅选中的项	同一 name 下只能提交一个值
input[type="checkbox"]	每个被勾选项分别上报各自 value	勾选的项全部上报	同一 name 下可提交多个值
input[type="text"]	上报用户输入的字符串本身	是	值为用户实时键入内容

如果省略 value 属性，被提交的表单数据会使用默认值 on。仍以上例来说，若用户点击了 "indoor" 选项并提交，得到的表单数据会是 indoor-outdoor=on——服务器完全无法知道用户到底选的是 Indoor 还是 Outdoor，因为这两个选项的提交值都是 on，毫无区分度。因此，value 属性必须被设置为能够标识该选项的具体内容。

任务要求逐条解读

原文档的 --instructions-- 表述如下：

给已有的每一个 radio 和 checkbox 输入控件加上 value 属性。不要新建任何单选或复选元素。使用小写的输入标签文本作为该属性的值。

拆解出三个约束：

1. 只补属性，不增元素：现有表单里已经有 2 个单选框（indoor、outdoor）和 3 个复选框（loving、lazy、energetic），解题只能修改已有标签；
2. value 来自标签文本：例如可见文本为 "Loving" 的选项，其 value 应写为小写 loving；
3. 单选组与多选组的 name 保持不变：radio 保持 name="indoor-outdoor"，checkbox 保持 name="personality"，才能维持原有分组语义。

初始代码分析（--seed-contents--）

挑战给出的浏览器中初始代码如下（含上两道题的成果）：

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>catnip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
    <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
    <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

注意观察：每个 label 通过 for="id" 与对应 input 的 id 显式关联；radio 全部共享 name="indoor-outdoor"（单选组），checkbox 全部共享 name="personality"（多选组）。但此刻所有 input 都没有 value 属性，这正是本次要修复的缺陷。

一步一步解题：补全 value 属性

解法要点是把每个选项的 value 写成其标签文本的小写形式。逐行修改：

• Indoor（室内）→ value="indoor"
• Outdoor（室外）→ value="outdoor"
• Loving（有爱）→ value="loving"
• Lazy（慵懒）→ value="lazy"
• Energetic（活泼）→ value="energetic"

修改后完整的参考解答（与文档 --solutions-- 分区一致）：

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>catnip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
    <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
    <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

现在提交行为就完全可预期了：如果用户只勾选 Indoor 并点击 Submit，服务器收到的表单字段是 indoor-outdoor=indoor；如果用户同时勾选 Loving、Lazy 两个复选框，则会收到 personality=loving 与 personality=lazy 两条记录（多选组允许多值）。无论单选组还是多选组，字段内容都携带了明确的语义。

Hints 即自动化测试：验收逻辑剖析

freeCodeCamp 的每个 --hints-- 条目本质上是一段运行在浏览器 DOM 上的 JavaScript 断言。本题有 5 条 hint，分别校验 5 个输入框的值：

Hint 描述	对应断言	校验目标
某个单选按钮的 value 应为 indoor	document.querySelectorAll('label > input[type="radio"]') 过滤出 x.value === "indoor" 非空	input#indoor
某个单选按钮的 value 应为 outdoor	同上，过滤 x.value === "outdoor" 非空	input#outdoor
某个复选框的 value 应为 loving	label > input[type="checkbox"] 过滤 x.value === "loving" 非空	input#loving
某个复选框的 value 应为 lazy	同上，过滤 x.value === "lazy" 非空	input#lazy
某个复选框的 value 应为 energetic	同上，过滤 x.value === "energetic" 非空	input#energetic

例如第一条的原始断言代码是：

const indoorRadioButton = [...document.querySelectorAll('label > input[type="radio"]')].filter(x => x.value === "indoor");
assert.notEmpty(indoorRadioButton)

从中可以读出三个验证细节：

1. 选择器限定为 label > input：要求输入框必须嵌套在 label 内部，保持本块系列课程一贯的"隐式关联"写法；
2. 类型限定：radio 与 checkbox 分别用 input[type="radio"]、input[type="checkbox"] 精确圈定，避免 5 个输入框互相干扰；
3. 值为精确匹配：x.value === "indoor" 是全等比较，说明题目要求的小写值必须一字不差。

补充说明与最佳实践

• 为什么要避免默认的 on：checkbox 与 radio 都属于"布尔型"控件，历史规范规定其默认提交值为字符串 on。只要同一 name 下有多个选项，on 就无法区分具体选项，数据等于废数据；真实项目里服务器通常依赖该值做业务判断（如 indoor=1、indoor=indoor），所以必须显式赋值。
• 多值提交的既有天然设计：多选组同一 name 可对应多个值，这正是 checkbox 与 radio 在 name 复用上的本质差异——前驱挑战 Create a Set of Checkboxes 要求三个复选框共用 name="personality"，配合本题的 value，服务端才能按名字拿到一组被勾选特征。
• 标签文本与 value 的取值策略：本题的约束是"用小写标签文本作为 value"。实践中很多表单会使用与标签同义的稳定标识（如短横线小写 cat-lover），核心原则永远是"值能唯一代表这个选项"。
• 对照默认选中写法：本题之后紧接着讲解 checked 属性（见 Check Radio Buttons and Checkboxes by Default），checked 决定"哪个选项默认被选中"，与决定"选中后提交什么值"的 value 互不干扰、常配合使用。

如何在本仓库中校验与复现

若想在本地观察挑战结构与内容：

• 阅读原挑战文档 curriculum/challenges/english/blocks/basic-html-and-html5/5c6c06847491271903d37cfd.md 查看完整 description、hints、seed 与 solution；
• 通过 curriculum/structure/blocks/basic-html-and-html5.json 确认它在课程链中的位置（位于 "Create a Set of Checkboxes" 之后、"Check Radio Buttons and Checkboxes by Default" 之前）；
• 用文档里给出的最终 HTML 直接粘贴到任意 HTML 页面，勾选选项后提交到示例 action 地址，即可在请求中观察到 indoor-outdoor=indoor 这类正确携带语义的键值对，直观验证 value 的作用。

小结

这道题为初学者揭示了 HTML 表单中最容易忽略的机制：单选与复选控件自身不产生文本内容，其提交值完全由开发者通过 value 属性指定；一旦省略，浏览器只会送出无区分度的 on。掌握 name（数据字段名）与 value（字段值）的组合规则，是正确设计可维护表单、理解服务端表单解析逻辑的起点，也是后续学习 checked 默认选中、以及更复杂的表单校验的必备基础。