HTML+CSS+JS 简单登录注册功能页

最新推荐文章于 2024-05-14 23:02:02 发布
最新推荐文章于 2024-05-14 23:02:02 发布
阅读量2k 收藏 36
点赞数 23
文章标签： html css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/umin_/article/details/136424833
版权
本文档展示了使用HTML、CSS和JavaScript实现的一个登录、注册和找回密码页面，包括表单验证和本地存储功能。
摘要由CSDN通过智能技术生成

演示视频

https://www.bilibili.com/video/BV1Ui421Z7QP/?share_source=copy_web&vd_source=28c679b91e10365548e98c3b0f7a6fbc

运行页面

  • 登录页

  • 找回密码页面

  • 注册页

代码截图

  • index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <section>
        <div class=" login-box active">
            <div class="login-form">
                <form action="">
                    <h2>Login</h2>
                    <div class="inputbox">
                        <ion-icon name="person-outline"></ion-icon>
                        <input type="text" id="login-user" required>
                        <label for="">Username</label>
                    </div>
                    <div class="inputbox">
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <input type="password" id="login-pass" required>
                        <label for="">Password</label>
                    </div>
                    <div class="forget">
                        <label for="remember-me">
                            <input type="checkbox" id="remember-me">Remember Me
                            <a href="#" onclick="goBox('forget')">Forget Password</a>
                        </label>
                    </div>
                    <button class="loginBtn" onclick="doLogin()">Log In</button>
                    <div class="link">
                        <p>Don't have a account
                            <a href="#" onclick="goBox('register')">register</a>
                        </p>
                    </div>
                </form>
            </div>

        </div>
        <div class="register-box">
            <div class="register-form">
                <form action="" id="register-form">
                    <h2>Register</h2>
                    <div class="inputbox">
                        <ion-icon name="person-outline"></ion-icon>
                        <input type="text" id="register-user" required>
                        <label for="">Username</label>
                    </div>
                    <div class="inputbox">
                        <ion-icon name="mail-outline"></ion-icon>
                        <input type="email" id="register-email" required>
                        <label for="">Email</label>
                    </div>
                    <div class="inputbox" style="width: 200px;">
                        <ion-icon name="shield-checkmark-outline"></ion-icon>
                        <input type="text" id="register-code" required>
                        <label for="">Enter Captcha</label>
                        <button onclick="sendCode()">Send Code</button>
                    </div>
                    <div class="inputbox">
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <input type="password" id="register-pass" required>
                        <label for="">Password</label>
                    </div>

                    <button class="registerBtn" onclick="doRegister()">Register</button>
                    <div class="link">
                        <p>Have a account
                            <a href="#" onclick="goBox('login')">login</a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
        <div class="forget-box">
            <div class="forget-form">
                <form action="" id="forget-form">
                    <h2>Find Password</h2>
                    <div class="inputbox">
                        <ion-icon name="mail-outline"></ion-icon>
                        <input type="email" id="forget-email" required>
                        <label for="">Email</label>
                    </div>
                    <div class="inputbox" style="width: 200px;">
                        <ion-icon name="shield-checkmark-outline"></ion-icon>
                        <input type="text" id="forget-code" required>
                        <label for="">Enter Captcha</label>
                        <button onclick="sendCode()">Send Code</button>
                    </div>
                    <div class="inputbox">
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <input type="password" id="forget-pass" required>
                        <label for="">New Password</label>
                    </div>
                    <button class="registerBtn" onclick="doUpdate()">Update</button>
                    <div class="link">
                        <p>Have a account
                            <a href="#" onclick="goBox('login')">login</a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <script>

        document.addEventListener('DOMContentLoaded', function () {
            // 检查本地存储中的“Remember Me”状态，更新复选框
            let rememberMeCheckbox = document.getElementById('remember-me');

            if (localStorage.getItem('rememberMe') === 'true') {
                rememberMeCheckbox.checked = true;

                let user = JSON.parse(localStorage.getItem('user'))

                document.getElementById('login-user').value=user.username
                document.getElementById('login-pass').value=user.password
            }
        });

        // 登录事件
        function doLogin() {
            const username = document.getElementById('login-user').value
            const password = document.getElementById('login-pass').value
            console.log('登录表单：',
                {
                    username: username,
                    password: password
                });
            if (username === 'sa' && password === '123') {
                
                alert('Login Success!!!')

                const rememberMeCheckBox = document.getElementById('remember-me')
                if (rememberMeCheckBox.checked) {
                    localStorage.setItem('rememberMe', 'true')

                    const userObj = { username: username, password: password };
                    const userStr = JSON.stringify(userObj);
                    localStorage.setItem('user', userStr);
                } else {
                    localStorage.removeItem('rememberMe')
                    localStorage.removeItem('user')
                }


            } else {
                alert('Login Fail!!!')
            }
        }

        // 注册事件
        function doRegister() {
            const username = document.getElementById('register-user').value
            const email = document.getElementById('register-email').value
            const code = document.getElementById('register-code').value
            const password = document.getElementById('register-pass').value


            console.log('注册表单：',
                {
                    username: username,
                    email: email,
                    code: code,
                    password: password
                });

            if (username && email && code && password) {
                alert('Register Success!!!');


                // 清空表单内容
                document.getElementById('register-user').value = '';
                document.getElementById('register-email').value = '';
                document.getElementById('register-code').value = '';
                document.getElementById('register-pass').value = '';

                // 切换到登录表单
                goBox();
            } else {
                alert('Register Fail!!!');
            }
        }

        // 找回密码事件
       function doUpdate() {
            const email = document.getElementById('forget-email').value
            const code = document.getElementById('forget-code').value
            const password = document.getElementById('forget-pass').value


            console.log('更新密码表单',
                {
                    email: email,
                    code: code,
                    password: password
                });

            if (email && code && password) {
                alert('UUpdate Success!!!');


                // 清空表单内容
                document.getElementById('forget-email').value = '';
                document.getElementById('forget-code').value = '';
                document.getElementById('forget-pass').value = '';

                // 切换到登录表单
                goBox();
            } else {
                alert('Update Fail!!!');
            }
        }

        // 切换登录注册表单
        function goBox(type) {
            let loginForm = document.querySelector('.login-box');
            let registerForm = document.querySelector('.register-box');
            let forgetPasswordForm = document.querySelector('.forget-box');

            // 首先隐藏所有表单
            loginForm.classList.remove('active');
            registerForm.classList.remove('active');
            forgetPasswordForm.classList.remove('active');

            // 根据目标显示对应的表单
            if (type === 'register') {
                registerForm.classList.add('active');
            } else if (type === 'forget') {
                forgetPasswordForm.classList.add('active');
            } else {
                loginForm.classList.add('active');
            }
        }

    </script>
