html语言如何实现帐号密码登陆

html-css014

html语言如何实现帐号密码登陆,第1张

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进行处理,运行的结果如下:

<!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>

密&nbsp码:<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,你没有用啊。

以下代码可以实现静态网页的账号密码登录

<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>