学生调查问卷h5设计代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
学生调查问卷h5设计代码
创建一个学生调查问卷的H5页面需要HTML、CSS和JavaScript。
以下是一个简单的示例，展示如何创建一个基本的调查问卷。
```html
<!DOCTYPE html>
<html>
<head>
<title>学生调查问卷</title>
<style>
body { font-family: Arial, sans-serif; }
.form-container { width: 300px; margin: 0 auto; }
.form-container h2 { text-align: center; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; }
.form-group input[type="text"], .form-group select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; } .form-group button { width: 100%; padding: 14px 20px; background-color: #4CAF50; color: white; border: none;
border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<div class="form-container">
<h2>学生调查问卷</h2>
<form id="surveyForm">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="age">年龄:</label>
<input type="number" id="age" name="age" required>
</div>
<div class="form-group">
<label for="gender">性别:</label>
<select id="gender" name="gender" required> <option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div class="form-group">
<label for="grade">年级:</label>
<input type="text" id="grade" name="grade" required>
</div>
<div class="form-group">
<button type="submit">提交</button>
</div>
</form>
</div>
<script>
document.getElementById('surveyForm').addEventListener('submi t', function(event) {
event.preventDefault(); // 阻止表单的默认提交行为 var name = document.getElementById('name').value; var age = document.getElementById('age').value; var gender =
document.getElementById('gender').value;
var grade =
document.getElementById('grade').value;
console.log('姓名: ' + name);
console.log('年龄: ' + age);
console.log('性别: ' + gender);
console.log('年级: ' + grade); // 这里只是简单地将数据输出到控制台，实际应用中你可能需要将数据发送到服务器或者进行其他处理。
});
</script>
</body>
</html>
```
这个示例中，我们创建了一个简单的表单，包括姓名、年龄、性别和年级。
当用户点击提交按钮时，JavaScript代码会阻止表单的默认提交行为，然后获取表单中的数据，并将它们输出到浏览器的控制台。
在实际应用中，你可能需要将数据发送到服务器或者进行其他处理。