</body>

</html>
  •  index.css
* {
    margin: 0;
    padding: 0;
}

section {
    min-height: 100vh;
    width: 100%;
    background: url(../img/bg1.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.login-box,
.register-box,
.forget-box {
    width: 400px;
    height: 400px;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

.register-box {
    height: 550px;
}


.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}

.login-form,
.register-form,
.forget-form {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 450px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.register-form {
    height: 550px;
    padding: 30px 0 0 0;
}

.forget-form{
    
    padding: 30px 0 0 0;
}


h2 {
    font-size: 2em;
    color: #fff;
    text-align: center;
}

.inputbox {
    position: relative;
    margin: 30px 0;
    width: 310px;
    border-bottom: 2px solid #fff;

    button{
        position: absolute;
        right: -110px;
        top: 8px;
        width: 100px;
        height: 40px;
        font-size: 1em;
        border-radius: 5px;
        background:transparent;
        border: 1px solid #fff;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;

        &:hover{
            transform: translateY(-10%);
            -webkit-transform: translateY(-10%);
            -moz-transform: translateY(-10%);
            -ms-transform: translateY(-10%);
            -o-transform: translateY(-10%);
            transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            box-shadow: 0px 3px 8px -3px #fff;
            
}
}
}

.inputbox label {
    position: absolute;
    top: 50%;
    left: 5px;
    color: #fff;
    font-size: 1em;
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}

input:focus~label,
input:valid~label {
    top: -5px;
}

.inputbox input {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    padding: 0 35px 0 5px;
    color: #fff;
}

.inputbox ion-icon {
    position: absolute;
    right: 8px;
    color: #fff;
    font-size: 1.2em;
    top: 20px;
}

.forget {
    margin: -15px 0 35px;
    font-size: .9em;
    color: #fff;

    label {
        input {
            margin-right: 3px;
            color: #fff;
        }

        a {
            margin-left: 5px;
            font-size: .9em;
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            float: right;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}

.loginBtn,
.registerBtn {
    width: 100%;
    height: 40px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
}

.link {
    font-size: .9em;
    color: #fff;
    text-align: center;
    margin: 25px 0 10px;

    a {
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        font-size: .9em;
        margin-left: 5px;

        &:hover {
            text-decoration: underline;
        }
    }
}

创造不易，多多点赞吖

拿走吱一声就行

白白的西柚珉•᷄ࡇ•᷅
关注
  • 23
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
[HTML+CSS+JS] 实现注册登录页面
2401_84092574的博客
04-08 1138
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
html+css+js实现登录页面
m0_62237068的博客
07-16 1418
账号登陆安全登陆
html+css+js百度首页制作+附源代码+实现简单【百度一下】功能
01-08
文章目录写在前面页面效果百度网盘提取码 写在前面 本博客只为有需要的朋友提供借鉴。 课堂作业要求完成的，实现了基本功能，光标移上去变成小手，js实现了百度一下功能。页面布局没问题，页面样式没问题。 导航栏其他的部分链接没把网址改过来，导航栏位置天气未获取，有需要的可以多花点时间。就说到这，专业前端勿喷。 页面效果 实现百度一下功能 百度网盘提取码 链接：https://pan.baidu.com/s/1oKeHPPcsmDCr9GZHEhU9-g 提取码：ab0y 解压导入dw或者其他编译器即可
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。
【HTML CSS JS】耗时一下午，整理出了一个精美的响应式登陆注册表单（附源码
最新发布
2401_84181731的博客
05-14 1046
本文花费大量时间介绍了如何创建一个响应式布局的精美注册表单代码，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下👍⭐️✏️网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
网页登录界面——首页（html+css）
2303_78135678的博客
04-11 842
利用初学的前端知识，手敲登录页（持续学习中）
【前端学习】HTML + CSS 写一个登陆界面
Liaojiajia-Blog
03-03 3696
HTML + CSS 写一个登陆界面1. index.html2. style.css3. iconfont.css4. 界面效果 1. index.html <!-- * @Author: your name * @Date: 2021-03-04 16:27:09 * @LastEditTime: 2021-03-04 16:37:03 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit
html+css制作简单注册登录页面
m0_67930426的博客
10-19 1万+
光标为手的形状，当光标指定这个div的时候，光标为手的形状。没有账号，去注册 忘记密码。前端页面要得到css的布局，就得在html页面里调用css文件。方框（请输入用户名）方框（请输入用户名）写完这一步，然后再去运行，是没有东西的，但是并不是不存在。例如我在注册这一块级里，我用鼠标指定这一区域时会变成蓝色。如果不加，我们可以根据内容的多少，设计多少白色的部分。.b{ } 是针对注册两个字后面的白色部分进行布局。
用css制作好看的登录注册页面
lpfhjw的博客
10-18 3796
【代码】用css制作好看的登录注册页面。
用css写一个登录注册页面
weixin_42610010的博客
02-07 341
如果你想用CSS来创建一个登录注册页面，那么你需要先学习一些CSS的基础知识。首先，你需要了解HTML的布局方式，然后再学习如何使用CSS来设计页面的样式。 接下来，你可以使用CSS的各种样式属性来设计登录注册页面的布局。例如，你可以使用CSS的定位属性来设置元素的位置，使用CSS的颜色属性来设置元素的颜色，使用CSS的字体属性来设置元素的字体等。 最后，你可以使用CSS的媒体查询来设计登录注册页...
简单好看的登陆注册界面
10-16
一个简单的网页登陆和界面，可以识别输入的密码邮箱等格式错误，原代码有很多的不必要代码，被我修改后更加简洁，也更适合新手。
html+css登录页面
06-12
HTML和CSS是构建网页的基本语言，对于创建一个吸引人的、功能完善的登录页面至关重要。"html+css登录页面"这个主题涵盖了如何使用这两种技术来设计和实现登录界面的关键知识点。 首先，HTML（HyperText Markup ...
简单登录注册页面（HTML5、CSS、JS）
03-24
总结，这个“简单登录注册页面”项目展示了HTML5、CSS和JavaScript在前端开发中的基本应用，通过它们的组合，可以创建出交互性强、视觉效果良好的用户界面。了解并熟练掌握这些技术对于任何前端开发者来说都是至关...
基于HTML5+css+JS的精美登陆注册界面
03-22
【标题】：“基于HTML5+CSS+JS的精美登录注册界面” 在网页设计领域，创建一个吸引用户且功能完善的登录和注册界面至关重要。这个项目基于HTML5、CSS和JavaScript技术，构建了一个美观且互动性强的界面，展示了这些...
html+JS+CSS H5自定义登录风格模板八套
09-19
HTML、CSS和JavaScript是网页开发的三大核心技术，它们共同构成了H5（HTML5）自定义登录风格的基础。本文将深入探讨这些技术在构建登录模板中的应用，并提供关于如何设计和实现八套不同风格的登录界面的知识点。 1....
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 26万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
前端小案例——登录界面（正则验证, 附源码）
前端小白一枚
03-04 1960
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。来监听 DOMContentLoaded 事件，确保页面中的所有元素都已加载完毕。最后，根据验证结果，在页面上显示相应的提示信息。在表单提交事件中，首先阻止默认的表单提交行为。，以便在验证用户输入后自行处理提交逻辑。和用于显示验证信息的元素。当页面加载完成后，通过。用于验证身份证号码。
使用HTML+CSS实现一个简单的登录页面
weixin_51621120的博客
04-11 433
【代码】使用HTML+CSS实现一个简单的登录页面。
html+css+js生成登录注册页面
05-19
你可以使用HTML编写页面结构，使用CSS进行样式美化，使用JavaScript实现交互功能。以下是一个简单的登录注册页面示例代码： ``` <!DOCTYPE html> <html> <head> <title>Login/Register</title> <meta charset="utf-8"> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } form { background-color: #fff; width: 300px; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px #ccc; margin: 0 auto; } h1 { text-align: center; color: #444; } input { margin-bottom: 10px; width: 100%; padding: 10px; box-sizing: border-box; border-radius: 3px; border: 1px solid #ccc; font-family: Arial, sans-serif; font-size: 16px; } button { display: block; margin: 0 auto; padding: 10px 20px; background-color: #0086b3; color: #fff; border: none; border-radius: 3px; font-size: 16px; cursor: pointer; } #register { display: none; } #register-link { text-align: center; margin-top: 10px; font-size: 14px; } #register-link a { color: #0086b3; text-decoration: none; } </style> </head> <body> <form id="login"> <h1>Login</h1> <input type="text" name="username" placeholder="Username" required> <input type="password" name="password" placeholder="Password" required> <button type="submit">Login</button> <div id="register-link">Not registered yet? <a href="#" onclick="showRegister()">Register here</a></div> </form> <form id="register"> <h1>Register</h1> <input type="text" name="username" placeholder="Username" required> <input type="email" name="email" placeholder="Email" required> <input type="password" name="password" placeholder="Password" required> <input type="password" name="password-confirm" placeholder="Confirm password" required> <button type="submit">Register</button> <div id="register-link">Already registered? <a href="#" onclick="showLogin()">Login here</a></div> </form> <script> function showRegister() { document.getElementById("login").style.display = "none"; document.getElementById("register").style.display = "block"; } function showLogin() { document.getElementById("register").style.display = "none"; document.getElementById("login").style.display = "block"; } </script> </body> </html> ``` 你可以将以上代码保存为HTML文件，使用浏览器打开即可看到登录注册页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白白的西柚珉•᷄ࡇ•᷅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值