(详细)设计一个在线调查的表单页面，包含填空、单选、复选和下拉列表框等元素，单击“提交”按钮时，弹出一个对话框，显示用户的填写和选择。_设计一个在线调查的表单页面(含有单选、多选项),当用户单击提交按钮时将显示一个-CSDN博客

本文链接：https://blog.csdn.net/m0_54158068/article/details/124699798

这是一个使用HTML和JavaScript编写的简单用户信息收集和显示的示例。用户可以输入姓名、选择性别、学历，并勾选多个兴趣爱好。当点击提交按钮时，JavaScript函数`showMsg()`将弹出一个警告框，展示用户填写的所有信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码实现（代码中已注释）

<html>
<head>
    <script language="javascript">
        function showMsg() {
            var string1 = "你的名字：" + document.getElementById("Text1").value + "\r\n" +
            "你的性别：" + (document.getElementById("Radio1").checked ? "男" : "女") + "\r\n" +
            "你的学历：" + document.getElementById("Select1").value + "\r\n" +
               "你的爱好：" + (document.getElementById("Checkbox1").checked ?
              (document.getElementById("Checkbox1").value + ",") : "") +
               (document.getElementById("Checkbox2").checked ?
                (document.getElementById("Checkbox2").value + ",") : "") +
               (document.getElementById("Checkbox3").checked ?
               (document.getElementById("Checkbox3").value + ",") : "") +
               (document.getElementById("Checkbox4").checked ?
                (document.getElementById("Checkbox4").value + ",") : "") +
                (document.getElementById("Checkbox5").checked ?
               (document.getElementById("Checkbox5").value + ",") : "") +
              (document.getElementById("Checkbox6").checked ?
             (document.getElementById("Checkbox6").value + ",") : "");
            alert(string1);
        }
    </script>
</head>
<body>
    姓名：<input type="text" id="Text1" /><br />
    性别：<input type="radio" id="Radio1" value="男"/>男&nbsp;<input type="radio" id="Radio2" value="女" />女<br />
    学历：<select id="Select1"> 
            <option value="初中">初中</option><option value="高中">高中</option>
            <option value="大学本科">大学本科</option><option value="硕士">硕士</option>
            <option value="博士">博士</option></select><br />
    爱好：<input type="checkbox" id="Checkbox1" value="阅读" />阅读 &nbsp;&nbsp;
          <input type="checkbox" id="Checkbox2" value="写作" />写作 &nbsp;&nbsp;
          <input type="checkbox" id="Checkbox3" value="运动" />运动 &nbsp;&nbsp;
          <input type="checkbox" id="Checkbox4" value="音乐" />音乐 &nbsp;&nbsp;
          <input type="checkbox" id="Checkbox5" value="编程" />编程 &nbsp;&nbsp;
          <input type="checkbox" id="Checkbox6" value="书法" />书法 &nbsp;&nbsp;
          <br />
    <input type="button" id="Button1" value="提交" onclick="showMsg()" />
</body>
</html>