html简单登录页面代码(html登陆界面代码)
用html代码编写一个简单的登陆界面
!DOCTYPE htmlhtml 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"/headbodynav 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"
lia href="login.html"登录/a/li
/ul
/div
/div/navdiv 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 autofocusbr
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
HTML网页设计：一个简单的登录界面可以连接到数据库记录的代码
如下参考：
1.首先，在您的计算机桌面上创建一个新文件夹，然后在该文件夹中创建一个新的文本文档。
2.然后用记事本双击打开文本文档，如下图所示，然后编写一个简单的HTML代码。
3.点击“另存为”功能选项，显示默认的“另存为”代码为ANSI。
4.我们将把编码和文件名更改回图中所示的图像并保存它。
5.然后回到新创建的文件夹，找到一个额外的HTML文件。
6.最后，使用浏览器打开HTML文件。结果如图所示。
html网页设计：一个简单的登录界面代码！
!doctype html
html
head
meta charset="utf-8"
link href="main.css" type="text/css" rel="stylesheet"
title登陆界面/title
/head
body
div class="login_ico"
img src="images/login_ico.png"
/div
div class="login_putin"
ul
liinput type="text" /li
liinput type="password" /li
/ul
/div
div class="login_btn"
input type="submit" value="登陆"
/div
/body
/html
样式 ：
*{
margin:0;
padding:0;}
li{
list-style-type:none;
margin:0;
padding:0;}
a{
text-decoration:none;
color:#000;}
/*---------------------按钮-----------------------------*/
.login_putin ul li input{
margin: 0;
width:70%;
padding: 1em 2em 1em 5.4em;
-webkit-border-radius:.3em;
-moz-border-radius: .3em;
border: 1px solid #999;
}
.login_btn{
width:300px;
margin:40px auto 0 auto;
}
.login_btn input{
width:100%;
margin:0;
padding:.5em 0;
-webkit-border-radius:.3em;
-moz-border-radius: .3em;
border:#1263be solid 1px;
background:#1b85fd;
color:#FFF;
font-size:17px;
font-weight:bolder;
letter-spacing:1em;
}
.login_btn input:hover{
background:#1263be;
}
登录页面html代码
html?xmlns=""head
?meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"
?title贵美商城/title
?link?rel="stylesheet"?type="text/css"?href="css/global.css"
?link?rel="stylesheet"?type="text/css"?href="css/layout.css"
script?type="text/javascript"
//?snameCheck()??passCheck()
function?validateform(){
if(snameCheck()??passCheck())?
???return?true;
?else
???return?false;
}
//?Screen?Name?Validation
function?snameCheck(){
var?sname?=?document.getElementsByName("sname")[0].value;
var?illegalChars?=?/\W/;
if(sname.length?!=?0){
if(illegalChars.test(sname)){
document.getElementById("passMsg").innerHTML.replace(/'会员名无效'/,'');
????document.getElementById("passMsg").innerHTML='会员名无效';
document.getElementsByName("sname")[0].select();
return?false;
}
}
else
{
document.getElementById("userMsg").innerHTML.replace(/'是否忘记输入会员名？'/,'');
?document.getElementById("userMsg").innerHTML='是否忘记输入会员名？';
document.getElementsByName("sname")[0].focus();
return?false
}
if(sname!=="zhangsan"){???//验证会员名必须为张三
document.getElementById("userMsg").innerHTML.replace(/'是否输入的会员名有错？'/,'');
??document.getElementById("userMsg").innerHTML='是否输入的会员名有错？';
document.getElementsByName("sname")[0].focus();
return?false;
}
return?true;
}
function?passCheck(){
var?userpass?=?document.getElementsByName("pass")[0].value;
var?illegalChars?=?/[\W_]/;//?allow?only?charactors?and?numbers
//?Check?if?Password?field?is?blank.
if(userpass?==?""){
document.getElementById("passMsg").innerHTML.replace(/'未输入密码?\n"?+?"请输入密码'/,'');
????document.getElementById("passMsg").innerHTML='未输入密码?\n"?+?"请输入密码';
document.getElementsByName("pass")[0].focus();
return?false;
}
//?Check?if?password?length?is?less?than?6?charactor.
if(userpass.length??6){
document.getElementById("passMsg").innerHTML.replace(/'密码必须多于或等于?6?个字符。\n'/,'');
????document.getElementById("passMsg").innerHTML='密码必须多于或等于?6?个字符。\n';
document.getElementsByName("pass")[0].focus();
return?false;
}
//check?if?password?contain?illigal?charactors.
else?if(illegalChars.test(userpass)){
document.getElementById("passMsg").innerHTML.replace(/'密码包含非法字符'/,'');
????document.getElementById("passMsg").innerHTML='密码包含非法字符';
document.getElementsByName("pass")[0].select();
return?false;
}
if(userpass!=="123456"){????//验证密码必须为123456
??document.getElementById("passMsg").innerHTML.replace(/'密码错误，请重新输入！'/,'');
????document.getElementById("passMsg").innerHTML='密码错误，请重新输入！';
document.getElementsByName("pass")[0].focus();
return?false;
}
return?true;
}
/script?
script?type="text/javascript"?charset="utf-8"?src=""/script/head
body
div?id="container"
iframe?id="header"?src="header.htm"?width="980"?height="136"?frameborder="0"?scrolling="no"/iframe
form?action="login_success"?method="post"
div?class="login"
ul?class="form?f_l"
h1img?src="images/logintitle.gif"?alt="会员登录"/h1
li?class="login_list"label会员名：/labelinput?type="text"?name="login"（可包含?a-z、0-9?和下划线）/li
li?class="login_list"label密nbsp;nbsp;nbsp;码：/labelinput?type="text"?name="pwd"（至少包含?6?个字符）/li
li?class="a_c"img?src="images/login.gif"?alt="登录"/li
li?class="desc"δnbsp;nbsp;a?href="#"什么是安全登录/a。/li
li?class="desc"δnbsp;nbsp;香港会员（繁体中文用户）由此a?href="#"登入/a/li
li?class="desc"δnbsp;nbsp;a?href="#"密码安全贴士/a。/li
li?class="desc"δnbsp;nbsp;防止病毒或者木马窃取您的账户信息，a?href="#"在线检查/a您的电脑是否安全。/li
/ul
h1img?src="images/register.gif"?alt="注册会员"/h1
ul?class="aside?f_l"
li?class="regpic"span便宜有好货！/span超过7000万件商品任您选。/li
? li?class="regpic?regpic2"span买卖更安全！/span交易超安全。/li
li?class="regpic?regpic3"span免费开网店！/span轻松赚钱交友。/li
li?class="regpic?regpic4"span超人气社区！/span彩活动每一天/li
li?class="a_c"a?href="#"img?src="images/registernow.gif"?alt="现在就注册"/a/li
ul?class="reged"
li?class="regpic?regpic5"您已经是会员？a?href="#"由此登入/a/li
li?class="regpic?regpic6"繁体中文用户由此a?href="#"注册/a/li
/ul
/ul
/div
/form
iframe?id="footer"?src="footer.htm"?width="980"?height="136"?frameborder="0"?scrolling="no"/iframe
/div?!--container?end--
div?class="_bd_ext_tip"?style="visibility:?hidden;"span?class="_bd_ext_search"百度一下/spanspan?class="_bd_ext_open"打开链接/spanspan?class="_bd_ext_copy"复制/span/div/body/html
用户登录html代码有哪些？
html
head
title登陆页面/title
/head
form action="login_conf.jsp" method="post"
用户登陆
用户名：input type="text" name="uname"
密码： input type="password" name="upassword"
input type="submit" value="提交"
input type="reset" value="重置"
/form
/body
/html
****************************************************
验证页面jsp代码如下：
html
head
title用户验证页面/title
/head
h1 登陆范例-登陆成功 /h1
/html
不知道你用啥样的前台 是jsp还是asp.net或者是php