HTML练习题：创建一个在线问卷调查表单

最新推荐文章于 2025-05-25 22:38:18 发布

2401_86440076

最新推荐文章于 2025-05-25 22:38:18 发布

阅读量683

点赞数 9

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_86440076/article/details/140986854

第一部分：考点与作答区

考点：

HTML表单元素：使用各种表单元素创建问卷调查。
表单验证：使用HTML5的表单验证功能提高数据质量。

作答区： 请创建一个在线问卷调查表单，包含以下问题：

年龄范围（单选按钮）
喜欢的编程语言（复选框）
对本次课程的满意度（下拉选择）
个人建议（文本区域）
提交按钮

第二部分：解题思路与答案

解题思路：

使用<form>标签创建表单。
使用<input>标签的不同类型（如radio, checkbox, text, submit）来创建不同类型的表单元素。
使用<select>和<option>标签创建下拉选择。
使用<textarea>标签创建文本区域。
为必填字段添加required属性进行基本的验证。

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线问卷调查</title>
</head>
<body>
    <h1>在线问卷调查</h1>
    <form>
        <label for="age">年龄范围:</label><br>
        <input type="radio" id="age1" name="age" value="18-25" required>
        <label for="age1">18-25</label><br>
        <input type="radio" id="age2" name="age" value="26-35">
        <label for="age2">26-35</label><br>
        <input type="radio" id="age3" name="age" value="36-45">
        <label for="age3">36-45</label><br>
        <input type="radio" id="age4" name="age" value="46+">
        <label for="age4">46+</label><br><br>

        <label for="languages">喜欢的编程语言:</label><br>
        <input type="checkbox" id="lang1" name="languages" value="Python">
        <label for="lang1">Python</label><br>
        <input type="checkbox" id="lang2" name="languages" value="JavaScript">
        <label for="lang2">JavaScript</label><br>
        <input type="checkbox" id="lang3" name="languages" value="Java">
        <label for="lang3">Java</label><br>
        <input type="checkbox" id="lang4" name="languages" value="C#">
        <label for="lang4">C#</label><br><br>

        <label for="satisfaction">对本次课程的满意度:</label><br>
        <select id="satisfaction" name="satisfaction" required>
            <option value="">请选择</option>
            <option value="very-satisfied">非常满意</option>
            <option value="satisfied">满意</option>
            <option value="neutral">一般</option>
            <option value="dissatisfied">不满意</option>
            <option value="very-dissatisfied">非常不满意</option>
        </select><br><br>

        <label for="suggestion">个人建议:</label><br>
        <textarea id="suggestion" name="suggestion" rows="4" cols="50"></textarea><br><br>

        <input type="submit" value="提交">
    </form>
</body>
</html>

第三部分：扩展考点与扩展作答区

扩展考点：

CSS样式：使用CSS对表单进行美化。
JavaScript交互：使用JavaScript添加表单提交的交互效果。

扩展作答区：

使用CSS为表单添加样式，使其更加美观和用户友好。
使用JavaScript添加表单提交时的确认对话框，确保用户意图。

第四部分：扩展解答思路与答案

扩展解答思路：

使用内联CSS或外部CSS文件为表单元素添加样式，如边框、背景色、字体等。
使用JavaScript的addEventListener方法监听表单的提交事件，并在提交前显示一个确认对话框。

扩展答案：

<!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: Arial, sans-serif;
        }
        .container {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        label, input, select, textarea {
            margin-bottom: 10px;
            display: block;
        }
        input[type="submit"] {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var form = document.querySelector('form');
            form.addEventListener('submit', function(event) {
                event.preventDefault();
                var confirmation = confirm('确认提交表单吗？');
                if (confirmation) {
                    form.submit();
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <h1>在线问卷调查</h1>
        <form>
            <!-- 表单元素 -->
            <!-- ...（省略了之前的部分） -->
            <input type="submit" value="提交">
www.wfqzrcw.com
www.tzxjrcw.com
www.cddyrc.com
www.cdwjrcw.com
www.jnqfrcw.com
        </form>
    </div>
</body>
</html>

在这个扩展答案中，我们通过CSS为表单添加了样式，使其看起来更加专业和吸引人。同时，我们使用JavaScript添加了一个确认对话框，当用户点击提交按钮时，会弹出一个对话框询问用户是否确认提交。这个练习题的扩展部分适合那些已经掌握了HTML和CSS基础，并希望学习如何使用JavaScript增强网页交互性的开发者。