html5登錄界面源碼
A. html網頁設計:一個簡單的登錄界面代碼!
大致形式應該是這樣的:
<!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>
<title>3</title>
</head>
<body>
<div align="center">
<form action="" name="myform">
<table>
<tr>
<td>用戶名:</td>
<td><input type="text" id="user" /></td>
</tr>
<tr>
<td>密 碼:</td>
<td><input type="text" id="password" /></td>
</tr>
<tr>
<td>驗證碼:</td>
<td align="left"><input type="text" size="5" id="code" /></td>
</tr>
</table>
</form>
<table>
<tr>
<td>
<input type="submit" value="提交" onclick=myfun_submit() />
</td>
<td>
<input type="submit" value="重置" onclick=myfun_reset() />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myfun_submit(){
var user_val = document.getElementById("user").value;
var password_val = document.getElementById("password").value;
if(user_val==""){
alert("用戶名不能為空!!");
}else if(password_val==""){
alert("密碼不能為空!!!");
}
}
function myfun_reset(){
document.getElementById("user").value = "";
document.getElementById("password").value = "";
document.getElementById("code").value = "";
}
</script>
</body>
</html>
B. 注冊/登陸頁面HTML代碼該怎麼寫
以下為個人原創教學例子,任何人引用需註明出自網路知道用戶am7972,樓主可供參考
該例子涵蓋了文本框、密碼框、下拉菜單、單選框、復選框及文本區的使用
同時在數據的使用方面涵蓋了文本型、數值型、日期型、布爾型的使用
也涵蓋了在會員信息入資料庫前,進行嚴格的數據檢查
不足處,JS驗證還不是太完善,不過有服務端認證足夠了
<title>會員注冊</title>
<script type="text/javascript">
<!--function CheckForm()
{
if(document.userinfo.username.value == "")
{ alert("請輸入姓名,姓名不能為空!");
document.userinfo.username.focus();
return false;
}
if(document.userinfo.username.value.length > 10)
{
alert("輸入的姓名長度最多為10個字元!");
document.userinfo.username.focus();
return false;
}
}
//--></script>
</head>
<body>
<table border="1" width="53%" bordercolorlight="#000000" cellspacing="0" id="table1" height="358" bordercolor="#000000" bordercolordark="#FFFFFF" cellpadding="0">
<form method="POST" action="bb.asp" name="userinfo" onsubmit="return CheckForm();">
<tr><td colspan="2" height="37"> <p align="center">會員注員</td> </tr>
<tr> <td width="37%" align="right">姓名:</td> <td width="61%"> <input type="text" name="username" value="libin" size="13"> </td> </tr>
<tr> <td width="37%" align="right">密碼:</td> <td width="61%"> <input type="password" name="userPassword" size="20" value="123"></td> </tr>
<tr> <td width="37%" align="right">性別:</td> <td width="61%"><input type="radio" value="True" checked name="Sex">男 <input type="radio" name="Sex" value="False">女</td> </tr>
<tr> <td width="37%" align="right">生日:</td> <td width="61%"> <input type="text" name="userSR" size="11" value="1985-03-12"></td> </tr>
<tr> <td width="37%" align="right">年齡:</td> <td width="61%"><input type="text" name="userNL" size="9" value="13"></td> </tr>
<tr> <td width="37%" align="right">愛好:</td> <td width="61%"> <input type="checkbox" name="ah" value="sw">上網 <input type="checkbox" name="ah" value="ds" checked>讀書 <input type="checkbox" name="ah" value="ty">體育</td> </tr>
<tr> <td width="37%" align="right">上網方式:</td> <td width="61%">
<select size="1" name="swfs"> <option selected value="bhsw">撥號上網</option> <option value="wxsw">無線上網</option> <option value="gxsw">光纖上網</option> </select>
</td> </tr>
<tr> <td width="37%" align="right">個人簡介:</td> <td width="61%"><textarea rows="9" name="userGrjs" cols="34"></textarea></td> </tr> <tr> <td colspan="2" height="38"> <p align="center"><input type="submit" value="提交" name="B1"> <input type="reset" value="重置" name="B2"></td>
</tr>
</form>
</table>
====bb.asp的會員注冊非法數據監測====
<%
username = Request("username")
userPassword = Request("userPassword")
Sex = Request("Sex")
userSR = Request("userSR")
userNL = Request("userNL")
ah = Request("ah")
swfs = Request("swfs")
userGrjs = Request("userGrjs")
'判斷數據合法性,絕對不能讓非法數據進入系統
'判斷姓名username合不合法,是否包含非法數據
username = Trim(username) '例如:" 張 三 "經過處理之後變成"張 三"
If username ="" Then
Response.write "姓名不能為空"
Response.End
End If
If Len(username)>10 Then
Response.write "姓名字數不能超過10個字" 'Len("Z")=1 Len("國")=2
Response.End
End If
For i = 1 To Len(username)
q = Mid(username,i,1)
If InStr("!@#$%^&*()_-+|<>?/"",.",q)>0 Then
Response.write "姓名不能包含特殊符號!@#$%^&*()_-+|<>?/"",."
Response.End
End If
Next
'判斷密碼合不合法,是否包含非法數據userPassword = Trim(userPassword)If userPassword ="" Then Response.write "密碼不能為空" Response.EndEnd If
If Len(userPassword)>20 Then
Response.write "密碼字數不能超過20個字"
Response.End
End If
'判斷密碼合不合法,是否包含非法數據
Sex = Trim(Sex)
If Sex = "" Then
Response.write "性別不能為空"
Response.End
End If
If Sex <> "True" And Sex <> "False" Then
Response.write "性別不能為不男不女"
Response.End
End If
'判斷生日合不合法,是否包含非法數據
userSR = Trim(userSR)
If userSR ="" Then
Response.write "生日不能為空"
Response.End
End If
If Len(userSR)<8 Or Len(userSR)>10 Then '例如:2012-6-3 2012-11-23
Response.write "你輸入的生日字數不對,應為2012-6-3或2012-11-23格式"
Response.End
End If
If IsDate(userSR)=False Then
Response.write "你輸入的生日格式不能轉化為日期,請核實"
Response.End
End If
If DateDiff("yyyy",userSR,Date())<1 Or DateDiff("yyyy",userSR,Date())>200 Then
Response.write "根據你輸入的生日你可能小於1歲或已經超過200歲了,請核查重新輸入"
Response.End
End If
'判斷年齡合不合法,是否包含非法數據userNL = Trim(userNL)If userNL ="" Then
Response.write "年齡不能為空"
Response.End
End If
If IsNumeric(userNL)=False Then
Response.write "你輸入的年齡不能轉化為數值,請核查"
Response.End
End If
userNL = CInt(userNL)
If userNL<0 Or userNL>200 Then
Response.write "你輸入的年齡不能小於0歲或者大於200歲,請核查"
Response.End
End If
'判斷愛好合不合法,是否包含非法數據ah = Trim(ah) '選擇多個愛好則系統會用,分開 //測試
ah = Replace(ah," ","")
arrAh = Split(ah,",")
For i = LBound(arrAh) To UBound(arrAh)
If arrAh(i)<>"sw" And arrAh(i)<>"ds" And arrAh(i)<>"ty" Then
Response.write i & "你選擇的愛好有問題,請核查" & arrAh(i)
Response.End
End If
Next
'判斷上網方式合不合法,是否包含非法數據swfs = Trim(swfs)If swfs = "" Then
Response.write "上網方式不能為空"
Response.End
End If
If swfs<>"bhsw" And swfs<>"wxsw" And swfs<>"gxsw" Then
Response.write "你選擇的上網方式有問題,請核查"
Response.End
End If
'判斷個人簡介是否為空,是否超出1000個字
userGrjs = Trim(userGrjs)
If userGrjs = "" Then
Response.write "個人簡介不能為空"
Response.End
End If
If Len(userGrjs) > 1000 Then
Response.write "個人簡介不能超過1000個字"
Response.End
End If
Response.write "數據合法性檢測通過"
%>
====登陸的HTML代碼可相信樓主參照會員注冊代碼應該沒問題了====
C. 用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>
D. html登陸界面代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用戶登錄</title>
<script language="javascript" type="text/javascript" >
function x(){
if((a.name.value=="admin")&&(a.password.value=="admin")){
session.setAttribute("name",name);
response.sendRedirect("index.html");
}else{
alert('登錄失敗,請輸入正確的用戶名和密碼!');
a.name.focus();
return false;
}
}
</script>
<style type="text/css">
.imgsub{
height: 33px;
width: 154px;
margin-top: 10px;
margin-left: 50px;
background:transparent;
}
input[type="text"]
{
width:150px;
margin-top:10px;
font-family: Verdana, Arial;
background:transparent;
}
input[type="password"]
{
width:150px;
margin-top:10px;
font-family: Verdana, Arial;
background:transparent;
}
input[type="submit"]
{
width:60px;
margin-left:35px;
display:block;
}
body {background-image: url(qui.jpg);}
</style>
</head>
<body>
<center>
<h2>學生信息管理系統</h2>
</center>
<center><br>
<form name="a" method="post" action="index.html" onsubmit="return x()">
賬號:<input name="name" value="" type="text" size="16" ><br>
密碼:<input name="password" value="" type="password" size="17" > <br>
<br> <input type="submit" class="imgsub" value="登錄">
</form>
</center>
</body>
</html>
用戶名和密碼都是admin
E. web中a登錄界面輸入用戶名和密碼後,如何傳遞到b頁面上,在b頁面上使用的查詢出來的是用戶的信息。
你可以在你的from里添加一個隱藏域,傳遞參數就可以了啊
F. html5 實現密碼登錄跳轉頁面代碼要怎麼寫
只是做靜態頁面嗎? 用js判斷 如果用戶名和密碼都不為空 window.location.href="目標頁面" 就可以跳轉,不懂再追問
G. 求html登陸界面詳細代碼 要可以登陸,不用資料庫保存,只要驗證賬號密碼正確,就連接到另外一個.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>
不知道能不能符合你的要求 若有不足的地方請諒解和指導 呵呵