简单注册界面-CSDN博客

本文链接：https://blog.csdn.net/m0_73369512/article/details/130009801

这是一个展示如何使用HTML、CSS和JavaScript创建一个简单的百度注册页面的例子。页面包括一个带有用户名、手机号、密码和验证码输入框的注册表单，并且JavaScript进行了基本的表单验证，确保用户填写了必要的信息且长度在规定范围内。

摘要由CSDN通过智能技术生成

百度注册界面

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="baidures.css">
    <script src="baidures.js"></script> 
</head>

<body>
    <div class="top">
        <img src="/baidu.png" alt="pic">
    </div>
    <div class="banna">
        <div class="left">
            <div class="new">
                <h3>用科技</h3>
                <p>让复杂的世界更简单</p>
            </div>
        </div>
        <div class="right">
            <div class="res">
                <div class="rest">
                    <h1 style="color: black;">欢迎注册</h1>
                    <p>已有账号? <a href="#">登录</a></p>
                </div>
                <div class="resb">
                    <form action="#" onsubmit="check()">
                        <p><span><label for="id" class="id">用户名</label></span> <input type="text" id="id" placeholder="请设置用户名" name="uid"></p>
                        <!-- <script>
                            var idinput = document.getElementById('id');
                            idinput.onfocus = function() {
                                if (this.value === '请设置用户名'){
                                    this.value = '';
                                }
                                this.style.color = 'black';
                            }
                            idinput.onblur = function () {
                                    if (this.value === '')
                                    this.value = '请设置用户名';
                                    this.style.color = '#b9bbc1';
                            }
                        </script> -->
                        <p><span><label for="phone" class="phone">手机号</label></span> <input type="text" id="phone" placeholder="可用于登录和找回密码"></p>
                        <!-- <script>
                            var phoneinput = document.getElementById('phone');
                                phoneinput.onfocus = function () {
                                    if (this.value === '可用于登录和找回密码') {
                                        this.value = '';
                                    }
                                    this.style.color = 'black';
                                }
                                phoneinput.onblur = function () {
                                    if (this.value === '')
                                        this.value = '可用于登录和找回密码';
                                        this.style.color = '#b9bbc1';
                                    }
                                
                        </script> -->
                        <p><span><label for="password" class="password">密 码</label></span><input type="text" id="password"  placeholder="请设置密码" name="psw"></p>
                        <!-- <script>
                            var passwordinput = document.getElementById('password');
                            passwordinput.onfocus = function () {
                                if (this.value === '请设置密码') {
                                    this.value = '';
                                }
                                this.style.color = 'black';
                                this.type = 'password';
                            }
                            passwordinput.onblur = function () {
                                if (this.value === ''){
                                    this.value = '请设置密码';
                                    this.type = 'text';
                                }
                                this.style.color = '#b9bbc1';
                            }
                        </script> -->
                        <p><span><label for="ma" class="ma">验证码</label></span><input type="text" id="ma" placeholder="请输入验证码">
                            <!-- <script>
                                var mainput = document.getElementById('ma');
                                mainput.onfocus = function () {
                                    if (this.value === '请输入验证码') {
                                        this.value = '';
                                    }
                                    this.style.color = 'black';
                                }
                                mainput.onblur = function () {
                                    if (this.value === '')
                                        this.value = '请输入验证码';
                                        this.style.color = '#b9bbc1';
                                }
                            </script> -->
                            <input type="button" value="获取验证码" class="button"></p>
                            <div class="resf">
                                <input type="submit" value="注册" class="submit">
                                <p><input type="checkbox" class="checkbox"><label for="nidi" class="nidi">阅读并接受<a href="#" id="nidi">《百度用户协议》</a><a href="#" id="nidi">《儿童个人信息保护声明》</a>及<a href="#" id="nidi">《百度隐私保护声明》</a></label></p>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="note">
            <span class="help"><a href="#">帮助中心</a> <em>|</em></span>
            <span class="let">2023 ©Baidu</span>
        </div>
    </div>
</body>

</html>

