用html代码编写一个简单的登陆界面

用html代码编写一个简单的登陆界面,第1张

<!DOCTYPE html><html lang="zh-CN"><head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>登录</title>

<link href="css/bootstrap.min.css" rel="stylesheet"></head><body><nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="./">jsp作业</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">

<li><a href="login.html">登录</a></li>

</ul>

</div>

</div></nav><div class="container">

<div class="row">

<div class="col-md-4">

</div>

<div class="col-md-4">

<form class="form-signin" target="submitFrame" method="post">

<h2 class="form-signin-heading">登录到jsp作业</h2>

<label for="inputEmail">Email</label>

<input type="email" id="inputEmail" class="form-control" placeholder="请输入Email" required autofocus><br>

<label for="inputPassword">密码</label>

<input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required>

<div class="checkbox">

<label>

<input type="checkbox" value="remember-me" checked="checked">记住密码</label>

</div>

<button type="submit" class="btn btn-primary" id="btn-login">登录</button>

<a href="reg.html" class="btn btn-default">注册</a>

</form>

<iframe style="display: none" name="submitFrame" src="about:blank"></iframe>

</div>

<div class="col-md-4">

</div>

</div>

<script src="js/jquery.min.js"></script></body></html>

上面给你的是asp的,这边给你个php的,你看下,不懂再问我

<?php

include("config.php")

session_start()

/*--------------------删除cookies记录,让cookies过期-----------------------------------*/

if($_GET["del"]=="cookies")

{

setcookie("usercookies", "", time()-3600)

setcookie("pwdcookies", "", time()-3600)

echo "<SCRIPT type=text/javascript>

var n = 5

var timer = setInterval(function() {

n--

document.getElementById('second').innerHTML = n

if (n == 0) {

clearInterval(timer)

window.location = 'login.php'

}

}, 1000)

</SCRIPT>删除成功<br><B class='chengse STYLE1' id=second>5</B>秒后回到首页"

exit()

}

/*------------------------如果判断已经有cookies存在,则进行自动登录 *** 作----------------------------------*/

if($_COOKIE["usercookies"]!="" and $_COOKIE["pwdcookies"]!="")

{

$username=$_POST["username"]

$userpassword=$_POST["userpassword"]

$sql=mysql_query("select * from user where username='$username' and userpassword='$userpassword'")

$rs=mysql_fetch_array($sql)

echo"自动跳转成功"

//exit()

}

/*----------------------------点击登录按钮后的动作act=login----------------------------------*/

if($_GET["act"]=="login")

{

/*------------------判断获取的验证码是否一致-------------------------*/

/*if(strtoupper($_SESSION["vcode"])!=strtoupper($_POST["Code"]))

{

echo("<script type='text/javascript'>alert('对不起,验证码错误!')location.href='javascript:onclick=history.go(-1)'</script>")

exit()

}*/

/*------------------------点击登录按钮后如果判断已经有cookies存在,则进行自动登录 *** 作----------------------------------*/

if($_COOKIE["usercookies"]!="" and $_COOKIE["pwdcookies"]!="")

{

$username=$_POST["username"]

$userpassword=$_POST["userpassword"]

$sql=mysql_query("select * from user where username='$username' and userpassword='$userpassword'")

$rs=mysql_fetch_array($sql)

if($_POST["username"]==$rs["username"] and $_POST["userpassword"]==$rs["userpassword"])

{

echo"<script type='text/javascript'>alert('存在cookies登录跳转成功!')location.href='javascript:onclick=history.go(-1)'</script>"

exit()

}

else

{

echo"<script type='text/javascript'>alert('存在cookies登录跳转失败!')location.href='javascript:onclick=history.go(-1)'</script>"

exit()

}

exit()

}

/*-------------------点击登录后判断cookies不存在则进行登录比较用户名密码------------------------------*/

$username=$_POST["username"]

$userpassword=md5($_POST["userpassword"])

$sql=mysql_query("select * from user where username='$username' and userpassword='$userpassword'")

if($rs=mysql_fetch_array($sql))

{

/*---------------------用户名密码判断正确,写入cookies动作,同时进行跳转------------------------------------*/

setcookie("usercookies", $_POST["username"], time()+3600*48)

setcookie("pwdcookies", md5($_POST["userpassword"]), time()+3600*24)

header('Location: http://www.baidu.com/')

exit()

}

else

{

/*-------------------判断用户名密码错误,d出错误提示---------------------------*/

echo "<script type='text/javascript'>alert('用户名或密码错误,请重新输入!')location.href='javascript:onclick=history.go(-1)'</script>"

exit()

}

}

/*

$user_IP = $_SERVER["REMOTE_ADDR"]//获取访问者IP

$file_name=date('Y-m-d').'.txt'//以当前的日期建立txt文件

$file=fopen($file_name,"a+")//如果存在该文件就打开,如果不存在就创建

fwrite($file,$user_IP.'--'.date('Y-m-d H:i:s')."\r\n")//将访问者IP及当前时刻写到文件最后,\r\n在文档最后换行

fclose($file)//关闭文件

*/

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>COOKIES判断是否自动登录</title>

</head>

<body>

<form action="?act=login" method="post">

<input name="username" type="text" id="username" value="<?php if($_COOKIE["usercookies"]!=""){echo $_COOKIE["usercookies"]}?>" />

<input name="userpassword" type="password" id="userpassword" value="<?php if($_COOKIE["pwdcookies"]!=""){echo $_COOKIE["pwdcookies"]}?>"/>

<!--<img src="yanzhengma_class.php" title="看不清楚?请点击刷新验证码" onClick="this.src='yanzhengma_class.php?t='+(new Date().getTime())" height="20px"><input name="Code" type="text" id="Code" value="" />-->

<input name="" type="submit" />

</form>

<a href="?del=cookies">删除cookies</a>

</body>

</html>

<script>

function check(){

var name=document.getElementById("name").value

var pass=document.getElementById("pass").value

if(name=="a" &&pass=="a"){

alert("登入成功")

window.document.f.action="b.html"

window.document.f.submit()

}else{

alert("用户名或密码错误")

}

}

</script>

<form name="f" action="">

用户名:<INPUT TYPE="text" NAME="" id="name"><br>

密码:<INPUT TYPE="password" NAME="" id="pass"><br>

<INPUT TYPE="button" value="登入" onclick="check()"><INPUT TYPE="reset" value="重置">

</form>

不知道能不能符合你的要求 若有不足的地方请谅解和指导 呵呵


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7299565.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存