在另一个页面上显示表单提交的内容_6)在“提交”后能在新页面显示所有的输入信息-优快云博客

这段HTML代码展示了如何使用JavaScript获取和验证网页表单数据。用户输入的姓名、密码、性别以及多选兴趣爱好被收集。如果两次输入的密码不一致，会提示用户重新输入。验证通过后，信息将以文本形式在新页面中展示。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取表单数据</title>
    <script>
        function info() {
            var user = document.getElementById("user").value;
            var pwd = document.getElementById("pwd").value;
            var pwd1 = document.getElementById("pwd1").value;
            if(document.getElementById("sex1").checked){
                var sex = document.getElementById("sex1").value;
            }
            if(document.getElementById("sex2").checked){
                var sex = document.getElementById("sex2").value;
            }
            var hobby = document.getElementById("hobby");
            var inputs = hobby.getElementsByTagName("input");
            var checkboxs = new Array();
            var index=0;
            if(document.getElementById("hobby1").checked){
                var hobby = document.getElementById("hobby1").value;
                checkboxs[index++]=hobby;
            }
            if(document.getElementById("hobby2").checked){
                var hobby = document.getElementById("hobby2").value;
                checkboxs[index++]=hobby;
            }
            if(document.getElementById("hobby3").checked){
                var hobby = document.getElementById("hobby3").value;
                checkboxs[index++]=hobby;
            }
            if(document.getElementById("hobby4").checked){
                var hobby = document.getElementById("hobby4").value;
                checkboxs[index++]=hobby;
            }
            var hobbys=checkboxs.toString()
            if(pwd!=pwd1)
            {
                window.alert("两次输入密码不一样！请重新输入！");
            }
            else{
            var test=window.open("test.html");
            test.document.write("姓名:"+user+"<br>"+"密码:"+pwd+"<br>"+"性别:"+sex+"<br>"+"兴趣爱好:"+hobbys);//在新页面显示注册信息
        }}
    </script>
</head>
<body>
<form>
    <p>名&nbsp&nbsp字：<input type="text" id="user" placeholder="请输入姓名"></p>
    <p>密&nbsp&nbsp码：<input type="password"  id="pwd" placeholder="请输入密码" ></p>
    <p>确认密码：<input type="password" name="password1" id="pwd1" placeholder="请再次输入密码" ></p>
    <p>性别：
        <input id="sex1" type="radio" value="男性" name="sex" checked/>男
        &nbsp;
        <input id="sex2" type="radio" value="女性" name="sex"/>女
    </p>
    <p id="hobby">兴趣爱好：
        <input type="checkbox" id="hobby1" value="弹琴" >弹琴
        <input type="checkbox" id="hobby2" value="下棋" >下棋
        <input type="checkbox" id="hobby3" value="书法" >书法
        <input type="checkbox" id="hobby4" value="绘画" >绘画
    </p>
    <p>
        <input type="submit" onclick="info()" value="注册">
    </p>
</form>
</body>
</html>