radio标签用法
```html
<input type="radio" name="group_name" value="option_value" checked>
```
其中，常用的属性包括：
- `name`：定义单选按钮组的名称。
- `value`：定义单选按钮的值。
- `checked`：设置单选按钮默认选中状态。
需要注意的是，`name`属性用于将单选按钮分组，使用户只能选择单选按钮组中的一个选项。
1.创建单选按钮组
首先，使用`<form>`元素来创建一个表单，并使用`<fieldset>`元素来创建一个字段集，将相关的单选按钮分组。然后，使用`<label>`元素和`<input>`元素来创建一个单选按钮，如下所示：
```html
<form>
<fieldset>
<label>
<input type="radio" name="gender" value="male" checked>
Male
</label>
<label>
<input type="radio" name="gender" value="female">
Female
</label>
</fieldset>
</form>
```
上述代码创建了一个名为"gender"的单选按钮组，其中包含了两个选项："Male"和"Female"，默认选中的是"Male"。
2.设置默认选中状态
可以通过添加`checked`属性来设置单选按钮的默认选中状态。只有在一个单选按钮组中，只能有一个选项被选中。例如，下面的代码将"Female"设置为默认选中：
```html
<label>
<input type="radio" name="gender" value="male">
Male
</label>
<label>
<input type="radio" name="gender" value="female" checked>
Female
</label>
```
3.获取用户选择的选项值
要获取用户选择的选项值，可以使用JavaScript或服务器端代码来处理表单提交。在JavaScript中，可以使用`document.querySelector(`方法来获取选中的选项值。例如：
```javascript
var selectedOption = document.querySelector('input[name="gender"]:checked').value;
console.log(selectedOption);
```
上述代码将输出选中的单选按钮的值。
4.创建垂直布局的单选按钮组
默认情况下，单选按钮是水平排列的。如果希望它们垂直排列，可以使用CSS来实现。具体做法是使用CSS的`display`属性和`flex-direction`属性。
下面是一个例子：
```html
<style>
.radio-group
display: flex;
flex-direction: column;
}
</style>
<form>
<fieldset class="radio-group">
<label>
<input type="radio" name="gender" value="male" checked>
Male
</label>
html radio点击变颜
<label>
<input type="radio" name="gender" value="female">
Female
</label>
</fieldset>
</form>
```
上述代码将单选按钮垂直排列。
总结：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。