在HTML中怎么设置单选按钮

在HTML中，单选按钮是input元素的一种类型，使用type属性设置为“radio”。单选按钮可以在一组选项中选择其中一个。

以下是设置单选按钮的步骤：

1. 创建input元素

在HTML中，使用<input>标签创建input元素。需要为单选按钮设置type属性为“radio”。

<label>选项1<input type="radio" name="radio-group"></label>
<label>选项2<input type="radio" name="radio-group"></label>
<label>选项3<input type="radio" name="radio-group"></label>

这段代码创建了3个单选按钮，它们名称相同，因此它们被视为一组。

2. 设置name属性

单选按钮需要设置name属性，以使它们成为一组。名称必须在单选按钮之间相同。

3. 创建label元素

label元素与input元素关联，以便用户可以单击标签或单选按钮本身来选择选项。可以将单选按钮放在label元素内。在label元素中，可以使用一段文本作为标签。

4. 设置value属性

可以使用value属性为每个单选按钮设置值。当选中选项时，这个值将与form提交一起发送给服务器。

<label>选项1<input type="radio" name="radio-group" value="选项1"></label>
<label>选项2<input type="radio" name="radio-group" value="选项2"></label>
<label>选项3<input type="radio" name="radio-group" value="选项3"></label>

5. 设置checked属性

可以使用checked属性将一个单选按钮设置为默认选择。要用checked属性设置默认选择，请将其设置为“checked”。

<label>选项1<input type="radio" name="radio-group" value="选项1" checked></label>
<label>选项2<input type="radio" name="radio-group" value="选项2"></label>
<label>选项3<input type="radio" name="radio-group" value="选项3"></label>

这段代码将“选项1”设置为默认选择。

6. 使用CSS为单选按钮设置样式

可以使用CSS为单选按钮设置样式，如边框、颜色等。

input[type="radio"] {
  border: 1px solid gray;
  background: white;
  color: black;
  padding: 5px;
  margin: 5px;
}

以上就是在HTML中设置单选按钮的步骤。要使单选按钮生效，需要将它们放在<form>标记内。当用户单击单选按钮时，单选按钮的value值将包含在提交表单的请求中。