HTML5寫注冊(cè)頁面

你可以考慮使用bootstrap框架，html5輸入提示可以使用placeholder屬性。

網(wǎng)站設(shè)計(jì)制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺(tái)管理系統(tǒng)；成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營(yíng)了十載的成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司。

這個(gè)首頁的html5網(wǎng)站設(shè)計(jì)代碼（尤其是頭部那登錄注冊(cè)代碼怎么寫）

首先先說一下HTML5的代碼只是在原有的XHTML基礎(chǔ)上增加了一些新的標(biāo)簽（還有一些新的特性，例如數(shù)據(jù)庫和緩存等特性）

以下為此頁面的結(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頁面標(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

注：以上為頁面的大的框架，相對(duì)用HTML5新的標(biāo)簽更合理的，全用上了新的帶有語義標(biāo)簽。

另外多說一下，[注冊(cè)登陸]這塊在html5的新標(biāo)簽里面沒有很合適的語義化的標(biāo)簽，所以依然采用原有的div標(biāo)簽為最合理。html5只是在原有的技術(shù)的基礎(chǔ)上更細(xì)化了，咱在制作代碼的過程中沒必要必須用HTML5的代碼，主要看是否合理，合理的為較合適的。

多說的：不管用XHTML還是HTML5寫代碼，結(jié)構(gòu)（HTML5）與樣式（CSS）盡量要分離！

希望能幫到你！

HTML5網(wǎng)頁前端設(shè)計(jì)中如下圖表單的代碼怎么寫？

下面是表單代碼，你直接再加屬性就可以了，表單用 table 寫比較簡(jiǎn)單，div 太麻煩了；

html xmlns=" "

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title黑板/title

/head

body

div style="width:500px;"

h1 style="width:500px;height:50px;color:#2A8DF0;border-bottom:#2A8DF0 solid 3px; text-align:center;"用戶注冊(cè)頁面/h1

table cellpadding="0" cellspacing="10" style="margin:0 auto;"

tr

td align="right" valign="top"div用戶名：/div/td

tdinput style='width:250px' value='請(qǐng)輸入用戶名' //td

/tr

tr

td align="right" valign="top"div密 碼：/div/td

tdinput style='width:250px' value='請(qǐng)輸入密碼' //td

/tr

tr

td align="right" valign="top"div確 認(rèn)：/div/td

tdinput style='width:250px' value='請(qǐng)?jiān)俅屋斎朊艽a' //td

/tr

tr

td align="right" valign="top"div姓 名：/div/td

tdinput style='width:250px' value='請(qǐng)輸入真實(shí)姓名' //td

/tr

tr

td align="right" valign="top"div郵 箱：/div/td

tdinput style='width:250px' value='請(qǐng)輸入電子郵箱' //td

/tr

/table

div align="center"input style="width:100px;height:30px;text-align:center;line-height:30px;background:#2289F0;border:#2289F0;color:white;font-weight:bold;font-size:16px;" type="submit" value="提交注冊(cè)" //div

/div

/body

/html

html5寫這個(gè)注冊(cè)頁面怎么寫啊？

!DOCTYPE?html

html

head

meta?charset="utf-8"?/

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

titleBootstrap?4/title

link?rel="stylesheet"?href=""

integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"?crossorigin="anonymous"

link?rel="stylesheet"?href="bootstrap-colorpicker/css/bootstrap-colorpicker.css"

link?rel="stylesheet"?href="bootstrap-datepicker/css/bootstrap-datetimepicker.min.css"

style?type="text/css"

.main-box?{

width:?640px;

margin:?40px?auto;

}

/style

/head

body

div?class="main-box"

form

div?class="form-group?row"

label?for="name"?class="col-sm-2?col-form-label"用戶名/label

div?class="col-sm-10"

input?type="text"?class="form-control"?id="name"?placeholder="請(qǐng)輸入用戶名"

/div

/div

div?class="form-group?row"

label?for="pwd"?class="col-sm-2?col-form-label"密碼/label

div?class="col-sm-10"

input?type="password"?class="form-control"?id="pwd"?placeholder="請(qǐng)輸入密碼"

/div

/div

div?class="form-group?row"

label?for="pwd2"?class="col-sm-2?col-form-label"確認(rèn)密碼/label

div?class="col-sm-10"

input?type="password"?class="form-control"?id="pwd2"?placeholder="請(qǐng)輸入確認(rèn)密碼"

/div

/div

div?class="form-group?row"

label?for="area"?class="col-sm-2?col-form-label"區(qū)域/label

div?class="col-sm-10"

select?class="form-control?form-control-lg"?id="area"

option四川省/option

/select

/div

/div

fieldset?class="form-group"

div?class="row"

legend?class="col-form-label?col-sm-2?pt-0"性別/legend

div?class="col-sm-10"

div?class="form-check?form-check-inline"

input?class="form-check-input"?type="radio"?name="inlineRadioOptions"?id="inlineRadio1"?value="option1"

checked="true"

label?class="form-check-label"?for="inlineRadio1"男/label

/div

div?class="form-check?form-check-inline"

input?class="form-check-input"?type="radio"?name="inlineRadioOptions"?id="inlineRadio2"?value="option2"

label?class="form-check-label"?for="inlineRadio2"女/label

/div

/div

/div

/fieldset

div?class="form-group?row"

label?for="age"?class="col-sm-2?col-form-label"年齡/label

div?class="col-sm-10"

input?type="email"?class="form-control"?id="age"?placeholder="請(qǐng)輸入年齡"

/div

/div

div?class="form-group?row"

label?for="age"?class="col-sm-2?col-form-label"生日/label

div?class="col-sm-10"

input?size="16"?type="text"?value="2012-06-15"?readonly?class="form-control?form_datetime"

/div

/div

div?class="form-group?row"

label?for="phone"?class="col-sm-2?col-form-label"手機(jī)號(hào)/label

div?class="col-sm-10"

input?type="text"?class="form-control"?id="phone"?placeholder="請(qǐng)輸入手機(jī)號(hào)"

/div

/div

div?class="form-group?row"

label?for="phone"?class="col-sm-2?col-form-label"頭像/label

div?class="col-sm-10"

input?type="file"?class="form-control-file"?id="exampleFormControlFile1"

/div

/div

div?class="form-group?row"

label?for="site"?class="col-sm-2?col-form-label"主頁/label

div?class="col-sm-10"

input?type="text"?class="form-control"?id="site"?placeholder="請(qǐng)輸入主頁"

/div

/div

div?class="form-group?row"

label?for="email"?class="col-sm-2?col-form-label"Email/label

div?class="col-sm-10"

input?type="email"?class="form-control"?id="email"?placeholder="請(qǐng)輸入Email"

/div

/div

div?class="form-group?row"

label?class="col-sm-2?col-form-label"喜歡的顏色/label

div?class="col-sm-10"

input?id="likeColor"?type="text"?class="form-control"?value="#5367ce"?/

/div

/div

div?class="form-group?row"

div?class="col-sm-2"/div

div?class="col-sm-10"

div?class="form-check"

input?class="form-check-input"?type="checkbox"?value=""?id="defaultCheck1"

label?class="form-check-label"?for="defaultCheck1"

同意服務(wù)條款

/label

/div

/div

/div

div?class="form-group?row"

div?class="col-sm-10"

button?type="submit"?class="btn?btn-primary"注冊(cè)/button

button?type="submit"?class="btn"取消/button

/div

/div

/form

/div

script?src=""

integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"?crossorigin="anonymous"

/script

script?src=""

integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"?crossorigin="anonymous"

/script

script?src=""

integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"?crossorigin="anonymous"

/script

script?src="bootstrap-colorpicker/js/bootstrap-colorpicker.js"/script

script?src="bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"/script

script

$('#likeColor').colorpicker();

$(".form_datetime").datetimepicker({

format:?'yyyy-mm-dd',

weekStart:?1,

todayBtn:??1,???//今日日期按鈕

autoclose:?1,???//自動(dòng)關(guān)閉

todayHighlight:?1,???//高亮今日日期

startView:?2,???????//從日期視圖開始

minView:?2,

forceParse:?0

});

/script

/body

/html

案例下載

注冊(cè)/登陸頁面HTML代碼該怎么寫？

以下為個(gè)人原創(chuàng)教學(xué)例子，任何人引用需注明出自百度知道用戶am7972,樓主可供參考

該例子涵蓋了文本框、密碼框、下拉菜單、單選框、復(fù)選框及文本區(qū)的使用

同時(shí)在數(shù)據(jù)的使用方面涵蓋了文本型、數(shù)值型、日期型、布爾型的使用

也涵蓋了在會(huì)員信息入數(shù)據(jù)庫前，進(jìn)行嚴(yán)格的數(shù)據(jù)檢查

不足處，JS驗(yàn)證還不是太完善，不過有服務(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ǎ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)過處理之后變成"張 三"

If username ="" Then

Response.write "姓名不能為空"

Response.End

End If

If Len(username)10 Then

Response.write "姓名字?jǐn)?shù)不能超過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ù)不能超過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)超過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 "你選擇的愛好有問題，請(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)方式有問題，請(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)介不能超過1000個(gè)字"

Response.End

End If

Response.write "數(shù)據(jù)合法性檢測(cè)通過"

%

====登陸的HTML代碼可相信樓主參照會(huì)員注冊(cè)代碼應(yīng)該沒問題了====

網(wǎng)頁題目：html5注冊(cè)頁面代碼,html5注冊(cè)界面源碼
本文URL：http://chinadenli.net/article42/dsihhec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站排名、Google、網(wǎng)站策劃、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)