简单的html登录页面
1. 如何用html5+ css div制作一个简单的登录界面
1、按照正常来的思路,布局就是自div布局,写一个固定下来,作为模板,在每次获取数据的时候使用功能代码绑定数据到布局上面,自动生成页面内容就可以了。
拆分出单个模板来,很明显每项都是一样的
就这个样式写div+css不会吗?
两层div 的嵌套,里面布局排文本标签,image标签就可以了,绑定id填数据,或者遍历填数据。
简单布局是一种,再就是
这种
2. html简单登陆页面,当用户名输入W,密码输入123456是跳转页面到0.html可以实现吗怎么实现
1、打开开发工具ecplipse,点击ecplipse导航栏上的【File】-->New--->Maven Project,来新建个WEB工程。
3. javascript html 设计一个登录界面
注册页面代码:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>注册</title>
</head>
<body>
<formmethod="post"onsubmit="returnfalse"id="form">
<inputtype="text"name="username"placeholder="用户名"><br>
<inputtype="password"name="password"placeholder="密码"><br>
<inputtype="password"name="rePassword"placeholder="再次输入密码"><br>
<inputtype="submit"onclick="register_user()"value="注册"><br>
</form>
<ahref="login.html">去登录</a><script>
varlocalDB=openDatabase('localDB','1.0','TestDB',2*1024*1024);
localDB.transaction(function(ts){
ts.executeSql('CREATETABLEIFNOTEXISTSuser(username,password)')
});
functionregister_user(){
varusername=document.getElementsByTagName("input")[0].value;
varpassword=document.getElementsByTagName("input")[1].value;
varrePassword=document.getElementsByTagName("input")[2].value;
if(password!=rePassword)
{
alert("两次输入的密码不同,请重新输入");
}else
{
localDB.transaction(function(ts){
ts.executeSql("INSERTINTOuser(username,password)VALUES('"+username+"','"+password+"');");
alert("注册成功");
});
}
}
</script>
</body>
</html>
登录页面代码:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>登录</title>
</head>
<body>
<formonsubmit="returnfalse"method="post">
<inputtype="text"placeholder="用户名"><br>
<inputtype="password"placeholder="密码"><br>
<inputtype="submit"value="登录"onclick="login()"><br>
</form>
<ahref="register.html">去注册</a>
<script>
varlocalDB=openDatabase('localDB','1.0','TestDB',2*1024*1024);
localDB.transaction(function(ts){
ts.executeSql("SELECT*FROMuser",[],function(tx,results){
varlen=results.rows.length;
if(len<=0)
{
localDB.transaction(function(ts){
ts.executeSql('CREATETABLEIFNOTEXISTSuser(username,password)')
});
}
});
});
functionlogin(){
varusername=document.getElementsByTagName("input")[0].value;
varpassword=document.getElementsByTagName("input")[1].value;
localDB.transaction(function(ts){
ts.executeSql("SELECT*FROMuserWHEREusername='"+username+"';",[],function(ts,res){
if(res.rows.length<=0)
{
alert("登录失败,用户未注册");
}elseif(password==res.rows[0].password)
{
alert("登录成功,三秒后跳转到网络");
setInterval(function(){
location.href="https://www..com";
},3000);
}else
{
alert("登录失败,密码错误");
}
});
})
}
</script>
</body>
</html>
以上代码使用了WEB SQL,还请选择合适的浏览器查看。
4. 用html代码编写一个简单的登陆界面
<!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>
5. HTML实现简单的登陆
最简单的方法也得是在后台连接数据库进行用户信息的判断,这是登录和注册的基本流程!设计出登录和注册的页面,做好你的前台验证工作,如非空,格式等验证;然后添加按钮方法,在后台进行数据库连接,然后判断用户的用户名是否存在,如果存在再判断密码是否正确!