在HTML中，单选按钮是一种常见的用户界面元素，它允许用户从一组选项中选择一个，要设置单选按钮，我们需要使用<input>标签，并将其类型设置为"radio"，以下是如何设置单选按钮的详细步骤：
1、创建HTML文件
我们需要创建一个HTML文件，在这个文件中，我们将添加一个表单，并在表单中添加单选按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选按钮示例</title>
</head>
<body>
<!-在这里添加表单和单选按钮 -->
</body>
</html>
2、添加表单
接下来，我们在<body>标签内添加一个<form>标签，这个标签用于包含表单的所有元素。
<form>
<!-在这里添加单选按钮 -->
</form>
3、添加单选按钮
现在，我们在<form>标签内添加单选按钮，为了实现单选功能，我们需要为每个单选按钮分配一个唯一的名称（name属性），当用户选择一个单选按钮时，与其具有相同名称的其他单选按钮将自动取消选中。
<form>
<input type="radio" name="choice" value="option1"> 选项1<br>
<input type="radio" name="choice" value="option2"> 选项2<br>
<input type="radio" name="choice" value="option3"> 选项3<br>
</form>
在上面的代码中，我们添加了三个单选按钮，分别表示选项1、选项2和选项3，每个单选按钮都有一个唯一的名称（name属性），这样用户只能选择一个选项。
4、添加提交按钮
为了让用户可以提交他们的选择，我们需要在表单中添加一个提交按钮，我们可以使用<input>标签，并将其类型设置为"submit"。
<form>
<input type="radio" name="choice" value="option1"> 选项1<br>
<input type="radio" name="choice" value="option2"> 选项2<br>
<input type="radio" name="choice" value="option3"> 选项3<br>
<input type="submit" value="提交">
</form>
5、显示结果（可选）
我们可以使用JavaScript来处理用户的选择并显示结果，为此，我们需要在HTML文件中添加一个<script>标签，在这个标签内，我们可以编写JavaScript代码来处理表单提交事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选按钮示例</title>
<script>
function handleSubmit(event) {
event.preventDefault(); // 阻止表单默认提交行为
var choice = document.querySelector('input[name="choice"]:checked').value; // 获取选中的单选按钮的值
alert("您选择了：" + choice); // 显示结果提示框
}
</script>
</head>
<body>
<form onsubmit="handleSubmit(event)">
<input type="radio" name="choice" value="option1"> 选项1<br>
<input type="radio" name="choice" value="option2"> 选项2<br>
<input type="radio" name="choice" value="option3"> 选项3<br>
<input type="submit" value="提交">
</form>
</body>
</html>
现在，当用户选择一个选项并点击提交按钮时，将弹出一个提示框显示他们选择的选项。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/370480.html
微信扫一扫 