如何在HTML中创建单选按钮[+示例]

虽然似乎每年都会推出新的网络技术来吸引访问者，但有些技术经受住了时间的考验，不会消失。在这篇文章中，我们将讨论其中一个元素，不起眼的HTML单选按钮。

从联系人表单到多项选择测试，您以前可能见过单选按钮(即使您不知道它们的确切名称)。如果你想从网站的前端收集用户信息，这些循环元素是必须知道的。

方便,超文本标记语言具有单选按钮的内置输入类型，并且在页面上实现它们非常简单。在这里，我们将回顾什么是单选按钮，何时使用它们，以及如何用HTML编写带有单选按钮的表单。

单选按钮几乎总是以两个或更多的组合出现，以表示相关的、互斥的选项。在这组选项中，用户一次只能选择一个。这意味着选择单选按钮将取消选择组中的另一个选中按钮。此外，用户不能通过点击单选按钮来取消选择。取消选择单选按钮的唯一方法是在组中选择另一个选项。

单选按钮vs.复选框

单选按钮类似于另一个常见的交互元素复选框。这两者之间的区别很小，但值得注意:单选按钮让用户在每个组中只选择一个选项，而复选框让用户在每个组中选择一个、多个或不选择选项。用户也可以通过点击复选框来取消选择——单选按钮不允许这样做。

我承认这不是最激动人心的话题。然而，如果把这两者混在一起，可能会让访问者产生严重的困惑。所以，一定要使用单选按钮的“选择一个”菜单，并保存复选框的“选择所有应用”菜单或一次性问题(例如，“如果……请选中此框”)。

现在我们了解了HTML单选按钮的用途，让我们学习如何制作它们。

如何在HTML中制作单选按钮

要在HTML中创建单选按钮，使用<输入>元素的类型广播．这就创建了一个用户可以交互的单选按钮:

看到这支笔单一的单选按钮作者:Christina Perricone (@hubspot)CodePen．

当然，我们还需要添加一些代码来实现这一点。具体来说，我们希望为每个按钮设置多个按钮和标签。下面是一个简单的单选按钮组，只使用HTML:

看到这支笔单选按钮组作者:Christina Perricone (@hubspot)CodePen．

这里有三个<输入>元素的类型广播，也有一些新的属性。还有一个新的<标识>元素为每个<输入>．让我们回顾一下我们添加到代码中的每一项内容。

首先,id属性的唯一标识符是<输入>标签。它可以被用作CSS选择器对于单选按钮元素，它还将按钮与其相应的元素统一起来<标识>．

如前所述，单选按钮以组的形式出现。使用所需的的名字属性将一组相关的单选按钮分组在一起。在上面的例子中，所有<输入>S的值相同的名字，所以他们被视为同一群体的一部分。这让用户一次只能在一个组中选择一个选项——试试上面的方法。

接下来,价值属性表示单选按钮的唯一值。用户看不到它，但是它被提交来表示所选的选项。例如，如果在提交上述表单时选择了“17岁或更年轻”项，则处理该表单的系统将收到该值孩子年龄=．如果用户没有选择任何单选按钮，则不会发送任何值。如果价值属性缺失时，表单将发送默认值在．

请注意,<输入>标签只创建单选按钮元素，而不创建标签。要为单选按钮添加标签，请添加<标识>元素后<输入>元素，并插入为属性的值与id的相关的<输入>元素。然后，将标签文本写在<标识>标签。

在使用<标识>这并不是必须的，它被认为是一种最佳实践有两个原因。首先,丰富的语义<标识>元素使您的网站更容易访问对于使用屏幕阅读器的人。它告诉他们哪个标签与哪个单选按钮配对。第二,为属性允许用户通过单击按钮之外的标签本身来选择单选按钮，从而使表单更易于使用。

最后,
(换行符)标记将每个选项放在新行中。尝试删除上面示例中的这些标记，将所有选项放在同一行。

检查属性

单选按钮输入有一个附加属性检查属性．如果包括在<输入>标签时，按钮将默认被选中。

看到这支笔带有默认选择的单选按钮表单作者:Christina Perricone (@hubspot)CodePen．

如何在表单中放置HTML单选按钮

如果用户不能发送他们的回复，单选按钮还有什么用?这就是为什么单选按钮通常放在HTML表单中。HTML< >形式元素包含收集用户输入的子元素，例如< input type = "电台”>．

要创建一个包含单选按钮的基本表单，请将单选按钮分组封装在< >形式标签，并包括一个<按钮>类型的提交在底部。当用户单击“Submit”时，他们的响应被发送到表单处理程序。下面是一个简单的表单示例。

看到这支笔单选按钮的形式作者:Christina Perricone (@hubspot)CodePen．

单选按钮:窗体的一个简单元素

单选按钮在网上随处可见。事实上，它们非常常见，HTML为它们提供了自己的输入类型，允许任何具有HTML知识的人在页面上插入它们。只要代码编写正确，浏览器就会为您处理所有基本功能。

最后，请确保您在正确的情况下使用单选按钮。记住，当您希望用户只从组中选择一个选项时，要使用单选按钮，如果您希望用户选择多个选项并取消选择，则要使用复选框。