注册登录都在一个页面，点击注册显示注册隐藏登录表单，点击登录显示登录隐藏注册表单

阳光穿透心脏的1/2处 2022-03-01 08:44 316阅读 0赞

### **功能：** ###

1、html实现注册和登录的表单都在一个页面

2、点击注册，注册页面显示，登录页面隐藏；

3、点击登录，出现登录页面，注册页面隐藏

--------------------

页面效果如下

![20190322101632153.gif][]

--------------------

html页面

<div class="row">
            <img src="../image/logo.png" class="mylogo" />
        </div>
        
        
        <form role="form">
            <table class="table">
                <div class="row">
                    <div class="col-xs-6" >
                        <h1 onclick="blockornone('regedit_div')" id="t_reg">注册<h1>
                        </div>
                   <div class="col-xs-6" >
                     <h1 onclick="blockornone('login_div')"  id="t_log">登录</h1>
                   </div>
                </div>
                <tbody id="regedit_div">
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" placeholder="输入用户名" name="username" /></td>
                    </tr>
                    <tr>
                        <td>输入密码</td>
                        <td><input type="password" name="password" /></td>
                    </tr>
                    <tr>
                        <td>再次输入密码</td>
                        <td><input type="password" name="gpassword" /></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="注册" /></td>
                    </tr>
                </tbody>
                <tbody id="login_div">
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" placeholder="输入用户名" name="username" /></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input type="password" name="password" /></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="登录" /></td>
                    </tr>
                </tbody>
            </table>
        </form>

css代码

*这个是Login.html里面的内容*/
    .mylogo{
    height:100%;
    width:100%;
    }
    #login_div{
    position: absolute;
    width: 100%;
    display: none;
    }
    #regedit_di{
    position: absolute;
    width: 100%;
    }

--------------------

js代码

--------------------

[20190322101632153.gif]: /images/20220301/cb8f7721f8f84da19174fc3897f1e18e.png