虽然似乎每年都会推出新的网络技术来吸引访问者，但有些技术经受住了时间的考验，不会消失。在这篇文章中，成都网站建设将讨论这样一个元素，即不起眼的HTML单选按钮。
从联系表格到多项选择测试，您以前可能见过单选按钮（即使您不确切知道它们叫什么）。如果您想从网站前端收集用户信息，这些圆形元素是必须了解的。
方便的是，HTML有一个内置的单选按钮输入类型，并且在页面上实现它们非常简单。在这里，我们将回顾什么是单选按钮、何时使用它们以及如何使用HTML中的单选按钮编写表单。
什么是HTML单选按钮？
在HTML中，单选按钮是一种交互式页面元素，用于从多个选项中选择一个选项。取消选择时，单选按钮显示为空圆圈。当用鼠标单击或用键盘选择时，圆圈会填充以指示选择，单选按钮与标签配对（通常是文本，有时是图像）-这是用户在选择特定单选按钮时所选择的内容。
单选按钮几乎总是以两个或多个为一组出现，以表示相关的、互斥的选项。在这组选项中，用户一次只能选择一个。这意味着选择一个单选按钮会取消选择组中另一个选定的按钮。此外，用户无法通过单击单选按钮来取消选择它。取消选择单选按钮的唯一方法是选择组中的另一个选项。
单选按钮与复选框
单选按钮类似于另一个常见的交互元素，即复选框。两者之间的差异很小，但值得注意：单选按钮允许用户为每组选择一个选项，而复选框则让用户为每组选择（或“选中”）一个、多个或不选择选项。用户还可以通过单击取消选择复选框-单选按钮不允许这样做。
我承认这不是最激动人心的话题。然而，混淆这两者可能会导致访问者严重困惑。因此，请务必使用“选择一个”菜单的单选按钮，并为“选择所有适用的”菜单或一次性问题保留复选框（即“如果……请选中此框”）。
现在我们了解了HTML单选按钮的用途，接下来让我们学习如何制作它们。
如何在HTML中制作单选按钮
要在HTML中创建单选按钮，请使用带有radio类型的<input>元素。
这里我们有三个radio类型的<input>元素，还有一些新属性。每个<input>还有一个新的<label>元素。让我们回顾一下我们添加到代码中的每一项内容。
首先，id属性是<input>标记的唯一标识符。它可以用作单选按钮元素的CSS选择器，并且还将按钮与其相应的<label>联合起来。
如前所述，单选按钮是成组的。使用所需的名称属性将一组相关的单选按钮分组在一起。在上面的示例中，所有<input>共享相同的name值，因此它们被视为同一组的一部分。这让用户一次只能选择一组中的一个选项-试试上面的方法。
接下来，value属性表示单选按钮的唯一值。用户看不到它，但它被提交以代表所选的选项。例如，如果提交上面的表单时选择了“17岁或以下”项目，则处理该表单的系统将收到值Age=child。如果用户未选择任何单选按钮，则不会发送任何值。如果所选选项缺少值属性，则表单将发送默认值。
请注意，<input>标记仅创建单选按钮元素，而不是标签。要为单选按钮添加标签，请在<input>元素后面添加一个<label>元素，并插入一个与关联<input>元素的id具有相同值的for属性。然后，在<label>标记中写入标签文本。
虽然使用<label>并不是绝对必要的，但由于两个原因，它被认为是最佳实践。首先，语义丰富的<label>元素使使用屏幕阅读器的人更容易访问您的网站。它告诉他们哪个标签与哪个单选按钮配对。其次，for属性允许用户通过单击标签本身以及按钮来选择单选按钮，从而使表单更易于使用。
最后，<br>（换行符）标记将每个选项放在一个新行上。尝试删除上面示例中的这些标签，将所有选项放在同一行。
最后成都网站建设提醒一下，请确保您在正确的情况下使用单选按钮。当您希望用户从一组中仅选择一个选项时，请记住使用单选按钮；如果您希望允许用户选择多个选项并取消选中他们的选择，请记住使用复选框。
