选择题页面的基础结构搭建
要制作选择题页面，首先需要用HTML搭建基础的结构，包含题目展示区域和选项区域。我们可以使用div容器来划分不同的功能模块，让页面结构更清晰。
基础的HTML结构代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择题页面</title>
<style>
.question-container {
width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
.question-title {
font-size: 18px;
margin-bottom: 15px;
font-weight: bold;
}
.option-item {
margin: 10px 0;
padding: 8px;
cursor: pointer;
}
.option-item:hover {
background-color: #f5f5f5;
}
.submit-btn {
margin-top: 20px;
padding: 8px 20px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.result {
margin-top: 15px;
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<div class="question-container">
<div class="question-title">第一题：以下哪个是HTML中用于创建超链接的标签？</div>
<div class="options">
<div class="option-item">
<input type="radio" name="question1" id="option1" value="A">
<label for="option1">A. <div>标签</label>
</div>
<div class="option-item">
<input type="radio" name="question1" id="option2" value="B">
<label for="option2">B. <a>标签</label>
</div>
<div class="option-item">
<input type="radio" name="question1" id="option3" value="C">
<label for="option3">C. <img>标签</label>
</div>
<div class="option-item">
<input type="radio" name="question1" id="option4" value="D">
<label for="option4">D. <p>标签</label>
</div>
</div>
<button class="submit-btn" onclick="checkAnswer()">提交答案</button>
<div class="result" id="result"></div>
</div>
</body>
</html>
核心元素的作用说明
上面的代码中用到了几个关键的HTML元素，下面分别说明它们的作用：
<input type="radio">：单选框元素，同一组题目需要设置相同的name属性，保证只能选择一个选项<label>：标签元素，通过for属性关联对应input的id，点击文字也能选中选项，提升用户体验name属性：用于区分不同题目的选项组，不同题目的name值需要不同value属性：存储选项对应的值，后续提交或者判断时会用到这个值
添加答案判断功能
仅仅有页面结构还不够，我们还需要通过JavaScript实现答案判断的功能，让用户提交后能看到结果。对应的JavaScript代码如下：
// 定义正确答案，这里第一题的正确选项是B
const correctAnswer = 'B';
function checkAnswer() {
// 获取所有name为question1的单选框
const options = document.getElementsByName('question1');
let selectedValue = null;
// 遍历选项，找到被选中的值
for (let i = 0; i < options.length; i++) {
if (options[i].checked) {
selectedValue = options[i].value;
break;
}
}
const resultElement = document.getElementById('result');
// 判断是否选择了选项
if (selectedValue === null) {
resultElement.innerText = '请先选择一个选项再提交';
resultElement.style.color = '#f56c6c';
return;
}
// 判断答案是否正确
if (selectedValue === correctAnswer) {
resultElement.innerText = '回答正确！';
resultElement.style.color = '#67c23a';
} else {
resultElement.innerText = '回答错误，正确答案是B';
resultElement.style.color = '#f56c6c';
}
}
添加多道题目的实现方式
如果需要添加多道选择题，只需要复制题目模块，修改对应的name属性、题目内容和正确答案即可。下面是一个两道题目的示例代码片段：
<div class="question-container">
<div class="question-title">第二题：CSS中用于设置文字颜色的属性是？</div>
<div class="options">
<div class="option-item">
<input type="radio" name="question2" id="option5" value="A">
<label for="option5">A. font-size</label>
</div>
<div class="option-item">
<input type="radio" name="question2" id="option6" value="B">
<label for="option6">B. color</label>
</div>
<div class="option-item">
<input type="radio" name="question2" id="option7" value="C">
<label for="option7">C. background</label>
</div>
<div class="option-item">
<input type="radio" name="question2" id="option8" value="D">
<label for="option8">D. width</label>
</div>
</div>
</div>
对应的判断逻辑只需要新增对应题目的正确答案和判断分支即可，整体实现思路和单道题一致。
注意事项
- 同一组题目的
name属性必须保持一致，否则会出现可以多选的情况 - 如果需要支持多选选择题，只需要把
input的type属性从radio改为checkbox即可 - 实际开发中如果需要保存用户答案，可以通过
form表单提交或者AJAX请求把数据发送到后端 - 样式部分可以根据实际需求调整，上面的CSS只是基础样式，可自由修改
HTML选择题页面form表单input标签JavaScript修改时间：2026-07-11 23:36:29