答案：使用HTML构建表单结构，通过JavaScript的FormData获取数据并阻止默认提交，实现问卷逻辑与交互。
用 JavaScript 制作一个简易问卷调查并不复杂，核心是通过 HTML 搭建结构，用 JS 控制逻辑和交互。下面是一个完整的实现思路与代码示例，适合初学者快速上手。
1. 基础结构：HTML 表单设计
先搭建问卷的页面结构，使用表单元素收集用户输入：
<form id="surveyForm">
<h2>简易问卷调查</h2>
<div>
<p><strong>1. 您的年龄？</strong></p>
<input type="radio" name="age" value="18以下" required> 18以下<br>
<input type="radio" name="age" value="18-30"> 18-30<br>
<input type="radio" name="age" value="31-50"> 31-50<br>
<input type="radio" name="age" value="50以上"> 50以上
</div>
<div>
<p><strong>2. 您对本站的满意度如何？</strong></p>
<select name="satisfaction" required>
<option value="">请选择</option>
<option value="非常满意">非常满意</option>
<option value="满意">满意</option>
<option value="一般">一般</option>
<option value="不满意">不满意</option>
</select>
</div>
<div>
<p><strong>3. 您的建议？</strong></p>
<textarea name="feedback" placeholder="请输入您的意见..."></textarea>
</div>
<button type="submit">提交问卷</button>
</form>
<div id="result"></div>
2. 核心逻辑：JavaScript 收集并处理数据
使用 JS 获取用户填写的内容，在提交时阻止默认行为，并显示结果：
document.getElementById("surveyForm").addEventListener("submit", function(e) {
e.preventDefault(); // 阻止页面刷新
const resultDiv = document.getElementById("result");
const formData = new FormData(this);
let output = "<h3>提交成功！您的回答：</h3><ul>";
for (let [key, value] of formData.entries()) {
if (value) {
output += `<li><strong>${key}：</strong>${value}</li>`;
}
}
output += "</ul>";
resultDiv.innerHTML = output;
});
说明：
- FormData 自动收集表单中带 name 属性的输入项
- preventDefault() 防止表单提交导致页面跳转
- 通过循环 entries() 提取每一条回答并展示
3. 扩展功能建议
可以进一步增强问卷的实用性：
- 添加验证规则，比如必填项提示更友好
- 将数据保存到本地存储：
localStorage.setItem("survey", JSON.stringify(data)) - 用 AJAX 发送到服务器（如 PHP、Node.js 接口）
- 增加多页分步问卷，用 JS 控制切换
- 加入评分组件（如星星点击评分）
4. 简化版纯 JS 动态生成问卷（可选）
也可以完全用 JS 动态创建问卷内容，适合嵌入其他页面：
function createSurvey() {
const container = document.body;
const form = document.createElement("form");
form.innerHTML = `
<p><strong>您喜欢JS吗？</strong></p>
<input type="radio" name="like" value="是" required> 是
<input type="radio" name="like" value="否"> 否
<button type="submit">提交</button>
`;
form.addEventListener("submit", function(e) {
e.preventDefault();
alert("感谢参与！您选择了：" + new FormData(form).get("like"));
});
container.appendChild(form);
}
createSurvey(); // 调用函数生成问卷
这种方式适合在已有网页中动态插入小型调查。
基本上就这些。不复杂但容易忽略细节，比如 required 属性和 FormData 的使用条件。只要结构清晰，JS 控制流程就很顺畅。
