html可以使用表单进行的最简单的账号密码登录的页面设计，但是不具备判断账号密码正确性等逻辑的能力，这个需要后台语言处理反馈。
工具原料：编辑器、浏览器
1、使用form表单事件最简单的账号密码登录的数据提交，代码如下：
<!DOCTYPE html><html>
<body>
<form action="login.php">
用户名:<br>
<input type="text" name="firstname" value="请输入账号">
<br>
密码:<br>
<input type="text" name="lastname" value="请输入密码">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2、点击提交数据将会提交给login.php进行处理，运行的结果如下：
以下代码可以实现静态网页的账号密码登录
<form method="post" action="***" name="form" onsubmit="checkpost()">
<label for="name">用户名：</label>
<input type="text" name="name" id="name" />
<br />
<label for="pw">密码：</label>
<input type="password" name="pw" id="pw" />
<br />
<input type="submit" value="提交" />
</form>
<script>
function checkpost(){
if(document.forms[5].name.value=="用户名"&&document.forms[5].pw.value==" 密码"){
window.location="跳转的地址"
}else{
alert("用户名或密码不正确！")
return false
}
}
</script>
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="moban1830/javascript/jquery.min.js"></script><!--自己去下载一个JQUERY-->
<style>
.header{
width:100%
border:1px solid red
}
.left{
float:left
width:40%
border:1px solid red
}
.right{
float:left
width:58%
border:1px solid red
}
.ok{
display:none
}
#tishi{
color:red
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="left">
<div class="up">
<p>
用户名：<input type="text" name="user" id="user"></input>
</p>
<p>
密 码：<input type="password" name="password" id="password"></input>
</p>
<p id="tishi"></p>
<p style="text-align:center">
<input type="button" name="new" id="new" value="注册"></input>
<input type="button" name="up" id="up" value="登录"></input><input type="button" name="re" id="re" value="重置"></input>
</p>
</div>
<!-- 这里是登录后显示的内容 -->
<div class="ok">
<p>欢迎您的登录！</p>
<p class="name"></p>
<input type="button" name="off" id="off" value="注销"></input>
</div>
</div>
<div class="right">这里是右边的块</div>
</body>
<script>
$(document).ready(function(e) {
$("#up").click(function(){
if($("#user").val()==""){
$("#tishi").html("用户名不能空！")
}else
if($("#password").val()==""){
$("#tishi").html("密码不能空！")
}else
if($("#user").val()=="111"&&$("#password").val()=="111"){
$(".up").css("display","none")
$(".name").html("111！")
$(".ok").css("display","block")
} else{
$("#tishi").html("用户名或密码不正确！")
}
})
$("#off").click(function(){
$(".up").css("display","block")
$(".ok").css("display","none")
})
})
</script>
</html>
大概的思路告诉你吧，你已经写到判断input内账号和密码真确的情况
if(用户名&密码都对）{
这个块开始是display是none，如果密码正确设置display为block,同时将登陆框的display设置为none；
然后去监听注销这个按钮，如果点击了，上面的步骤反过来就好了。
}
最主要的题目要求使用jquery，你没有用啊。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）