嘿，我太懂你刚接触表单时的这种懵圈感了！咱们把这些属性的作用一个个拆开来，你立马就能明白课程里说的问题到底在哪。

首先得把几个属性的分工彻底搞清楚，它们各司其职，千万别混在一起：

1. 先说说你最困惑的「为什么提交的是indoor-outdoor=on」 #

你以为选了Indoor就会提交Indoor=on？其实不是的——表单提交数据的键名，是由单选按钮的name属性决定的，不是选项的文本（比如“Indoor”），也不是id！

你这组单选按钮的name是indoor-outdoor，所以不管用户选哪个选项，提交的键都是indoor-outdoor。而如果没给input加value属性，浏览器会自动用默认值on来当提交的值。这就导致了一个大问题：不管用户选的是Indoor还是Outdoor，后端收到的都是indoor-outdoor=on，完全分不清用户到底选了啥，这数据可不就没用嘛！

2. 再理清楚各个属性的真实作用 #

- name属性：分组+提交键名 #

• 对单选按钮来说，同一组的按钮必须设置相同的name，这样浏览器才知道它们是“多选一”的关系（比如选了Indoor就不能选Outdoor）。
• 同时，name的值就是表单提交时的「键名」，后端会通过这个键来接收对应的值。

- id和for属性：纯交互优化 #

这俩是配对用的，和表单提交数据半毛钱关系都没有！设置它们的目的是：当用户点击<label>里的文字（比如“Indoor”）时，对应的单选按钮会被选中，不用非得点那个小圆圈，提升用户体验而已。id是给<input>标唯一标识，for是让<label>知道自己要关联哪个<input>。

- value属性：提交的具体值 #

这个才是用来区分不同选项的关键！给每个单选按钮设置不同的value，提交时就会把选中按钮的value值传给后端。比如：

<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>

选Indoor提交，后端收到的是indoor-outdoor=indoor；选Outdoor则是indoor-outdoor=outdoor，这样后端就能明确知道用户的选择了。

最后再给你捋一遍逻辑 #

你之前的写法没问题，但只是完成了「能选」的交互，没解决「提交后能识别选择」的问题。课程说的“没用”，指的是后端拿到的数据无法区分用户选了哪个选项，而不是代码本身报错。

现在再回头看是不是就清晰多啦？

内容来源于stack exchange