css部分

   * {
           padding: 0;
           margin: 0;
       }

       body {
           background-image: url("/reg_bg_min.jpg");
           background-repeat: no-repeat;
           background-size: cover;
           background-attachment: fixed;
       }

       a {
           text-decoration: none;
       }

       .top {
           height: 150px;
       }

       .top img {
           width: 124.5px;
           height: 40px;
           margin: 60px 0 0 70px;
       }

       .banna {
           height: 680px;
       }

       .banna .left {
           width: 40%;
           float: left;
           height: 680px;

       }

       .banna .left .new {
           height: 110px;
           width: 300px;
           margin-top: 180px;
           margin-left: 190px;
       }

       .banna .left .new h3 {
           font-size: 48px;
           color: white;
       }

       .banna .left .new p {
           color: white;
           font-size: 32px;
       }

       .banna .right {
           width: 60%;
           float: left;
           height: 680px;

       }

       .banna .right .res {
           height: 680px;
           width: 500px;
           float: right;
           margin: 0 90px 0 0;
           background-color: #f5f2f4;
           opacity: 0.95;
           border: 1px solid white;
           border-radius: 10px;
       }

       .banna .right .res .rest {
           margin-top: 50px;
           margin-left: 50px;
           color: #91949a;
       }

       .banna .right .res .rest a {
           color: blue;
       }

       .banna .right .res .resb {
           height: 350px;
           margin-top: 30px;
       }

       .banna .right .res .resb>p {
           margin-top: 70px;
           font-size: 15px;
           margin-left: 40px;
           color: #494849;
       }

       .banna .right .res .resb p {
           height: 50px;
           padding-top: 30px;
       }

       .banna .right .res .resb span {
           display: inline-block;
           height: 50px;
           width: 50px;
           padding: 0 20px 0 30px;
       }

       .banna .right .res input {
            color: #d7d2d2;
            background-color: #ffffff;
            padding-left: 10px;
       }

       .banna .right .res .resb .button {
           height: 38px;
           width: 90px;
           margin-left: 15px;
           background-color: #fff;
           border: 1px solid #E0E0E0;
           color: #333;
       }

       .banna .right .res .resf .submit {
           margin: 30px 50px;
           width: 400px;
           height: 50px;
           border: 1px solid #E0E0E0;
           border-radius: 25px;
           background-color: #bdcefc;
           font-size: 17px;
           color:  white;
           
       }

       #id,
       #phone,
       #password {
           border: 1px solid #E0E0E0;
           width: 350px;
           height: 35px;
       }

       #ma {
           border: 1px solid #E0E0E0;
           width: 250px;
           height: 35px;
       }

       .banna .right .res .resf p {
           font-size: 11px;
           color: #b9bbc1;
           text-align: center;
       }

       .banna .right .res .resf .nidi {
           display: inline-block;
           padding-left: 5px;
           width: 400px;
           height: 20px;
       }

       .banna .right .res .resf .nidi a {
           color: blue;
       }

       .banna .right .res .resf p .checkbox {
           height: 40px;
       }

       .foot {
           height: 120px;
       }

       .foot .note {
           height: 20px;
           width: 300px;
           margin-top: 60px;
           margin-left: 80px;
       }

       .foot .note .help {
           width: 60%;
           font-size: 14px;
           color: #b9bbc1;
       }

       .foot .note .help a {
           color: #b9bbc1;
       }

       .foot .note .let {
           width: 40%;
           font-size: 10px;
           margin-left: 40px;
           color: #91949a;
       }

       em {
           font-style: normal;
       }

     .banna .right .res wrong {
        color: red;
    }

js部分

function check() {
    var uid = document.getElementById('id').value;
    var paw = document.getElementById('password').value;

    if (uid == '') {
        alert('名字不能为空');
        return false;
    } else if (uid.length < 4 || uid.length > 10) {
        alert('账户长度必须在4-10之间');
        return false;
    }
    if (paw == '') {
        alert('密码不能为空');
        return false;
    } else if (paw.length < 4 || paw.length > 10) {
        alert('密码长度必须在4-10之间');
        return false;
    }else {
        alert('注册成功'+'名字为'+uid+'密码为'+paw);
        return true;
    }
}