HTML实现简单登录以及界面跳转

最新推荐文章于 2024-04-28 15:36:04 发布
最新推荐文章于 2024-04-28 15:36:04 发布
阅读量6.9w 收藏 180
点赞数 15
分类专栏： 代码共享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_ICANDO/article/details/89320187
版权

<html>      
<head>
<title>我的HTML语言
</title>
</head>
<body>
<form action="http://www.baidu.com/">                   //添加事件触发
      用户名：<input type="txt" name="username"><br>
    密码：<input type="password" name="password"><br>
    性别：<input type="radio" name="sex" value="男">男
          <input type="radio" name="sex" value="女">女<br>
    爱好：<input type="checkbox" name="like" value="篮球">篮球
         <input type="checkbox" name="like" value="足球">足球
         <input type="checkbox" name="like" value="乒乓球">乒乓球<br>
                 <input type="submit" name="确定登录">    //点击确定登录即可跳转到对应界面
                <input type="reset" name="重新填写">
</body>
</html>

IT小神来了
关注
  • 15
    点赞
  • 踩
  • 180
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
PHP实现简单登录界面
01-03
登录界面： html代码（login.html)： <form action=login.php method=post> 用户登录 用户名: <input type=text name=username> 密 码: <input type=password name=password> ...
html/php 注册成功后跳转
yi_ZhangMengXin的博客
12-22 1431
由html代码编写的注册页面
html网页跳转
m0_51777056的博客
06-22 380
网页跳转
html好看的登录界面2（十四种风格登录源码）_html登录页面
最新发布
2301_82243626的博客
04-28 1874
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
登录注册页面跳转
qq_37807821的博客
09-02 5万+
用HTML、jQuery和css写一个简单的登录注册页面 看了一些前端部分的视频，有点手痒，想起大学时做的某管理系统的前端部分，当时基本都是靠着CV写的，现在想想应该可以自己写一点了。 话不多说，先上图： 首先是登录页面： 点击注册按钮可以跳转到注册页面： 注册页面做了一点简单的判断： 伪非空验证： 还有伪密码验证： 红字提示存在两秒，两秒后消失，清除密码框内的内容，但是不清除用户名框内的文本。 然后当用户名和密码输入正确以后（其实两次密码一样就行，用户名不空就好）就可以跳转到登录页面。这里有一个坑
用html和css写登陆页面并且跳转网站
2201_75903640的博客
08-24 3043
【代码】用html和css写登陆页面并且跳转网站。
web前端实现一个简单的登录页面跳转
qq_51861704的博客
05-11 3万+
本文来源于个人期末前端作业，实现了一个简单的登录验证及页面跳转的功能（如有错误欢迎立即指出） 1.首先是功能页面演示 登录页面： 密码输入错误，会出现警示框： 密码正确则跳转到指定页面（本代码实现的是简单的登录验证，采用的用户名和密码都是固定的） 2：代码展示 html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h
简单的HTML登录页面制作及跳转页面
Stephen_CY666的博客
07-12 6290
密码账号邮箱:
使用Html做一个简单的登陆页面
桑稚远方的博客
04-05 4万+
有了登录按钮后，在我们的认知下，肯定按了登录会跳到下一个页面，但是今天只是展示做一个简单的登陆界面，就不写跳转和账号密码验证了；登录页面一般就是账号和密码，另外还需要验证码验证需求，这三个常见的属性是一个项目登陆界面重要组成要素；2.账号密码有了之后，下一步就需要登录了，登录是一个按钮，按钮是一个标签。，所以就不使用验证码了，因为验证码在一个项目中是放在后端的，这次就不做演示；不好意思兄弟们，本人没有美感，尽力了，你们自己找好看的点自己修改；如下面的代码，这一步很简单；
html+js实现输入用户名和密码点击登录跳转页面
m0_54256047的博客
12-28 1万+
html+js实现输入用户名和密码点击登录跳转页面
asp登录页面跳转到注册页面_自己动手做一个很酷的登录页面
weixin_39701861的博客
11-29 1513
登录页面静态效果登录页面动态效果登录页面是项目开发中最常用的。今天教大家手写一个登录页面，最终效果见上图。本页面的的开发运用了HTML，CSS和JavaScript的知识。首先创建一个空的CSS文件(style.css)，页面的样式代码将写到这个文件中。然后创建HTML文件，并引入style.css和jquery.min.js。在html文件中引入style.css和jquery.min.js在b...
html实现用户简单的注册登录
03-06
1.用户可以填写信息 2.单选，多选操作 3.下拉框选择 4.用户名和密码正则表达式校验 5.有任何一项未校验成功（包括空白）都无法注册或提交 6.注册成功后跳转到注册成功界面，注册成功后几秒后再次跳转到注册界面。
thinkphp5使html5实现动态跳转的例子
10-16
在本文中，我们将深入探讨如何在ThinkPHP5框架下结合HTML5实现动态跳转，以帮助开发者更好地理解和应用这一技术。首先，我们要了解ThinkPHP5是一个基于PHP的轻量级框架，它提供了一系列强大的功能来简化Web开发流程...
jsp登录会话的简单实现
10-22
在本文中，我们将深入探讨如何使用JavaServer Pages (JSP) 实现一个简单的登录会话。登录会话是Web应用程序中常见的功能，用于确保用户在访问受保护的页面时已经验证了身份。以下是一个基本的步骤和代码示例，演示...
一个复杂美观的登录界面
03-24
相比之前的那个【简单版】登录界面，该模板新增： 1、js 回车事件，并且能够兼容多个浏览器； 2、界面布局的层次结构优化； 3、按钮监听响应事件的实现方式...界面跳转。 当然，该例子主要是展示css对页面的美化效果。
HTML网页跳转代码大全 网页自动跳转代码【分享】
热门推荐
vbn67667的博客
10-23 13万+
很多新手在学习网站建设的时候，不清楚也就是从一个，下面IT备忘录婷婷小编就给大家分享一份比较全面的网页自动跳转代码大全给大家，欢迎大家采纳！
HTML实现登录后跳转到指定页面，不回退
weixin_45392969的博客
03-13 6762
HTML登录成功后跳转页面，浏览器不回退
html登陆成功后跳转页面跳转,怎么设置登录成功后跳转到相应的页面
weixin_32330765的博客
06-03 2万+
想要用angularjs实现的功能是一进入就是一个登录页面(login.html)，如果没有账号密码就注册，登录成功后跳转到相应的页面(shopcart.html)碰到的问题1.一进入页面没有显示登录页面2.显示成功后该如何跳转到相应的页面3.应该在何处判断用户是否登录，或者登录超时之类的下面是我的文档目录结构app.js里的代码如下'use strict';// Declare app leve...
HTML实现页面跳转的5种方法
hdxx2022的博客
02-08 4797
下面以五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。缺点：firefox不支持（firefox不支持span、div等的innerText属性）3") 结合了倒数的javascript实现（firefox）-- 以下方式只是刷新不跳转到其他页面 -->3) 结合了倒数的javascript实现（IE）-- 以下方式定时转到其他页面 -->优点：灵活，可以结合更多的其他功能。缺点：受到不同浏览器的影响。5) 整合3)和3")
编写一个html登录界面以及跳转结果
05-28
好的，我可以帮你编写一个简单的html登录界面并实现跳转结果。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body { background-color: #f1f1f1; font-family: Arial, Helvetica, sans-serif; } .container { background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 20px; margin: 50px auto; max-width: 400px; box-shadow: 0 0 10px #ccc; } input[type=text], input[type=password] { padding: 10px; margin: 5px 0 15px 0; display: block; border: none; border-radius: 5px; background-color: #f1f1f1; width: 100%; } input[type=submit] { background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; padding: 10px; font-size: 16px; cursor: pointer; width: 100%; } input[type=submit]:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h2>Login Form</h2> <form action="#" method="post"> <label for="username"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="username" required> <label for="password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="password" required> <input type="submit" value="Login"> </form> </div> </body> </html> ``` 这个登录界面包含一个输入用户名和密码的表单，以及一个提交按钮。当用户点击提交按钮时，表单数据将被发送到服务器进行验证，并跳转到登录结果页面。在这里，我们只做一个简单的跳转，没有实际的验证过程。以下是跳转结果页面的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Login Result</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>Login Result</h2> <p>Welcome, [username]!</p> </body> </html> ``` 在这个页面中，我们可以在欢迎消息中使用提交的用户名进行个性化欢迎。请将`[username]`替换为实际的用户名。为了使跳转生效，我们需要在提交按钮上添加一个`formaction`属性，以指定跳转结果页面的URL。修改登录界面的代码如下： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body { background-color: #f1f1f1; font-family: Arial, Helvetica, sans-serif; } .container { background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 20px; margin: 50px auto; max-width: 400px; box-shadow: 0 0 10px #ccc; } input[type=text], input[type=password] { padding: 10px; margin: 5px 0 15px 0; display: block; border: none; border-radius: 5px; background-color: #f1f1f1; width: 100%; } input[type=submit] { background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; padding: 10px; font-size: 16px; cursor: pointer; width: 100%; } input[type=submit]:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h2>Login Form</h2> <form action="#" method="post"> <label for="username"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="username" required> <label for="password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="password" required> <input type="submit" value="Login" formaction="login_result.html"> </form> </div> </body> </html> ``` 注意，这里的`formaction`属性指定跳转到`login_result.html`页面。请确保在相同的目录下创建一个名为`login_result.html`的文件，并将上面给出的跳转结果页面代码复制到该文件中。 希望这个示例可以帮助你编写自己的登录界面并实现跳转结果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

IT小神来了

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

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

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

打赏作者

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

抵扣说明：

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

余额充值