编写前端登录界面

已于 2022-11-11 19:44:08 修改
阅读量298 收藏
点赞数
文章标签： 前端 html javascript
于 2022-11-11 19:38:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69218994/article/details/127811889
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../static/css/css.css" type="text/css">
</head>
<body>
<div id="top"></div>
<ul>
<li>登录</li>
<li>注册</li>
</ul>

<div id="content"></div>
<form method="post">
<h1 id="h1_1">账号</h1>

<input type="text" name="username"><br><br><br>
<h2 id="h2_1">密码</h2>
<input type="password" name="password" class="password-reset-link"><br>
<span style="color: #ff0000;margin-left:10px" ;>{{msg}}</span>
<input type="submit" name="submit" value="" style="width: 124px;height: 50px;margin-top: 50px;margin-left: 220px;border-radius: 20px;">

</form>
<!--<ul>-->
<!--<li>账号</li>-->
<!--<li>密码</li>-->
<!--</ul>-->

</body>
</html>
Main.c35
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
登录页面简单写法
2301_79568779的博客
12-17 417
【代码】登录页面简单写法。
写一个前端的登录界面
weixin_42600128的博客
12-19 53
好的，这是一个简单的前端登录界面示例： <html> <head> <title>登录界面</title> </head> <body> <h1>登录</h1> <form> <label for="username">用户名：&l...
前端登录页面
最新发布
hexuhui0920的博客
04-30 127
HTML+CSS 前端登录页面
前端之登录注册页面案例
KK_2018的技术博客_程序员不止是程序员
05-08 3万+
一、效果图 （1）登录界面 （2）注册界面 二、详细设计 （1）登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style> ...
前端 代码 登录页面
weixin_65459869的博客
07-12 178
邮箱：
前端如何写登录页面
qlin_11的博客
08-12 6495
登录页面的主要思路有很多，这里提供两个先 第一是我目前项目里面老人写的，逻辑是在每次请求时先对后端返回的状态码做判断，如果是无权限或者失效状态，那就使用window.location.href来跳转到登录页面，但是有个问题，就是页面渲染的顺序问题，主页会先渲染然后到请求时才会判断请求结果，这个有延迟，login弹出不是先弹出，会先看到主页。这里要看你的项目是否接受这个问题。 第二个就是利用路由钩子...
前端：新浪邮箱界面编写
03-03
前端：新浪邮箱界面编写 前端初级测试编写 新浪邮箱登陆界面
layui实现登陆界面验证码.docx
01-21
layui 是一个流行的前端框架，它提供了很多实用的功能和组件，其中包括实现登陆界面验证码的功能。在本文中，我们将详细介绍如何使用 layui 实现登陆界面验证码。 首先，让我们来看看 layui 实现登陆界面验证码的 ...
html5,js所编写的一个精美的登陆以及注册界面
10-09
web前端,模仿阿里云注册界面,编写，登陆界面以及注册界面都有相应的注释很容易照着修改！
Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）
12-31
Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。
青少年编程教育平台后台—登录注册（界面设计）
01-21
纯HTML和CSS完成，未使用框架
登录页面前端
02-21
登录页面 :milky_way: 这是登录页面前端 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test通过执行单元测试。 运行端到端测试 运行ng e2e以通过执行端到端测试。 :new_moon: TODOS池 查看这个狗屎 使站点更轻 创建“欢迎页面”路线 与获取（并显示）用户的端点（即欢迎页面）创建连接
写一个前端登陆页面代码
weixin_42579969的博客
02-18 112
<html> <head> <title>登录页面</title> </head> <body> <form action="login.php" method="post"> 用户名：<input type="text" name="username"><br /> 密码：<...
vue+spring boot项目实现PC端微信登录
weixin_45001200的博客
08-08 1561
一、实现微信登录在编码前需要在微信开放平台注册开发者账号和安装NatApp获取域名。 微信开放平台注册开发者账号可参考：https://blog.csdn.net/weixin_45001200/article/details/119495080?spm=1001.2014.3001.5502 安装NatApp获取域名可参考：https://blog.csdn.net/weixin_45001200/article/details/119495198?spm=1001.2014.3001.5502 二、微信
前端小案例——登录界面（正则验证, 附源码）
前端小白一枚
03-04 1470
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。来监听 DOMContentLoaded 事件，确保页面中的所有元素都已加载完毕。最后，根据验证结果，在页面上显示相应的提示信息。在表单提交事件中，首先阻止默认的表单提交行为。，以便在验证用户输入后自行处理提交逻辑。和用于显示验证信息的元素。当页面加载完成后，通过。用于验证身份证号码。
前端炫酷登录界面
qq_46413200的博客
07-01 619
html内容
前端登陆界面
oafseoases
06-26 1万+
用 HTML + CSS 写的前端登陆界面
登录功能代码(前端＋后端)
热门推荐
张思阳的博客
04-29 5万+
1.实现思路 在登录页面用表单提交数据的方式，向后端发送用户名和密码； 在数据库的用户表中查询是否有前端传来的用户名和密码，并向前端返回提示信息 登录成功后跳回原页面 2.实现代码 登录页面HTML代码 &lt;form id="login"&gt; 用户名: &lt;input id="txtName" name="uname" value=""/&gt;&l
python前端系统登陆界面
05-14
可以使用Python的Flask框架和HTML、CSS、JavaScript等前端技术实现一个简单的登录界面。 首先，需要在Flask中设置一个路由来处理登录请求： ```python from flask import Flask, render_template, request app = Flask(__name__) @app.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': # 处理表单提交的数据 username = request.form['username'] password = request.form['password'] # 验证用户名和密码是否正确 if username == 'admin' and password == '123456': return '登录成功' else: return '用户名或密码错误' else: # 显示登录页面 return render_template('login.html') ``` 然后，需要编写一个HTML文件作为登录界面的模板，可以使用Bootstrap等前端框架美化界面： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>登录</h1> <form method="post" action="/login"> <div class="form-group"> <label for="username">用户名：</label> <input type="text" class="form-control" id="username" name="username"> </div> <div class="form-group"> <label for="password">密码：</label> <input type="password" class="form-control" id="password" name="password"> </div> <button type="submit" class="btn btn-primary">登录</button> </form> </div> </body> </html> ``` 最后，启动Flask应用程序，访问登录页面即可进行登录： ```python if __name__ == '__main__': app.run() ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值