在前端开发中,给单选按钮(radio buttons)分组是一个常见的需求。分组可以确保用户在同一组内只能选择一个选项。在HTML中,你可以使用name
属性来给单选按钮分组。具有相同name
属性的单选按钮将被视为同一组,用户只能选择其中的一个选项。
以下是一个简单的示例,展示了如何使用name
属性给单选按钮分组:
<form><input type="radio" id="option1" name="group1" value="Option 1"><label for="option1">选项 1</label><br><input type="radio" id="option2" name="group1" value="Option 2"><label for="option2">选项 2</label><br><input type="radio" id="option3" name="group1" value="Option 3"><label for="option3">选项 3</label><br>
</form>
在上面的示例中,我们创建了一个包含三个单选按钮的表单。这三个单选按钮都具有相同的name
属性(group1
),因此它们被视为同一组。用户只能选择其中的一个选项。
注意,每个单选按钮还具有一个唯一的id
属性,这允许我们使用<label>
元素的for
属性将标签与相应的单选按钮关联起来。这样做可以提高可访问性,因为当用户点击标签时,与之关联的单选按钮将被选中。