简单登录注册页面（HTML5、CSS、JS）

已于 2022-03-26 11:16:41 修改
阅读量1.9w 收藏 317
点赞数 34
文章标签： html5 css javascript
于 2022-03-26 11:14:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49861340/article/details/123752461
版权

使用HTML5和简单的CSS样式写一个登录注册页面，JS和CSS都在HTML5中

登录代码如下

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        body {
            background: url('images/background.jpg') no-repeat;
            background-size: 100% auto;
        }
        
        #login_box {
            width: 20%;
            height: 400px;
            background-color: #00000085;
            margin: auto;
            margin-top: 10%;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
        }
        
        #login_box input,
        #login_box button {
            outline: none;
        }
        
        #login_box h2 {
            color: #ffffff90;
            margin-top: 5%;
        }
        
        #login_box #form #input_box {
            margin-top: 5%;
        }
        
        #login_box #form #input_box input {
            border: 0;
            width: 60%;
            font-size: 15px;
            color: #ffffff;
            background: #ffffff00;
            border-bottom: 2px solid #ffffff;
            padding: 5px 10px;
            margin-top: 10px;
        }
        
        #login_box button {
            margin-top: 50px;
            width: 50%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            font-size: 15px;
            background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
            cursor: pointer;
        }

    </style>
</head>
 
<body>
    <div id="login_box">
        <h2>登 录</h2>
        <div id="form">
            <div id="input_box">
                <input type="text" placeholder="请输入用户名">
            </div>
            <div id="input_box">
                <input type="password" placeholder="请输入密码">
            </div>
        </div>
        <button id="sign_in">登录</button>
        <br>
        <button id="enroll"><a href="regist.html">注册</a></button>
        <!-- 删掉a标签即可-->
    </div>
</body>
 
</html>

