html 单选框

作者：独夜无伴发布日期:2025-06-18 浏览:27

<!DOCTYPE html>
<html>
<head>
    <title>HTML 单选框示例</title>
</head>
<body>

<h2>选择你的性别:</h2>

<form action="/submit_form" method="post">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">其他</label><br><br>
    <input type="submit" value="提交">
</form> 

<p>注意: 一次只能选择一个单选按钮。</p>

</body>
</html>

解释说明：

<input type="radio">：定义单选按钮。用户只能从一组单选按钮中选择一个选项。
id 属性：每个单选按钮都有唯一的 id，用于与 <label> 标签关联。
name 属性：所有单选按钮的 name 属性相同（这里是 gender），确保它们属于同一组，用户只能选择其中一个。
value 属性：表示单选按钮的值，当表单提交时，选中的单选按钮的 value 会被发送到服务器。
<label> 标签：通过 for 属性与单选按钮的 id 关联，点击标签文本也会选中对应的单选按钮。

上一篇：html鼠标悬停效果

下一篇：html单选按钮标签