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

代码实现(代码中已注释)

<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>

运行结果

猜你喜欢

转载自blog.csdn.net/m0_54158068/article/details/124699798