注册代码增加了JS判断如下

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="register/html; charset=gb2312">
    <title>注册</title>
    <style>
        body {
            background: url('images/background.jpg') no-repeat;
            background-size: 100% auto;
        }
        
        #loginDiv {
            width: 20%;
            height: 400px;
            background-color: #00000085;
            margin: auto;
            margin-top: 10%;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
        }
        
        #name_trip {
            margin-left: 50px;
            color: red;
        }
        
        p,
        .sexDiv {
            margin-top: 10px;
            margin-left: 20px;
            text-align: left;
            color: azure;
        }
        
        .sexDiv>input {
            width: 30px;
            height: 17px;
        }
        
        input,
        select {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 180px;
            background-color: rgba(105, 105, 105, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
        
        .button {
            margin-top: 30px;
            width: 25%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            font-size: 15px;
            background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
            cursor: pointer;
        }
        
        .introduce {
            margin-left: 110px;
        }
        
        .introduce>textarea {
            background-color: rgba(216, 191, 216, 0.5);
            border-style: hidden;
            outline: none;
            border-radius: 5px;
        }
        
        h1 {
            color: #ffffff90;
            margin-top: 5%;
        }
        
        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
    </style>
</head>
 
<body>
    <div id="loginDiv">
        <form action="">
            <h1>注 册</h1>
            <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>
 
            <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p>
 
            <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>

            <div class="sexDiv">
                用户性别:
                <input class="userSex" name="sex" value="boy" type="radio">男
                <input class="userSex" name="sex" value="girl" type="radio">女
                <label id="sex_trip"></label>
            </div>
            <p>
                电子邮件:
                <input id="email" type="email" required>
                <label id="emil_trip"></label>
            </p>
            <p style="text-align: center;">
                <input type="submit" class="button" onblur="checkForm()" value="提交">
                <input type="reset" class="button" value="重置">
            </p>
        </form>
    </div>
 
</body>
<script type="text/javascript">
    function trip(obj, trip) {
        document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
    }
 
    function checkSex() {
        var sexNum = document.getElementsByName("sex");
        var sex = "";
        for (let i = 0; i < sexNum.length; ++i) {
            if (sexNum[i].checked) {
                sex = sexNum[i];
             }
 
         }
         if (sex == "") {
             trip("sex_trip", "ERROR!!");
             return false;
         } else {
             trip("sex_trip", "OK!!");
         }
    }
 
    function checkForm() {
        checkSelect();
        checkHobby();
        checkSex();
 
        var trip = document.getElementsByName("em");
        var tripV = trip.inerHTML();
        //获取用户名输入项
        var userNname = document.getElementById("userNname");
        var uName = userNname.value;
        if (uName.length < 1 || uName.length > 10) {
            trip("name_trip", "账号长度为1-10位!!");
            return false;
        } else {
            trip("name_trip", "OK!!");
 
        }
 
        //密码长度大于6 和确认必须一致 
        var password = document.getElementById("password");
        var userPass = password.value;
        if (userPass.length < 6) {
            trip("password_trip", "密码要>6位!!");
            return false;
        } else {
            trip("password_trip", "OK!!");
        }
 
        //获取确认密码框的值 var
        var surePassword = document.getElementById("surePassword");
        var surePass = surePassword.value;
        if (userPass != surePass) {
            trip("surePassword_trip", "两次密码不一致!!");
            return false;
        }
 
        //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        var inputEmail = document.getElementById("email");
        var uEmail = inputEmail.value;
        if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
            trip("emil_trip", "邮箱不合法!!");
            return false;
        } else {
            trip("emil_trip", "OK!!");
        }
    }
 
    function submitT() {
        if (checkForm()) {
            return true;
        } else {
            return false;
        }
    }
</script>
</html>

代码中所用背景图：

 登录注册效果图：

 

 下载链接：https://download.csdn.net/download/weixin_49861340/85031482

TA很懒，还没有添加名字
关注
  • 34
    点赞
  • 踩
  • 317
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
HTML5注册页面示例代码
01-21
复制代码代码如下: <!DOCTYPE html> <html> <head> <title>register.html</title> <meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″> <meta http-equiv=”description” content=”this is my page”> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> <LINK rel=”Shortcut icon” href=”favicon
HTML5登录+注册界面
洛谷小蒟蒻
02-07 666
script.js:无。
HTML5用户注册页面实现案例
＃两个西柚
03-20 2401
【代码】HTML5用户注册页面实现案例。
html写一个登录注册页面
liulang68的博客
04-07 7882
【代码】html写一个登录注册页面。
入门HTML5：简单的个人注册信息页面实现
最新发布
2401_83050569的博客
04-14 685
<input type="radio">女</label><button type="">按钮</button>设置label标签的for属性值和表单控件的id属性值相同。<label for="man">男
HTML5设计注册/登录界面
热门推荐
m0_62101200的博客
06-25 2万+
因为我们注册或者登录时是需要提交信息给后台的，所以需要用到表单form标签 span标签是一个基本的文本标签 如果需要登录是要点登录进行页面跳转的，所以我们需要使用a标签进行网址跳转 input标签也就是需要用户进行自行输入信息，并且可以通过type属性进行指定输入文本框的类型，比如我们输入密码时需要进行屏蔽，因而可以设置password属性，在输入密码期间可以不显示具体文本，达到隐私隐藏效果 设置按钮需要用到button标签，其实也可以用input标签，然后设置属性为button，也可以达到同样的
H5做一个登录注册界面
qq_63825941的博客
05-24 2884
页面包含两个表单：登陆表单和注册表单。初始状态下，只显示登陆表单，注册表单被隐藏。当用户点击“马上注册”时，登陆表单被隐藏，注册表单被显示。当用户点击“返回登陆”时，注册表单被隐藏，登陆表单被显示。
【HTML+CSS+JS】登录注册页面大合集
lion_no_back的博客
04-25 2万+
登录注册页面改造升级
利用HTML,CSS,JS进行注册页面的制作
hualidezhen的博客
03-24 919
利用HTML,CSS,JS进行注册页面的制作 上一篇发表的只是登录注册项目的一半，这章为注册页面，相比较与登录页面，注册页面的功能相对更多，内容更加丰富一些，比较完善，更加像一个正常网站用到得一个注册页面，比如，我在每一个注册内容面前加了验证，对注册的用户名，密码，电话号码等进行了 规范处理，添加了限制条件，让其更加真实接近正常的注册页面 注册页面的html源代码： <!DOCTYPE html> <html lang="en" > <head> <meta
H5登录界面
weixin_37839390的博客
10-13 2万+
H5登录界面一、登录界面：所用技术：前端：html+css+js+jquery+layer.js+icoonfont 后端：.net 1、移动端页面的制作，一般使用百分比布局+rem布局，但是rem需要在有ui的psd原型图才能使用 2、移动端页面的制作不要忘记添加适配代码viewport <meta name="viewport" content="wid
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更...
HTML5+CSS3+JavaScript-登录页面
12-17
在这个“HTML5+CSS3+JavaScript-登录页面”项目中，我们将深入探讨这些技术在创建一个功能完备的登录界面中的应用。 首先，HTML5（超文本标记语言第五版）提供了更加强大的结构化元素，比如`<header>`、`<nav>`、`...
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 ...
HTML5期末大作业：茶叶主题网页设计——精美自适应绿色茶叶公司网页设计(12页) HTML+CSS+JavaScript
qq_365392777
09-26 2667
HTML5期末大作业：茶叶主题网页设计——精美自适应绿色茶叶公司网页设计(12页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目,
HTML期末学生大作业：基于html+css+javascript+jquery企业餐厅11页 企业网站制作
12-12 137
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨
HTML+CSS大学生个人网站作业模板~黑色的html5个人博客网站模板整站下载
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-04 1万+
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：黑色的html5
【Web技术】（实验一）HTML静态网页设计
m0_57840386的博客
05-21 8379
文章目录1.实验内容2.页面效果2.1 登录2.2 注册2.3 修改密码2.4 主页面3.源代码3.1 代码目录1.html2.html3.html4.htmlnew.html1.csscolor.js 1.实验内容 综合应用 HTML，CSS 和 JavaScript 技术设计基本信息系统所包括的一组页面，包括登陆，注册，忘记密码，主页，信息页面等，所有的页面需要实现响应式布局，其中的链接，按钮需要可以点击，形成一个完整的系统。 （1） 登陆页面 要求：能够根据界面的大小自适应布局，当屏幕尺寸大于等于 6
简单的登录加注册页面html+css+js
05-28
好的，以下是一个简单的登录和注册页面的HTML、CSS和JS代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录/注册</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="form-container"> <h1>登录</h1> <form id="login-form"> <label for="username">用户名</label> <input type="text" id="username" name="username"> <label for="password">密码</label> <input type="password" id="password" name="password"> <button type="submit">登录</button> </form> </div> <div class="form-container"> <h1>注册</h1> <form id="register-form"> <label for="new-username">用户名</label> <input type="text" id="new-username" name="new-username"> <label for="new-email">邮箱</label> <input type="email" id="new-email" name="new-email"> <label for="new-password">密码</label> <input type="password" id="new-password" name="new-password"> <button type="submit">注册</button> </form> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ```css .container { max-width: 800px; margin: 0 auto; text-align: center; display: flex; justify-content: center; } .form-container { margin: 0 20px; width: 300px; text-align: center; } h1 { font-size: 32px; margin-bottom: 20px; } form { display: inline-block; text-align: left; } label { display: block; margin-bottom: 10px; } input { padding: 8px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; width: 100%; } button { padding: 10px; background-color: #0077cc; color: #fff; border: none; border-radius: 4px; cursor: pointer; } ``` JS代码： ```js const loginForm = document.getElementById('login-form'); const username = document.getElementById('username'); const password = document.getElementById('password'); const registerForm = document.getElementById('register-form'); const newUsername = document.getElementById('new-username'); const newEmail = document.getElementById('new-email'); const newPassword = document.getElementById('new-password'); loginForm.addEventListener('submit', (e) => { e.preventDefault(); const userData = { username: username.value, password: password.value }; // TODO: 将用户数据提交到服务器进行登录验证 console.log(userData); }); registerForm.addEventListener('submit', (e) => { e.preventDefault(); const userData = { username: newUsername.value, email: newEmail.value, password: newPassword.value }; // TODO: 将用户数据提交到服务器进行注册 console.log(userData); }); ``` 这段代码实现了一个简单的登录和注册页面，包括用户名、邮箱和密码的输入框以及登录和注册按钮。当用户点击登录或注册按钮时，JS代码会获取输入框中的数据，并将其打印到控制台上。你可以根据需要修改代码，例如将数据提交到服务器进行登录验证和注册。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值