问卷调查模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>问卷调查</title>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f7faff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 80%;
max-width: 600px;
background-color: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
padding: 40px;
overflow: hidden;
position: relative;
}
h1 {
text-align: center;
color: #303841;
margin-bottom: 30px;
font-size: 30px;
font-weight: 700;
}
.question {
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid #e0e0e0;
}
.question:last-child {
border-bottom: none;
}
label {
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 500;
color: #546069;
}
input[type="text"],
input[type="email"],
textarea {
box-sizing: border-box;
width: 100%;
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s ease;
overflow: auto;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #007BFF;
outline: none;
}
textarea {
resize: none;
-webkit-user-resize: none;
-moz-user-resize: none;
-ms-user-resize: none;
user-resize: none;
}
textarea::-webkit-scrollbar {
width: 0;
background: transparent;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 8px;
}
button {
background-color: #007BFF;
color: white;
padding: 12px 30px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
margin-top: 30px;
transition: background-color 0.3s ease;
display: block;
margin-left: auto;
margin-right: auto;
}
button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.radio-group,
.checkbox-group {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
border-radius: 10px;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
pointer-events: none;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>问卷调查</h1>
<form id="surveyForm">
<div class="question">
<label for="name">您的姓名：</label>
<input type="text" id="name" placeholder="请输入您的姓名" required autocomplete="off">
</div>
<div class="question">
<label for="email">您的电子邮箱：</label>
<input type="email" id="email" placeholder="请输入您的电子邮箱" required autocomplete="off">
</div>
<div class="question">
<label>您的性别：</label>
<div class="radio-group">
<input type="radio" id="male" name="gender" value="男" required>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="女">
<label for="female">女</label>
</div>
</div>
<div class="question">
<label>您平时的兴趣爱好（可多选）：</label>
<div class="checkbox-group">
<input type="checkbox" id="reading" name="hobbies" value="阅读">
<label for="reading">阅读</label>
<input type="checkbox" id="sports" name="hobbies" value="运动">
<label for="sports">运动</label>
<input type="checkbox" id="music" name="hobbies" value="音乐">
<label for="music">音乐</label>
<input type="checkbox" id="travel" name="hobbies" value="旅行">
<label for="travel">旅行</label>
</div>
</div>
<div class="question">
<label for="suggestion">您对我们的建议：</label>
<textarea id="suggestion" placeholder="请留下您的宝贵建议"></textarea>
</div>
<button type="submit">提交问卷</button>
</form>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p id="modalMessage">问卷已成功提交，感谢您的参与！</p>
</div>
</div>
<script>
const surveyForm = document.getElementById('surveyForm');
const myModal = document.getElementById('myModal');
const closeBtn = document.getElementsByClassName('close')[0];
const modalMessage = document.getElementById('modalMessage');
surveyForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const gender = document.querySelector('input[name="gender"]:checked').value;
const hobbies = Array.from(document.querySelectorAll('input[name="hobbies"]:checked')).map(el => el.value);
const suggestion = document.getElementById('suggestion').value;
const isSuccess = true;
if (isSuccess) {
modalMessage.textContent = '问卷已成功提交，感谢您的参与！';
} else {
modalMessage.textContent = '问卷提交失败，请重试！';
}
myModal.style.display = "block";
setTimeout(() => {
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.querySelectorAll('input[name="gender"]').forEach(el => el.checked = false);
document.querySelectorAll('input[name="hobbies"]').forEach(el => el.checked = false);
document.getElementById('suggestion').value = '';
myModal.style.display = "none";
}, 3000);
closeBtn.onclick = function () {
myModal.style.display = "none";
}
window.onclick = function (event) {
if (event.target === myModal) {
myModal.style.display = "none";
}
}
});
</script>
</body>
</html>
原文地址：https://blog.csdn.net/weixin_45019897/article/details/144321941
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！