HTML5寫注冊(cè)頁面

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

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

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

案例下載

怎樣用html5做一個(gè)注冊(cè)頁面

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

文章名稱：html5注冊(cè)頁面,HTML5注冊(cè)頁面
轉(zhuǎn)載源于：http://chinadenli.net/article32/dsehgsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、商城網(wǎng)站、網(wǎng)站策劃、標(biāo)簽優(yōu)化、服務(wù)器托管、微信小程序

廣告

聲明：本網(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)