登錄注冊(cè)頁(yè)面html代碼（登錄注冊(cè)界面html）
本篇文章給大家談?wù)劦卿涀?cè)頁(yè)面html代碼，以及登錄注冊(cè)界面html對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
- 1、用戶登錄html代碼有哪些？
- 2、注冊(cè)/登陸頁(yè)面HTML代碼該怎么寫？
- 3、這個(gè)首頁(yè)的html5網(wǎng)站設(shè)計(jì)代碼（尤其是頭部那登錄注冊(cè)代碼怎么寫）
- 4、登錄頁(yè)面html代碼
- 5、用html代碼編寫一個(gè)簡(jiǎn)單的登陸界面
用戶登錄html代碼有哪些？
html
head
title登陸頁(yè)面/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
****************************************************
驗(yàn)證頁(yè)面jsp代碼如下：
html
head
title用戶驗(yàn)證頁(yè)面/title
/head
h1 登陸范例-登陸成功 /h1
/html
不知道你用啥樣的前臺(tái) 是jsp還是asp.net或者是php
注冊(cè)/登陸頁(yè)面HTML代碼該怎么寫？
以下為個(gè)人原創(chuàng)教學(xué)例子，任何人引用需注明出自百度知道用戶am7972,樓主可供參考
該例子涵蓋了文本框、密碼框、下拉菜單、單選框、復(fù)選框及文本區(qū)的使用
同時(shí)在數(shù)據(jù)的使用方面涵蓋了文本型、數(shù)值型、日期型、布爾型的使用
也涵蓋了在會(huì)員信息入數(shù)據(jù)庫(kù)前，進(jìn)行嚴(yán)格的數(shù)據(jù)檢查
不足處，JS驗(yàn)證還不是太完善，不過(guò)有服務(wù)端認(rèn)證足夠了
title會(huì)員注冊(cè)/title
script type="text/javascript"
!--function CheckForm()
{
if(document.userinfo.username.value == "")
{ alert("請(qǐng)輸入姓名,姓名不能為空！");
document.userinfo.username.focus();
return false;
}
if(document.userinfo.username.value.length 10)
{
alert("輸入的姓名長(zhǎng)度最多為10個(gè)字符！");
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();"
trtd colspan="2" height="37" p align="center"會(huì)員注員/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"上網(wǎng) input type="checkbox" name="ah" value="ds" checked讀書 input type="checkbox" name="ah" value="ty"體育/td /tr
tr td width="37%" align="right"上網(wǎng)方式：/td td width="61%"
select size="1" name="swfs" option selected value="bhsw"撥號(hào)上網(wǎng)/option option value="wxsw"無(wú)線上網(wǎng)/option option value="gxsw"光纖上網(wǎng)/option /select
/td /tr
tr td width="37%" align="right"個(gè)人簡(jiǎn)介：/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的會(huì)員注冊(cè)非法數(shù)據(jù)監(jiān)測(cè)====
%
username = Request("username")
userPassword = Request("userPassword")
Sex = Request("Sex")
userSR = Request("userSR")
userNL = Request("userNL")
ah = Request("ah")
swfs = Request("swfs")
userGrjs = Request("userGrjs")
'判斷數(shù)據(jù)合法性，絕對(duì)不能讓非法數(shù)據(jù)進(jìn)入系統(tǒng)
'判斷姓名username合不合法，是否包含非法數(shù)據(jù)
username = Trim(username) '例如：" 張 三 "經(jīng)過(guò)處理之后變成"張 三"
If username ="" Then
Response.write "姓名不能為空"
Response.End
End If
If Len(username)10 Then
Response.write "姓名字?jǐn)?shù)不能超過(guò)10個(gè)字" 'Len("Z")=1 Len("國(guó)")=2
Response.End
End If
For i = 1 To Len(username)
q = Mid(username,i,1)
If InStr("!@#$%^*()_-+|?/"",.",q)0 Then
Response.write "姓名不能包含特殊符號(hào)!@#$%^*()_-+|?/"",."
Response.End
End If
Next
'判斷密碼合不合法，是否包含非法數(shù)據(jù)userPassword = Trim(userPassword)If userPassword ="" Then Response.write "密碼不能為空" Response.EndEnd If
If Len(userPassword)20 Then
Response.write "密碼字?jǐn)?shù)不能超過(guò)20個(gè)字"
Response.End
End If
'判斷密碼合不合法，是否包含非法數(shù)據(jù)
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
'判斷生日合不合法，是否包含非法數(shù)據(jù)
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 "你輸入的生日字?jǐn)?shù)不對(duì)，應(yīng)為2012-6-3或2012-11-23格式"
Response.End
End If
If IsDate(userSR)=False Then
Response.write "你輸入的生日格式不能轉(zhuǎn)化為日期，請(qǐng)核實(shí)"
Response.End
End If
If DateDiff("yyyy",userSR,Date())1 Or DateDiff("yyyy",userSR,Date())200 Then
Response.write "根據(jù)你輸入的生日你可能小于1歲或已經(jīng)超過(guò)200歲了，請(qǐng)核查重新輸入"
Response.End
End If
'判斷年齡合不合法，是否包含非法數(shù)據(jù)userNL = Trim(userNL)If userNL ="" Then
Response.write "年齡不能為空"
Response.End
End If
If IsNumeric(userNL)=False Then
Response.write "你輸入的年齡不能轉(zhuǎn)化為數(shù)值，請(qǐng)核查"
Response.End
End If
userNL = CInt(userNL)
If userNL0 Or userNL200 Then
Response.write "你輸入的年齡不能小于0歲或者大于200歲，請(qǐng)核查"
Response.End
End If
'判斷愛好合不合法，是否包含非法數(shù)據(jù)ah = Trim(ah) '選擇多個(gè)愛好則系統(tǒng)會(huì)用，分開 //測(cè)試
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 "你選擇的愛好有問(wèn)題，請(qǐng)核查" arrAh(i)
Response.End
End If
Next
'判斷上網(wǎng)方式合不合法，是否包含非法數(shù)據(jù)swfs = Trim(swfs)If swfs = "" Then
Response.write "上網(wǎng)方式不能為空"
Response.End
End If
If swfs"bhsw" And swfs"wxsw" And swfs"gxsw" Then
Response.write "你選擇的上網(wǎng)方式有問(wèn)題，請(qǐng)核查"
Response.End
End If
'判斷個(gè)人簡(jiǎn)介是否為空，是否超出1000個(gè)字
userGrjs = Trim(userGrjs)
If userGrjs = "" Then
Response.write "個(gè)人簡(jiǎn)介不能為空"
Response.End
End If
If Len(userGrjs) 1000 Then
Response.write "個(gè)人簡(jiǎn)介不能超過(guò)1000個(gè)字"
Response.End
End If
Response.write "數(shù)據(jù)合法性檢測(cè)通過(guò)"
%
====登陸的HTML代碼可相信樓主參照會(huì)員注冊(cè)代碼應(yīng)該沒(méi)問(wèn)題了====
這個(gè)首頁(yè)的html5網(wǎng)站設(shè)計(jì)代碼（尤其是頭部那登錄注冊(cè)代碼怎么寫）
首先先說(shuō)一下HTML5的代碼只是在原有的XHTML基礎(chǔ)上增加了一些新的標(biāo)簽（還有一些新的特性，例如數(shù)據(jù)庫(kù)和緩存等特性）
以下為此頁(yè)面的結(jié)構(gòu)代碼：
!doctype?html
html
head
meta?charset="utf-8"
meta?name="revised"?content=""?/
meta?name="keywords"?content=""?/
meta?name="description"?content=""?/
meta?name="author"?content=""??/
meta?name="robots"?content="all"?/
title頁(yè)面標(biāo)題/title
/head
body
header
div/div!--登陸注冊(cè)區(qū)域--
/header!--頭部[html5新標(biāo)簽]--
nav/nav!--導(dǎo)航[html5新標(biāo)簽]--
div/div!--banner--
div/div!--左上--
div/div!--右上--
div/div!--左下--
div/div!--右下--
footer/footer!--底部[html5新標(biāo)簽]--
/body
/html
注：以上為頁(yè)面的大的框架，相對(duì)用HTML5新的標(biāo)簽更合理的，全用上了新的帶有語(yǔ)義標(biāo)簽。
另外多說(shuō)一下，[注冊(cè)登陸]這塊在html5的新標(biāo)簽里面沒(méi)有很合適的語(yǔ)義化的標(biāo)簽，所以依然采用原有的div標(biāo)簽為最合理。html5只是在原有的技術(shù)的基礎(chǔ)上更細(xì)化了，咱在制作代碼的過(guò)程中沒(méi)必要必須用HTML5的代碼，主要看是否合理，合理的為較合適的。
多說(shuō)的：不管用XHTML還是HTML5寫代碼，結(jié)構(gòu)（HTML5）與樣式（CSS）盡量要分離！
希望能幫到你！
登錄頁(yè)面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(/'會(huì)員名無(wú)效'/,'');
????document.getElementById("passMsg").innerHTML='會(huì)員名無(wú)效';
document.getElementsByName("sname")[0].select();
return?false;
}
}
else
{
document.getElementById("userMsg").innerHTML.replace(/'是否忘記輸入會(huì)員名？'/,'');
?document.getElementById("userMsg").innerHTML='是否忘記輸入會(huì)員名？';
document.getElementsByName("sname")[0].focus();
return?false
}
if(sname!=="zhangsan"){???//驗(yàn)證會(huì)員名必須為張三
document.getElementById("userMsg").innerHTML.replace(/'是否輸入的會(huì)員名有錯(cuò)？'/,'');
??document.getElementById("userMsg").innerHTML='是否輸入的會(huì)員名有錯(cuò)？';
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"?+?"請(qǐng)輸入密碼'/,'');
????document.getElementById("passMsg").innerHTML='未輸入密碼?\n"?+?"請(qǐng)輸入密碼';
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?個(gè)字符。\n'/,'');
????document.getElementById("passMsg").innerHTML='密碼必須多于或等于?6?個(gè)字符。\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"){????//驗(yàn)證密碼必須為123456
??document.getElementById("passMsg").innerHTML.replace(/'密碼錯(cuò)誤，請(qǐng)重新輸入！'/,'');
????document.getElementById("passMsg").innerHTML='密碼錯(cuò)誤，請(qǐng)重新輸入！';
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="會(huì)員登錄"/h1
li?class="login_list"label會(huì)員名：/labelinput?type="text"?name="login"（可包含?a-z、0-9?和下劃線）/li
li?class="login_list"label密nbsp;nbsp;nbsp;碼：/labelinput?type="text"?name="pwd"（至少包含?6?個(gè)字符）/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;香港會(huì)員（繁體中文用戶）由此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="注冊(cè)會(huì)員"/h1
ul?class="aside?f_l"
li?class="regpic"span便宜有好貨！/span超過(guò)7000萬(wàn)件商品任您選。/li
? li?class="regpic?regpic2"span買賣更安全！/span交易超安全。/li
li?class="regpic?regpic3"span免費(fèi)開網(wǎng)店！/span輕松賺錢交友。/li
li?class="regpic?regpic4"span超人氣社區(qū)！/span彩活動(dòng)每一天/li
li?class="a_c"a?href="#"img?src="images/registernow.gif"?alt="現(xiàn)在就注冊(cè)"/a/li
ul?class="reged"
li?class="regpic?regpic5"您已經(jīng)是會(huì)員？a?href="#"由此登入/a/li
li?class="regpic?regpic6"繁體中文用戶由此a?href="#"注冊(cè)/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"復(fù)制/span/div/body/html
用html代碼編寫一個(gè)簡(jiǎn)單的登陸界面
!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作業(yè)/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"登錄到j(luò)sp作業(yè)/h2
label for="inputEmail"Email/label
input type="email" id="inputEmail" class="form-control" placeholder="請(qǐng)輸入Email" required autofocusbr
label for="inputPassword"密碼/label
input type="password" id="inputPassword" class="form-control" placeholder="請(qǐng)輸入密碼" 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"注冊(cè)/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
關(guān)于登錄注冊(cè)頁(yè)面html代碼和登錄注冊(cè)界面html的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
