写法一：包在一起（隐式关联）
文字与控件在同一个 label 内，适合这种紧邻的单选、复选选项。
<label>
<input type="radio" name="session"
value="morning">
上午场
</label>使用HTML创建表单
把相关选项组成一组
fieldset（字段组）组织控件；legend（图例／组标题）说明这一组在问什么。
<fieldset>
<legend>参加场次（单选）</legend>
<label><input type="radio" name="session"
value="morning"> 上午场</label>
<label><input type="radio" name="session"
value="afternoon"> 下午场</label>
</fieldset>radio 是单选按钮；同一表单中，相同 name 把这些单选项组成互斥的一组。每个 label 则为其中一个选项提供文字说明。
为什么点击“上午场”文字，也能选中按钮？
上面的 input 写在 <label> 与 </label> 之间，是 label 的子元素。浏览器因此把“上午场”这段文字与里面的单选按钮关联起来。这叫隐式关联：不写 for，也能通过包裹关系找到对应控件。
写法二：用标识连接（显式关联）
label 与 input 可以分开写；for 必须与 input 的 id 完全一致。id 在同一页面内应唯一。
<input id="session-morning" type="radio"
name="session" value="morning">
<label for="session-morning">
上午场
</label>这两种写法都让“上午场”成为控件的名称：点击文字可以选中对应单选按钮，也方便屏幕阅读器读出选项含义。并不是把文字放在 input 旁边就会自动关联，必须使用 label 的包裹关系或正确的 for／id。
| 写法或属性 | 在本例中的作用 |
|---|---|
| label 包裹／for 与 id | 说明“上午场”这段文字属于哪个控件；不负责单选互斥。 |
name="session" | 让同一表单中的两个 radio 属于同一单选组，同时确定提交字段名。 |
value="morning" | 选中上午场时，提交该项的数据为 session=morning；提交的不是 label 的中文文字。 |
| fieldset 与 legend | 组织并说明整组控件；legend 的“参加场次”不能替代各选项的 label。 |
一个 label 对应一个控件，不要用同一个 label 包住上午、下午两个 input。隐式关联无需 for／id，但仍需要 name 才能正确分组和提交；也可保留 id 并添加匹配的 for，明确指定关联对象。
思考
如果两个单选按钮的name分别写morning和afternoon，会怎样？
展开参考分析
它们不再属于同一单选组，可以同时选中。name用于分组，value用于区分这一组选中的具体值。