html5分步问卷调查表模板源码
以下是一个简单的HTML5分步问卷调查表单的示例代码。这个示例使用了HTML5的新特性，比如<input>元素的type属性和required属性，以及<form>元素的novalidate属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step by Step Survey Form</title>
<style>
form > * {
margin-bottom: 10px;
}
input[type="submit"] {
margin-top: 10px;
}
</style>
</head>
<body>
<form id="survey-form">
<h2>Step 1 of 3: Personal Information</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="button" id="next-btn" value="Next">
</form>
<script>
const nextBtn = document.getElementById('next-btn');
const surveyForm = document.getElementById('survey-form');
nextBtn.addEventListener('click', function() {
if (surveyForm.checkValidity()) {
// Hide step 1, show step 2
surveyForm.style.display = 'none';
// Add step 2 here
} else {
alert('Please fill out all required fields.');
}
});
</script>
</body>
</html>这个示例只有第一步，下一步按钮监听器中添加更多步骤的代码需要您自己实现。同时，这个示例没有处理提交和存储数据的逻辑，您需要根据实际需求添加这部分功能。
评论已关闭