答案:使用HTML构建表单结构,通过JavaScript的FormData获取数据并阻止默认提交,实现问卷逻辑与交互。

用 JavaScript 制作一个简易问卷调查并不复杂,核心是通过 HTML 搭建结构,用 JS 控制逻辑和交互。下面是一个完整的实现思路与代码示例,适合初学者快速上手。
1. 基础结构:HTML 表单设计
先搭建问卷的页面结构,使用表单元素收集用户输入:
2. 核心逻辑:JavaScript 收集并处理数据
使用 JS 获取用户填写的内容,在提交时阻止默认行为,并显示结果:
document.getElementById("surveyForm").addEventListener("submit", function(e) {
e.preventDefault(); // 阻止页面刷新
const resultDiv = document.getElementById("result");
const formData = new FormData(this);
let output = "提交成功!您的回答:
- ";
for (let [key, value] of formData.entries()) {
if (value) {
output += `
- ${key}:${value} `; } } 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 = `
您喜欢JS吗?
是
否
`;
form.addEventListener("submit", function(e) {
e.preventDefault();
alert("感谢参与!您选择了:" + new FormData(form).get("like"));
});
container.appendChild(form);
}
createSurvey(); // 调用函数生成问卷
这种方式适合在已有网页中动态插入小型调查。
基本上就这些。不复杂但容易忽略细节,比如 required 属性和 FormData 的使用条件。只要结构清晰,JS 控制流程就很顺畅。










