今天就来唠唠我捣鼓那个 `input radio` 单选按钮的经历。平时做网页填东西的时候老用，但自己从头写一遍还是有点不一样。
从零开始放按钮
我就想着在一个表单里加个选项，比如说让用户选个性别，“男”或者“女”。挺简单的想法，直接就上手写两个 `input` 标签。
大概是这样：
<input type="radio" value="男"> 男
<input type="radio" value="女"> 女
放上去一看，样子是出来，两个小圆点，旁边跟着字。但点一下“男”，再点一下“女”，诶？两个都选上？这不对，单选按钮不就该是只能选一个嘛
解决多选问题：分组
我就纳闷，这俩按钮咋跟陌生人似的，各选各的。琢磨一下，想起来，得给它们起个一样的“队伍名”，这样浏览器才知道它们是一伙儿的，选这个就不能选那个。
这个“队伍名”就是 `name` 属性。赶紧给它们加上，都叫 `sex` ，简单明。
<input type="radio" value="男" name="sex"> 男
<input type="radio" value="女" name="sex"> 女
加上相同的 `name` 属性之后，再去页面上点点看。这下对！点“男”，“男”被选中；再去点“女”，“女”被选中，“男”那边就自动取消选中。这才像话嘛搞定分组。
设置默认选中项
下一个问题来。有时候，我希望页面一加载进来，默认就有一个选项是被选中的，比如默认选中“男”。总不能让用户每次都必须自己点一下。
这个也好办，我记得有个属性可以直接让它默认就被勾上。找一下，是 `checked` 属性。
试着在“男”那个 `input` 标签里加上 `checked`：
<input type="radio" value="男" name="sex" checked> 男
<input type="radio" value="女" name="sex"> 女
刷新页面一看，果然，“男”那个选项的小圆点默认就是黑的，已经被选中。如果想默认选“女”，就把 `checked` 加到“女”那个 `input` 上就行。挺方便的。
提升体验：关联标签
基本上功能是实现，但我又发现个小问题。我习惯性地去点“男”或者“女”这两个字，想选中对应的选项，结果没反应，必须得精确地点击那个小小的圆圈才行。这用户体验可不太
这个问题得用 ` 标签来解决。它可以把文字和那个单选按钮关联起来。
得给每个 `input` 加个 `id`，然后 `label` 标签用 `for` 属性指向这个 `id`。
改下代码：
这么一改，现在再去页面上试试，无论是点击那个小圆点，还是点击旁边的文字“男”或“女”，都能选中对应的单选按钮。舒服多！
小结
搞定这个 `input radio` 不难，关键就几步：
- 用 `type="radio"` 创建单选按钮。
- 用相同的 `name` 属性把它们编成一组，实现单选效果。
- 用 `checked` 属性设置默认选中的项。
- 用 ` 改善用户点击体验。
按这几步走下来，一个功能完整、用着也顺手的单选按钮组就做好。实践下来感觉还是挺直接的，记住这几个要点，以后用起来就顺手多。