- HTML: 问卷的结构和内容。
- CSS: 问卷的样式，使其看起来美观、整洁。
- JavaScript: 处理用户提交、收集答案并在页面上显示结果的功能。
您可以直接复制下面的代码，保存为一个 .html 文件（survey.html）,然后用浏览器打开它即可。
（图片来源网络，侵删）
完整代码 (survey.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">简单的问卷调查</title>
<style>
/* --- 全局样式 --- */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f4f7f6;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
}
/* --- 问卷容器 --- */
.survey-container {
max-width: 600px;
margin: 40px auto;
background-color: #ffffff;
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
/* --- 问题样式 --- */
.question {
margin-bottom: 25px;
}
.question label {
display: block;
font-weight: bold;
margin-bottom: 10px;
color: #34495e;
}
/* --- 输入控件样式 --- */
input[type="text"],
input[type="email"],
textarea,
select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* 确保 padding 不会影响宽度 */
}
textarea {
resize: vertical; /* 允许用户垂直调整大小 */
min-height: 100px;
}
/* --- 单选按钮和复选框的包装器 --- */
.radio-group, .checkbox-group {
display: flex;
flex-direction: column;
gap: 8px; /* 选项之间的间距 */
}
.radio-option, .checkbox-option {
display: flex;
align-items: center;
gap: 8px;
}
input[type="radio"],
input[type="checkbox"] {
margin: 0;
width: auto; /* 恢复单选/复选框的原始大小 */
}
/* --- 提交按钮 --- */
.submit-btn {
display: block;
width: 100%;
padding: 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #2980b9;
}
/* --- 结果显示区域 --- */
#results {
margin-top: 30px;
padding: 20px;
background-color: #eafaf1;
border: 1px solid #d4edda;
border-radius: 5px;
display: none; /* 默认隐藏 */
}
#results h2 {
margin-top: 0;
color: #155724;
}
.result-item {
margin-bottom: 10px;
}
.result-label {
font-weight: bold;
display: inline-block;
min-width: 150px;
}
</style>
</head>
<body>
<div class="survey-container">
<h1>用户体验调查问卷</h1>
<form id="surveyForm">
<!-- 问题1: 文本输入 -->
<div class="question">
<label for="userName">1. 您的姓名：</label>
<input type="text" id="userName" name="userName" required>
</div>
<!-- 问题2: 邮箱输入 -->
<div class="question">
<label for="userEmail">2. 您的电子邮箱：</label>
<input type="email" id="userEmail" name="userEmail" required>
</div>
<!-- 问题3: 单选按钮 -->
<div class="question">
<label>3. 您是如何了解到我们的产品的？</label>
<div class="radio-group">
<div class="radio-option">
<input type="radio" id="source1" name="source" value="搜索引擎">
<label for="source1">搜索引擎</label>
</div>
<div class="radio-option">
<input type="radio" id="source2" name="source" value="社交媒体">
<label for="source2">社交媒体</label>
</div>
<div class="radio-option">
<input type="radio" id="source3" name="source" value="朋友推荐">
<label for="source3">朋友推荐</label>
</div>
<div class="radio-option">
<input type="radio" id="source4" name="source" value="其他">
<label for="source4">其他</label>
</div>
</div>
</div>
<!-- 问题4: 下拉选择 -->
<div class="question">
<label for="satisfaction">4. 您对我们的产品满意度如何？</label>
<select id="satisfaction" name="satisfaction" required>
<option value="" disabled selected>-- 请选择 --</option>
<option value="非常满意">非常满意</option>
<option value="满意">满意</option>
<option value="一般">一般</option>
<option value="不满意">不满意</option>
<option value="非常不满意">非常不满意</option>
</select>
</div>
<!-- 问题5: 复选框 -->
<div class="question">
<label>5. 您希望我们增加哪些功能？（可多选）</label>
<div class="checkbox-group">
<div class="checkbox-option">
<input type="checkbox" id="feature1" name="features" value="数据分析">
<label for="feature1">数据分析</label>
</div>
<div class="checkbox-option">
<input type="checkbox" id="feature2" name="features" value="自动化报告">
<label for="feature2">自动化报告</label>
</div>
<div class="checkbox-option">
<input type="checkbox" id="feature3" name="features" value="团队协作">
<label for="feature3">团队协作</label>
</div>
<div class="checkbox-option">
<input type="checkbox" id="feature4" name="features" value="移动端应用">
<label for="feature4">移动端应用</label>
</div>
</div>
</div>
<!-- 问题6: 文本域 -->
<div class="question">
<label for="feedback">7. 您有任何其他建议或意见吗？</label>
<textarea id="feedback" name="feedback" placeholder="请在此输入您的宝贵意见..."></textarea>
</div>
<!-- 提交按钮 -->
<button type="submit" class="submit-btn">提交问卷</button>
</form>
<!-- 结果显示区域 -->
<div id="results">
<h2>感谢您的参与！</h2>
<p>您的反馈信息如下：</p>
<div id="resultsContent"></div>
</div>
</div>
<script>
// 获取表单和结果区域元素
const surveyForm = document.getElementById('surveyForm');
const resultsDiv = document.getElementById('results');
const resultsContentDiv = document.getElementById('resultsContent');
// 监听表单的提交事件
surveyForm.addEventListener('submit', function(event) {
// 阻止表单的默认提交行为（即刷新页面）
event.preventDefault();
// 创建一个对象来存储所有答案
const formData = new FormData(surveyForm);
const answers = {};
// 遍历 FormData，将答案存入 answers 对象
// 对于复选框，需要特殊处理，因为一个 name 可以对应多个 value
for (let [key, value] of formData.entries()) {
if (answers[key]) {
// 如果这个 key 已经存在，说明是复选框，将其转换为数组
if (Array.isArray(answers[key])) {
answers[key].push(value);
} else {
answers[key] = [answers[key], value];
}
} else {
answers[key] = value;
}
}
// 显示结果
displayResults(answers);
// 滚动到结果区域
resultsDiv.scrollIntoView({ behavior: 'smooth' });
});
// 显示结果的函数
function displayResults(answers) {
let resultsHTML = '';
// 遍历 answers 对象，生成结果HTML
for (const question in answers) {
const label = getQuestionLabel(question);
let value = answers[question];
// 如果是复选框的值（数组），将其格式化为字符串
if (Array.isArray(value)) {
value = value.join(', ');
}
resultsHTML += `
<div class="result-item">
<span class="result-label">${label}:</span>
<span>${value}</span>
</div>
`;
}
resultsContentDiv.innerHTML = resultsHTML;
resultsDiv.style.display = 'block'; // 显示结果区域
}
// 根据表单元素的 name 属性，获取对应的标签文本
function getQuestionLabel(name) {
const labelMap = {
'userName': '您的姓名',
'userEmail': '您的电子邮箱',
'source': '您了解到我们的产品的途径',
'satisfaction': '您对我们的产品满意度',
'features': '您希望增加的功能',
'feedback': '其他建议或意见'
};
return labelMap[name] || name;
}
</script>
</body>
</html>
代码结构解析
HTML (<body> 部分)
<form id="surveyForm">: 整个问卷的容器，id用于让 JavaScript 找到它。<div class="question">: 每个问题的包装器，方便用 CSS 进行样式控制。<label>: 问题的描述，for属性关联到对应的input,点击标签时可以聚焦到输入框。- 输入控件:
type="text": 单行文本输入。type="email": 邮箱输入,浏览器会自动验证格式。type="radio": 单选按钮，同一组（name相同）的按钮只能选一个。type="checkbox": 复选框，同一组（name相同）的按钮可以多选。<select>: 下拉选择框。<textarea>: 多行文本输入域。
<button type="submit">: 提交按钮，点击它时会触发form的submit事件。<div id="results">: 用于存放提交后显示的结果，默认是隐藏的 (display: none)。
CSS (<style> 部分)
body: 设置全局字体、背景色和间距。.survey-container: 问卷的主体样式，如宽度、背景色、阴影和圆角,使其居中显示。.question: 设置每个问题区域的下边距,使布局更清晰。- 输入控件样式: 统一了
input,textarea,select的宽度、内边距和边框,使它们看起来更协调。 .radio-group,.checkbox-group: 使用 Flexbox 布局，让单选/复选框的选项垂直排列并对齐,更美观。.submit-btn: 提交按钮的样式，包括背景色、悬停效果等,使其更醒目。#results: 结果区域的样式,使用不同的背景色和边框来区分。
JavaScript (<script> 部分)
event.preventDefault(): 这是关键，当用户点击提交按钮时，浏览器默认会刷新页面或跳转，这行代码阻止了默认行为,让我们可以在页面内处理数据。new FormData(surveyForm):FormData是一个非常方便的 API，它可以自动从<form>元素中收集所有输入控件的值,并将其格式化为键值对。- 处理复选框: 由于复选框允许多选，同一个
name会有多个value，代码中通过检查answers[key]是否已存在，来决定是创建一个新数组还是向现有数组添加值,从而正确处理多选情况。 displayResults(answers): 这个函数负责将收集到的答案对象，格式化成 HTML 字符串，并插入到#resultsContentdiv中。resultsDiv.style.display = 'block': 将结果区域从隐藏变为显示。resultsDiv.scrollIntoView(...): 在显示结果后，平滑滚动到结果区域,提升用户体验。
这个例子涵盖了网页表单的常见元素和基本交互，是一个很好的起点，您可以根据自己的需求修改问题、选项和样式。
（图片来源网络，侵删）
