HTML+CSS+JS实现简单登录模板

最新推荐文章于 2024-05-23 18:39:43 发布
最新推荐文章于 2024-05-23 18:39:43 发布
阅读量1.4k 收藏 11
点赞数 4
分类专栏： 前端开发 文章标签： css html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52762409/article/details/120617846
版权

本文主要为大家详细介绍、展示如何用HTML+CSS+JS来实现简单登录界面，有需要的小伙伴可以自行学习，希望可以帮助到大家哟！

一.进行布局，选择标签

<body>
    <div class="loginBox">
        <h2>Login</h2>
        <form action="">
           <div class="item">                   <!--布局-->
                <input type="text" required>
                 <label for="">UserName</label>  <!--点击标签时关联的文本框获得焦点-->
            </div>
            <div class="item">
                <input type="password" required>
                <label for="">PassWord</label>
            </div>
            <button class="btn">submit</button>
            <button class="btn" style="margin-left: 80px;">register</button>
            <span>
最低0.47元/天 解锁文章
扎娃真烦
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS编写一个较为美观的简单登录注册网页
weixin_54018699的博客
06-26 1万+
前辈们请跳过 在校大学生 学习web一个月做出来的。 CSS订制两个网页的样式和简单的小动画 Js实现注册登录的正确错误，值得一提的是，我这里设置了用户名为1234，密码为1234才可以登录跳转。没有加后端。注册的格式大家就自行查看。 HTML定义网页基本框架 经检验火狐、Microsoft Edge都可以实现 登录页面： 注册页面： 登录页面代码： // An highlighted block <!DOCTYPE html> <html lang="en" dir="ltr">
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 26万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
HTML+CSS+JS实现登入注册页面及其功能
m0_65762354的博客
05-17 728
直接上代码。
HTML+CSS+JS 网页设计实例 静态响应式前端网页模板(一键复制)①
最新发布
我们好像在哪见过
05-23 916
前端领域创作者。静态网页设计期末作业/毕设源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。
web前端登陆注册界面（html+css+js）
Anqefdc的博客
06-22 6060
制作内容：粉丝网页登录注册功能页面 作品风格：主题：以“时代少年团”为爱豆，制作粉丝可以交流、获取爱豆动态、购买爱豆周边的网页。 网站的登录界面：背景是七个爱豆在舞台上的光影图，登陆界面整体色彩为蓝色也是意寓粉丝可以在这样一个蓝色深海般的网站中畅所欲言。页面含有背景音乐 “少年时代”听之舒缓安心会让整个登录过程中的粉丝更加沉浸。 注册界面：整体颜色采用了深沉灰色，结构框架简约大方。 网页界面：整体选择蓝色，页面介绍爱豆团体的口号并在旁边轮播爱豆的美图，右侧依次有其他功能，功能选择背景颜色为橙色使之更加醒目，
简单的登录界面（html）
Delphi_7710的博客
07-09 4922
开头先展示成果： 制作该页面代码不多，十分简单，运用了些许CSS，但大部分都是html。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="short icon" href="photo/titlepicture(banshou).jpeg" > <title>HTML登录界面</t
html+css+js科幻后台登录界面模板
04-10
html+css+js科幻后台登录界面模板，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者...
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
html+css+js酷炫全屏的后台登录注册界面模板
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更...
HTML+CSS+JavaScript网页模板
07-09
【HTML+CSS+JavaScript网页模板】是Web开发中常见的元素，它们构成了网页的基本结构、样式和交互性。HTML（HyperText Markup Language）是用于创建网页内容的标记语言，CSS（Cascading Style Sheets）则负责定义这些...
基于HTML5+css+JS的精美登陆注册界面
02-14
基于HTML5+css+JS的精美登陆注册界面
HTML实验-登录界面（html+js+css）
11-15
初学者可以学习一下,HTML写的登陆界面,增加一些JS和CSS代码对数据进行验证和美化界面。 下载下来直接打开html文件即可。
js+css实现点击导航条“登录”弹出登录框界面
杉楂的博客
12-13 1万+
依旧是项目的登录问题，不过这次是界面。 实现弹出页面的效果还可以使用如bootstrap模态框一类的javascript插件，不过这里使用的是js+css简单实现的效果。 首先是导航条的“登录”： nav-login" href="javascript:;">登录 接着是login表单界面： login-form"> × 用户登录 用户名 密码
利用JS实现简单登录
div666的博客
02-03 2万+
介绍如何使用JS实现账户验证及登录跳转。
银行登录页面html代码,银行管理系统（带界面）
weixin_39845113的博客
06-23 3385
【实例简介】银行管理系统，可以实现存款取款转账功能，还可以进行查询，注册等。进入界面需要登录账号密码，初始密码等可在代码内或MYsql数据库里查看【实例截图】【核心代码】银行账户管理系统└── 银行账户管理系统├── bin│ └── com│ ├── connection│ │ └── DBConnection.class│ ├── dao│ ...
超炫酷html+css+javascript实现登录模板
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-17 3964
超炫酷html+css+javascript实现登录模板 利用Css3 html5实现的超炫酷的登录 很早以前，我们为大家分享过不少外观和功能都非常不错的登录表单，有些登录表单应用了CSS3特性添加了更绚丽的动画特效，比如这款精美的CSS3登录注册切换表单就相当华丽。今天要分享的这款动画登录表单也非常不错，输入框中带有小图标，可随着焦点的获取和失去是现实和隐藏，点击登录时会有一段自定义的登录动画，并最后提示登录成功。 代码中有具体功能注释 如果有不懂的 可以随时沟通 暗色科幻风格HTML登录页面模板.
写一个简单的输入框
有条理的博客
07-31 511
lianxi1.html lianxi1.css @charset "utf-8"; .res{ border: 1px solid blue; height: 72px; width: 434px; } .t1{ height: 36px; width: 300px; margin
用HTML+CSS+JS实现一个登录注册界面模板
06-13
好的，我可以为您提供一个简单的登录注册界面模板，以下是代码： HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login Register Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="form-wrapper"> <form class="form" id="login-form"> <h2>Login</h2> <input type="text" id="login-username" placeholder="Username"> <input type="password" id="login-password" placeholder="Password"> <button type="submit">Login</button> </form> <form class="form" id="register-form"> <h2>Register</h2> <input type="text" id="register-username" placeholder="Username"> <input type="email" id="register-email" placeholder="Email"> <input type="password" id="register-password" placeholder="Password"> <button type="submit">Register</button> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` body { background-color: #f1f1f1; font-family: Arial, sans-serif; } .form-wrapper { max-width: 500px; margin: 0 auto; display: flex; justify-content: center; align-items: center; height: 100vh; } .form { background-color: white; border-radius: 5px; padding: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } h2 { margin-top: 0; } input[type="text"], input[type="email"], input[type="password"] { display: block; margin-bottom: 10px; border-radius: 3px; border: 1px solid #ccc; padding: 8px; width: 100%; } button[type="submit"] { display: block; margin: 10px 0 0 auto; background-color: #4CAF50; color: white; border: none; border-radius: 3px; padding: 10px 20px; cursor: pointer; } button[type="submit"]:hover { background-color: #3e8e41; } /* Register form hidden by default */ #register-form { display: none; } ``` JS代码： ``` const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); document.getElementById('show-register-form').addEventListener('click', () => { loginForm.style.display = 'none'; registerForm.style.display = 'block'; }); document.getElementById('show-login-form').addEventListener('click', () => { loginForm.style.display = 'block'; registerForm.style.display = 'none'; }); loginForm.addEventListener('submit', (event) => { event.preventDefault(); const username = document.getElementById('login-username').value; const password = document.getElementById('login-password').value; // TODO: Login logic here }); registerForm.addEventListener('submit', (event) => { event.preventDefault(); const username = document.getElementById('register-username').value; const email = document.getElementById('register-email').value; const password = document.getElementById('register-password').value; // TODO: Register logic here }); ``` 这是一个简单的登录注册界面模板，包含一个登录表单和一个注册表单，可以通过点击“Register”或“Login”按钮来切换表单。您可以根据需要添加更多的表单字段和逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值