怎樣用html5做一個注冊頁面

不知道你要做到什么程度，如果只是簡單地樣式的話用input框就可以，然后用JS獲取數(shù)據(jù)保存到cookie或者localstorage就可以。

十多年的射陽網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整射陽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“射陽網(wǎng)站設(shè)計”,“射陽網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

HTML5寫注冊頁面

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

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

首先先說一下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!--登陸注冊區(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

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

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

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

希望能幫到你！

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"確認(rèn)密碼/label

div?class="col-sm-10"

input?type="password"?class="form-control"?id="pwd2"?placeholder="請輸入確認(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="請輸入年齡"

/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"

同意服務(wù)條款

/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,???//自動關(guān)閉

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

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

minView:?2,

forceParse:?0

});

/script

/body

/html

案例下載