HTML5寫注冊頁面

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

網站設計制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發可交付網站源代碼;符合網站優化排名的后臺管理系統；成都網站設計、網站制作收費合理；免費進行網站備案等企業網站建設一條龍服務.我們是一家持續穩定運營了十載的成都創新互聯公司網站建設公司。

這個首頁的html5網站設計代碼（尤其是頭部那登錄注冊代碼怎么寫）

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

以下為此頁面的結構代碼：

!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頁面標題/title

/head

body

header

div/div!--登陸注冊區域--

/header!--頭部[html5新標簽]--

nav/nav!--導航[html5新標簽]--

div/div!--banner--

div/div!--左上--

div/div!--右上--

div/div!--左下--

div/div!--右下--

footer/footer!--底部[html5新標簽]--

/body

/html

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

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

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

希望能幫到你！

HTML5網頁前端設計中如下圖表單的代碼怎么寫？

下面是表單代碼，你直接再加屬性就可以了，表單用 table 寫比較簡單，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;"用戶注冊頁面/h1

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

tr

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

tdinput style='width:250px' value='請輸入用戶名' //td

/tr

tr

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

tdinput style='width:250px' value='請輸入密碼' //td

/tr

tr

td align="right" valign="top"div確 認：/div/td

tdinput style='width:250px' value='請再次輸入密碼' //td

/tr

tr

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

tdinput style='width:250px' value='請輸入真實姓名' //td

/tr

tr

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

tdinput style='width:250px' value='請輸入電子郵箱' //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="提交注冊" //div

/div

/body

/html

html5寫這個注冊頁面怎么寫啊？

!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="請輸入用戶名"

/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="請輸入密碼"

/div

/div

div?class="form-group?row"

label?for="pwd2"?class="col-sm-2?col-form-label"確認密碼/label

div?class="col-sm-10"

input?type="password"?class="form-control"?id="pwd2"?placeholder="請輸入確認密碼"

/div

/div

div?class="form-group?row"

label?for="area"?class="col-sm-2?col-form-label"區域/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="請輸入年齡"

/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"手機號/label

div?class="col-sm-10"

input?type="text"?class="form-control"?id="phone"?placeholder="請輸入手機號"

/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="請輸入主頁"

/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="請輸入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"

同意服務條款

/label

/div

/div

/div

div?class="form-group?row"

div?class="col-sm-10"

button?type="submit"?class="btn?btn-primary"注冊/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,???//自動關閉

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

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

minView:?2,

forceParse:?0

});

/script

/body

/html

案例下載

注冊/登陸頁面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();"

trtd 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 userNL0 Or userNL200 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代碼可相信樓主參照會員注冊代碼應該沒問題了====

網頁題目：html5注冊頁面代碼,html5注冊界面源碼
本文URL：http://www.yijiale78.com/article42/dsihhec.html

成都網站建設公司_創新互聯，為您提供動態網站、網站內鏈、網站排名、Google、網站策劃、App設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