html注册界面示例分享

  • Post author:
  • Post category:其他


效果图

背景图片需要自己添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script type="text/javascript">
        function checkEmail(node){
            var email = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/i;
            if(email.test(node.value))
            {
                node.style.color="#28ff28";
            }
            else
            {
                node.value="";
            }
        }
        function checkUser(node)
        {
            var name = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{1,5}$/i;
            if(name.test(node.value))
            {
                node.style.color="#28ff28";
            }
            else
            {
                node.value="";
            }
        }
        function checkPsw(node)
        {
            var psw = /^(?!_)(?!.*?_$)[\w]{6,16}$/i;
            if(psw.test(node.value))
            {
                node.style.color="#28ff28";
            }
            else
            {
                node.value="";
            }
        }
        function rcheckPsw(node)
        {
            var psw = document.getElementById("password1").value;
            if (psw=="")
            {
                node.value="";
                return ;
            }
            if(node.value==psw)
            {
                node.style.color="#28ff28";
            }
            else
            {
                node.value="";
            }
        }
        function register()
        {
            if (document.getElementById("email").value == "") { alert("请填写邮箱!"); return; }
            if (document.getElementById("username").value == "") { alert("请填写用户名!"); return; }
            if (document.getElementById("password1").value == "") { alert("请填写密码!"); return; }
            if (document.getElementById("password2").value == "") { alert("请确认密码!"); return; }
            localStorage.setItem("email",document.getElementById("email").value);
            localStorage.setItem("username",document.getElementById("username").value);            
            var item = null;
            var obj = document.getElementsByName("sex")
            for (var i = 0; i < obj.length; i++) {
                if (obj[i].checked) {
                    item = obj[i].value;                   
                }
            }
            localStorage.setItem("sex",item); 
            localStorage.setItem("password",document.getElementById("password1").value);
            alert("已成功提交您的注册信息!");
            window.location.href="登录.html";
        }
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family:宋体;
            background-image: url("../../images/10087.jpg");
            background-size: cover;
        }

        #bigbox{
            margin: auto;
            margin-top: 20px;
            width: 900px;
            height: 600px;
        }

        #bigbox_left {
            /*设置整体的尺寸、背景色、边距等*/
            width: 600px;
            height: 600px;
            border: 8px solid #eeeeee;
            float: left;
            background: rgba(0, 0, 0,0.6);
        }

        #bigbox_right {
            /*设置整体的尺寸、背景色、边距等*/
            width: 300px;
            height: 600px;
            border: 8px solid #eeeeee;
            background: white;
            float: right;
            background-image: url("../../images/10088.jpg");
        }

        #left {
            /*设置左浮动和外边距*/
            float: left;
            margin: 10px;
        }

        #left > p:first-child {
            /*设置段落(新用户注册)颜色和字体大小*/
            color: gray;
            font-size: 20px;
        }

        #left > p:last-child {
            /*设置段落(USER REGISTER)颜色和字体大小*/
            color: #A6A6A6;
            font-size: 20px;
        }

        #center {
            /*设置中间的各种输入框等*/
            margin:0 auto;
            float: right;
            width: 600px;
        }

        #right {
            /*设置右边段落浮动和外间距*/
            float: right;
            margin-top:500px;
            margin-right:30px;
        }

        #right > p:first-child {
            font-size: 15px;
        }

        #right p a {
            /*设置超链接(立即登录)颜色*/
            color: crimson;
            text-decoration:none;
        }

        .td_head {
            /*设置表单中字体对齐方式和宽度、高度*/
            color:#fff;
            width: 100px;
            height: 30px;
        }

        .input{
            /*设置输入框大小和边框*/
            width: 250px;
            height: 30px;
            margin-bottom: 5px;
            border: none;
            border-bottom: 1px solid white;
            outline: none;
            text-align: center;
            color:#fff;
            background: rgba(0, 0, 0,0);
        }

        .input::-webkit-input-placeholder{
            color: #a0a0a0;
            font-size: 10px;
        }

        .input1{
            /*设置输入框大小和边框*/
            display: none;
            width: 250px;
            height: 30px;
            margin-bottom: 5px;
            border: none;
            border-bottom: 1px solid white;
            outline: none;
            text-align: center;
            color:#fff;
            background: rgba(0, 0, 0,0);
        }

        #but_code{
            width: 100px;
            height: 30px;
            border: 1px solid #A4A4A4;
            /* 设置边框为圆角 */
            border-radius: 8px;
        }

        #zhuce{
            margin: 0 auto;
            text-align: center;
        }

        #btn_sub{
            /*注册按钮*/
            margin-top:20px;
            background: orangered;
            color: whitesmoke;
            width: 150px;
            height: 40px;
            border: 1px solid gray ;
            border-radius: 30px;
        }
        table{
            margin:0 auto;
            text-align: center;
        }
        .btn{
            width: 80px;
            height:30px;
            margin-top: 30px;
            text-transform: uppercase;
            border: 2px solid #fcfcfc;
            color:#fcfcfc;
            text-align: center;
            border-radius: 30px;
            background: rgba(0, 0, 0,0);
            cursor: pointer;
            transition: .2s;
        }
        #bigbox_right .div1{
            margin: 0 auto;
            text-align: center;
            padding-top: 20px;
            color:#fcfcfc;
            font-size: 30px;
        }
        #bigbox_right .div2{
            margin: 0 auto;
            text-align: center;
            padding-top: 20px;
            color:#fcfcfc;
            font-size: 15px;
        }
        #bigbox_right .div3{
            margin: 0 auto;
            text-align: center;
            padding-top: 150px;
            color:#fcfcfc;
            font-size: 30px;
        }
        .fileinput {
            width: 102px;
            height: 34px;
            opacity: 0;
            padding: 0;
            margin: 0;
        }
        .filefont {
            width: 150px;
            height: 34px;
            margin:0 auto;
            margin-top: -36px;
            display: block;
            line-height: 34px;
            border: 1px solid white;
            border-radius: 20px;
            color: #fff;
        }
    </style>
</head>
<body>
    <!--表单内容-->
    <div id="bigbox">
        <div id="bigbox_left">
            <div id="left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>
            <div id="center">
                <div class="form">
                    <form action="http://www.baidu.com/" method="post" onsubmit="return false" autocomplete="off">
                        <table>
                            <tr>
                                <td class="td_head"><label>邮箱</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" class="input" name="email " id="email" onblur="checkEmail(this)">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>用户名</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" class="input" name="username" placeholder="用户名长度不超过5位" id="username" onblur="checkUser(this)">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>性别</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="radio" checked="checked" name="sex" value="男"><span style="color: white;">男</span>
                                    <input type="radio" name="sex" value="女"><span style="color: white;">女</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>头像</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="file" name="" id="" class="fileinput">
                                    <div class="filefont">点击上传头像</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>设置密码</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="password" class="input" name="password1" placeholder="密码长度至少为6位且为字母与数字的组合" id="password1" onblur="checkPsw(this)">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>确认密码</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="password" class="input" name="password2" placeholder="两次密码输入须一致" id="password2" onblur="rcheckPsw(this)">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div id="zhuce">
                    <button id="btn_sub"  onclick="register()">注册</button>
                </div>
            </div>
        </div>
        <div id="bigbox_right">
            <div class="div1">已有账号?</div>
            <div class="div2">有账号就登录吧,好久不见了!</div>
            <div class="div3"><button class="btn" OnClick="javascript:window.location.href='登录.html'">登录</button></div>
        </div>
    </div>
</body>
</html>



版权声明:本文为weixin_58821483原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。