html5分步问卷调查表模板源码

作者：System 时间：2024年08月23日分类：所有,html5 字数：1444

以下是一个简单的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>

这个示例只有第一步，下一步按钮监听器中添加更多步骤的代码需要您自己实现。同时，这个示例没有处理提交和存储数据的逻辑，您需要根据实际需求添加这部分功能。

html5分步问卷调查表模板源码

评论已关闭

推荐阅读