2024年4月12日发(作者：)

radio标签用法

```html

checked>

```

其中，常用的属性包括：

- `name`：定义单选按钮组的名称。

- `value`：定义单选按钮的值。

- `checked`：设置单选按钮默认选中状态。

需要注意的是，`name`属性用于将单选按钮分组，使用户只能选择单

选按钮组中的一个选项。

1.创建单选按钮组

首先，使用`

`元素来创建一个表单，并使用`
`元素

来创建一个字段集，将相关的单选按钮分组。然后，使用`

和``元素来创建一个单选按钮，如下所示：

```html

Male

Female

```

上述代码创建了一个名为"gender"的单选按钮组，其中包含了两个选

项："Male"和"Female"，默认选中的是"Male"。

2.设置默认选中状态

可以通过添加`checked`属性来设置单选按钮的默认选中状态。只有

在一个单选按钮组中，只能有一个选项被选中。例如，下面的代码将

"Female"设置为默认选中：

```html

Male

Female

```

3.获取用户选择的选项值

要获取用户选择的选项值，可以使用JavaScript或服务器端代码来

处理表单提交。在JavaScript中，可以使用`elector(`

方法来获取选中的选项值。例如：

```javascript

var selectedOption =

elector('input[name="gender"]:checked').value;

(selectedOption);

```

上述代码将输出选中的单选按钮的值。

4.创建垂直布局的单选按钮组

默认情况下，单选按钮是水平排列的。如果希望它们垂直排列，可以

使用CSS来实现。具体做法是使用CSS的`display`属性和`flex-

direction`属性。

下面是一个例子：

```html

Male

Female

```

上述代码将单选按钮垂直排列。

总结：