示例 1：基础单选题（最简单）
这是一个最基础的调查问卷，只包含一道单选题，没有样式,功能完整。
（图片来源网络，侵删）
特点：
- 单选题（只能选一个）
- 使用原生HTML表单元素
- 简洁的代码结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">基础调查问卷</title>
</head>
<body>
<h1>您最喜欢的编程语言是什么？</h1>
<form action="#" method="post">
<fieldset>
<legend>请选择一项：</legend>
<!-- A选项 -->
<input type="radio" id="lang_a" name="favorite_language" value="A" required>
<label for="lang_a">A. Python</label><br><br>
<!-- B选项 -->
<input type="radio" id="lang_b" name="favorite_language" value="B">
<label for="lang_b">B. JavaScript</label><br><br>
<!-- C选项 -->
<input type="radio" id="lang_c" name="favorite_language" value="C">
<label for="lang_c">C. Java</label><br><br>
<!-- 提交按钮 -->
<button type="submit">提交</button>
</fieldset>
</form>
</body>
</html>
代码解释：
<form>: 创建一个表单。<fieldset>和<legend>: 将问题和选项组合在一起,并添加一个标题。<input type="radio">: 创建一个单选按钮。name="favorite_language": 关键属性，所有单选按钮的name必须相同，这样浏览器才知道它们是一组,只能选一个。value="A": 选项的值，当表单提交时,会发送这个值。id="lang_a": 选项的唯一标识。required: 确保用户必须选择一项才能提交。
<label for="lang_a">: 点击标签文字也能选中对应的单选按钮，提升用户体验。for的值与input的id相对应。
示例 2：带样式的多选题（更美观）
这个例子包含两道题（一道单选，一道多选），并添加了CSS样式,使其看起来更专业。
特点：
（图片来源网络，侵删）
- 包含单选题和多选题
- 使用CSS进行美化
- 代码结构清晰
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">带样式的调查问卷</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 20px;
}
.survey-container {
max-width: 600px;
margin: 20px auto;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
}
.question {
margin-bottom: 25px;
}
.question h3 {
margin-bottom: 15px;
color: #34495e;
}
.options label {
display: block; /* 让选项占据一整行 */
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
.options label:hover {
background-color: #f0f0f0;
}
.options input[type="radio"],
.options input[type="checkbox"] {
margin-right: 10px;
}
button {
display: block;
width: 100%;
padding: 12px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="survey-container">
<h1>用户体验调查问卷</h1>
<form action="#" method="post">
<!-- 问题 1: 单选题 -->
<div class="question">
<h3>1. 您如何评价我们网站的整体设计？</h3>
<div class="options">
<label>
<input type="radio" name="design_rating" value="A" required>
A. 非常出色
</label>
<label>
<input type="radio" name="design_rating" value="B">
B. 比较好
</label>
<label>
<input type="radio" name="design_rating" value="C">
C. 一般
</label>
</div>
</div>
<!-- 问题 2: 多选题 -->
<div class="question">
<h3>2. 您通常通过哪些设备访问我们的网站？（可多选）</h3>
<div class="options">
<label>
<input type="checkbox" name="device" value="A">
A. 台式电脑
</label>
<label>
<input type="checkbox" name="device" value="B">
B. 笔记本电脑
</label>
<label>
<input type="checkbox" name="device" value="C">
C. 智能手机
</label>
</div>
</div>
<button type="submit">提交问卷</button>
</form>
</div>
</body>
</html>
代码解释：
- 多选题: 使用
<input type="checkbox">，与单选不同，多选题的name可以相同，也可以不同（如果希望服务器能区分不同多选题组），这里为了简单,我们让它们同名。 - CSS样式:
<style>标签内定义了样式，让问卷看起来更整洁、美观。.survey-container: 设置了问卷的容器样式，如宽度、背景、阴影等。.options label: 使用display: block让每个选项独占一行,并添加了悬停效果。button: 美化了提交按钮。
示例 3：带JavaScript交互的问卷（更高级）
这个例子在第二个的基础上增加了JavaScript功能，在用户提交时进行简单的验证,并显示一个友好的提示信息。
特点：
- 包含表单验证
- 使用JavaScript处理提交事件
- 提交后显示结果，而不是跳转页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">带交互的调查问卷</title>
<!-- CSS样式与示例2相同 -->
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 20px; }
.survey-container { max-width: 600px; margin: 20px auto; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { color: #2c3e50; text-align: center; }
.question { margin-bottom: 25px; }
.question h3 { margin-bottom: 15px; color: #34495e; }
.options label { display: block; margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
.options label:hover { background-color: #f0f0f0; }
.options input[type="radio"], .options input[type="checkbox"] { margin-right: 10px; }
button { display: block; width: 100%; padding: 12px; background-color: #3498db; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; }
button:hover { background-color: #2980b9; }
#result { display: none; margin-top: 20px; padding: 15px; background-color: #e8f5e9; border-left: 5px solid #4caf50; }
</style>
</head>
<body>
<div class="survey-container">
<h1>产品反馈调查问卷</h1>
<form id="surveyForm">
<!-- 问题 1: 单选题 -->
<div class="question">
<h3>1. 您会向朋友推荐我们的产品吗？</h3>
<div class="options">
<label><input type="radio" name="recommend" value="A" required> A. 一定会</label>
<label><input type="radio" name="recommend" value="B"> B. 可能会</label>
<label><input type="radio" name="recommend" value="C"> C. 不一定</label>
</div>
</div>
<!-- 问题 2: 多选题 -->
<div class="question">
<h3>2. 您认为产品最需要改进的地方是？（可多选）</h3>
<div class="options">
<label><input type="checkbox" name="improvement" value="A"> A. 界面设计</label>
<label><input type="checkbox" name="improvement" value="B"> B. 功能性能</label>
<label><input type="checkbox" name="improvement" value="C"> C. 客服支持</label>
</div>
</div>
<button type="submit">提交反馈</button>
</form>
<!-- 用于显示结果 -->
<div id="result">
<h3>感谢您的反馈！</h3>
<p id="resultText"></p>
</div>
</div>
<script>
// 获取表单和结果元素
const surveyForm = document.getElementById('surveyForm');
const resultDiv = document.getElementById('result');
const resultText = document.getElementById('resultText');
// 监听表单的提交事件
surveyForm.addEventListener('submit', function(event) {
// 阻止表单的默认提交行为（页面刷新或跳转）
event.preventDefault();
// 获取单选题的值
const recommendValue = document.querySelector('input[name="recommend"]:checked');
// 获取所有多选题的值
const improvementValues = Array.from(document.querySelectorAll('input[name="improvement"]:checked')).map(cb => cb.value);
// 验证单选题是否已选
if (!recommendValue) {
alert('请回答第一个问题！');
return; // 如果未选，则停止执行
}
// 构建结果文本
let resultMessage = `您的推荐度是: ${recommendValue.value}. `;
if (improvementValues.length > 0) {
resultMessage += `您认为需要改进的方面是: ${improvementValues.join(', ')}.`;
} else {
resultMessage += "您没有选择需要改进的方面。";
}
// 显示结果
resultText.textContent = resultMessage;
resultDiv.style.display = 'block';
// (可选) 在实际应用中，这里可以使用 fetch 或 XMLHttpRequest 将数据发送到服务器
// console.log('提交的数据:', {
// recommend: recommendValue.value,
// improvement: improvementValues
// });
});
</script>
</body>
</html>
代码解释：
（图片来源网络，侵删）
- JavaScript (
<script>:document.getElementById('surveyForm'): 获取我们的表单元素。addEventListener('submit', ...): 监听表单的submit事件。event.preventDefault(): 关键代码，阻止表单默认的提交行为,这样页面就不会刷新或跳转。document.querySelector('input[name="recommend"]:checked'): 查找被选中的单选按钮。document.querySelectorAll('input[name="improvement"]:checked'): 查找所有被选中的复选框,并转换成数组以便处理。resultDiv.style.display = 'block': 将隐藏的结果区域显示出来。
如何选择和使用
- 如果你只需要一个最简单的功能，复制 示例1 的代码即可。
- 如果你想让问卷看起来更专业、更美观，使用 示例2 的代码,它包含了完整的HTML和CSS。
- 如果你需要在提交后立即显示结果或进行更复杂的操作，而不刷新页面，示例3 是最好的选择，它包含了完整的HTML、CSS和JavaScript。
你可以直接复制这些代码，保存为 .html 文件,然后用浏览器打开即可看到效果。
