響應(yīng)式Web開(kāi)發(fā)項(xiàng)目化教程（HTML5+CSS3） 課件 項(xiàng)目6 制作信息注冊(cè)頁(yè)面

項(xiàng)目6制作信息注冊(cè)頁(yè)面·表單元素及屬性·制作信息注冊(cè)頁(yè)面·HTML5表單概述·表單驗(yàn)證學(xué)習(xí)目標(biāo)掌握了解理解了解網(wǎng)站怎樣與用戶進(jìn)行交互。1掌握常用表單元素及屬性，能夠制作常見(jiàn)的表單頁(yè)面。2理解表單驗(yàn)證的作用，掌握HTML5內(nèi)置校驗(yàn)的使用。3目錄6.1項(xiàng)目描述6.2前導(dǎo)知識(shí)6.3項(xiàng)目分析6.4項(xiàng)目實(shí)踐6.5項(xiàng)目總結(jié)6.1項(xiàng)目描述注冊(cè)登錄頁(yè)面一直是web應(yīng)用中最基礎(chǔ)的一環(huán)，注冊(cè)登錄的意義就在于給每個(gè)用戶自己的個(gè)人中心，包括數(shù)據(jù)的同步，或是用戶注冊(cè)后會(huì)通過(guò)用戶已完善的資料進(jìn)行相關(guān)的內(nèi)容推薦。用戶打開(kāi)網(wǎng)站可能第一步就是登錄注冊(cè)頁(yè)面。注冊(cè)作為一項(xiàng)基礎(chǔ)功能，使用場(chǎng)景一般是用戶初次使用應(yīng)用，屬于相對(duì)低頻次的操作，一般會(huì)關(guān)聯(lián)到產(chǎn)品內(nèi)的個(gè)人資料和設(shè)置模塊。大部分的web應(yīng)用都是需要注冊(cè)登錄的。本項(xiàng)目使用Form表單元素及屬性制作一個(gè)信息注冊(cè)頁(yè)面，項(xiàng)目制作過(guò)程中也將回顧HTML5的基本元素及CSS3的相關(guān)知識(shí)。6.1項(xiàng)目描述表單概述6.2.1網(wǎng)站怎樣與用戶進(jìn)行交互？6.2前導(dǎo)知識(shí)表單概述6.2.1網(wǎng)站怎樣與用戶進(jìn)行交互？6.2前導(dǎo)知識(shí)HTML表單是由一個(gè)或多個(gè)小部件組成的。這些小部件可以是文本字段(單行或多行)、選擇框、按鈕、復(fù)選框或單選按鈕。HTML表單和常規(guī)HTML文檔的主要區(qū)別在于，大多數(shù)情況下，表單收集的數(shù)據(jù)被發(fā)送到web服務(wù)器。在這種情況下，需要設(shè)置一個(gè)web服務(wù)器來(lái)接收和處理數(shù)據(jù)。通過(guò)表單把用戶輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。表單概述6.2.16.2前導(dǎo)知識(shí)基本表單格式<formaction="服務(wù)器文件"method="傳送方式"></form>【例6-1】例6-1是一個(gè)基本的表單案例?！纠?-1】在例6-1中，HTML<form>元素表示了文檔中的一個(gè)區(qū)域，此區(qū)域包含有交互控制元件，用來(lái)向Web服務(wù)器提交信息。表單概述6.2.16.2前導(dǎo)知識(shí)表單元素及屬性6.2.26.2前導(dǎo)知識(shí)元素描述<label>

<label>

標(biāo)簽表示用戶界面中某個(gè)元素的說(shuō)明。<input>

<input>

元素用于為基于Web的表單創(chuàng)建交互式控件，以便接受來(lái)自用戶的數(shù)據(jù)。<button>

<button>

元素表示一個(gè)可點(diǎn)擊的按鈕，可以用在表單或文檔其它需要使用簡(jiǎn)單標(biāo)準(zhǔn)按鈕的地方。<fieldset><fieldset>元素可將表單內(nèi)的相關(guān)元素分組。<legend><legend>元素用于表示它的父元素<fieldset>的內(nèi)容的標(biāo)題。<textarea>

<textarea>元素表示一個(gè)多行純文本編輯控件。<select><select>

元素表示一個(gè)控件，提供一個(gè)選項(xiàng)菜單。<option>

<option>

用于定義在<select>,

<optgroup>

或<datalist>

元素中包含的項(xiàng)。表6-1常用表單標(biāo)簽表單元素及屬性6.2.26.2前導(dǎo)知識(shí)1.輸入框和按鈕2.單選框、復(fù)選框、下拉列表框3.文本輸入域和文件輸入控件4.HTML5新增表單元素表單元素及屬性6.2.26.2前導(dǎo)知識(shí)基本語(yǔ)法格式<form><inputtype="控件類型"name="名稱"value="文本"/></form>1.輸入框和按鈕表單元素及屬性6.2.26.2前導(dǎo)知識(shí)【例6-2】在例6-2中我們用到了<label>標(biāo)簽，文本輸入框、密碼輸入框以及提交按鈕。表單元素及屬性6.2.26.2前導(dǎo)知識(shí)基本語(yǔ)法格式<inputtype="radio/checkbox"value=""name=""checked="checked"/><selectname=""id=""><optionvalue="提交值">選項(xiàng)</option></select>2.單選框、復(fù)選框、下拉列表框表單元素及屬性6.2.26.2前導(dǎo)知識(shí)【例6-3】在例6-3中我們用到了單選框、復(fù)選框和下拉列表框。在使用單選框時(shí)，需要注意同一組的單選按鈕name取值需要一致表單元素及屬性6.2.26.2前導(dǎo)知識(shí)基本語(yǔ)法格式<textareaname=""rows="行數(shù)"cols="列數(shù)">文本</textarea><inputtype="file"id=""name="">3.文本輸入域和文件輸入控件表單元素及屬性6.2.26.2前導(dǎo)知識(shí)【例6-4】在例6-4中用到了文本輸入域和文件輸入控件。其中，<textarea>標(biāo)簽可以通過(guò)cols和rows屬性來(lái)規(guī)定<textarea>的尺寸，不過(guò)更好的辦法是使用CSS的height和width屬性表單元素及屬性6.2.26.2前導(dǎo)知識(shí)基本語(yǔ)法格式<inputtype="text"name="myColor"id="myColor“l(fā)ist="mySuggestion"><datalistid="mySuggestion"><optionvalue="自動(dòng)匹配的內(nèi)容"></datalist>4.HTML5新增表單元素表單元素及屬性6.2.26.2前導(dǎo)知識(shí)【例6-5】在例6-5中，當(dāng)用戶在對(duì)應(yīng)的表單輸入的時(shí)候，可以根據(jù)輸入的關(guān)鍵字自動(dòng)匹配option列表的內(nèi)容，也可以輸入option里不存在的值。表單元素及屬性6.2.26.2前導(dǎo)知識(shí)type屬性描述text單行文本字段password一個(gè)值被遮蓋的單行文本字段。使用

maxlength指定可以輸入的值的最大長(zhǎng)度submit用于提交表單的按鈕reset用于將表單所內(nèi)容設(shè)置為缺省值的按鈕button無(wú)缺省行為按鈕radio單選按鈕，使用

value屬性定義此控件被提交時(shí)的值。使用checked表示控件是否缺省被選擇。checkbox復(fù)選框。使用

value屬性定義此控件被提交時(shí)的值。使用

checked屬性指示控件是否被選擇file此控件可以讓用戶選擇文件。使用

accept屬性可以定義控件可以選擇的文件類型表6-2<input>標(biāo)簽常用type屬性表單元素及屬性6.2.26.2前導(dǎo)知識(shí)type屬性描述emailHTML5新增用于編輯

e-mail的字段。numberHTML5新增用于輸入浮點(diǎn)數(shù)的控件。telHTML5新增用于輸入電話號(hào)碼的控件，可以使用屬性比如

pattern和

maxlength來(lái)約束控件輸入的值。urlHTML5新增用于編輯URL的字段searchHTML5新增用于輸入搜索字符串的單行文本字段。換行會(huì)被從輸入的值中自動(dòng)移除。rangeHTML5新增用于輸入不精確值控件。如果未指定相應(yīng)的屬性，控件使用如下缺省值：colorHTML5新增用于指定顏色的控件。datepickersHTML5新增可供選取日期和時(shí)間的新輸入類型,包括date、month、week、time、datetime-local等表6-2<input>標(biāo)簽常用type屬性（續(xù)）表單驗(yàn)證6.2.36.2前導(dǎo)知識(shí)訪問(wèn)一個(gè)帶注冊(cè)表單的網(wǎng)站時(shí)，如果提交的輸入信息沒(méi)有符合預(yù)期格式，注冊(cè)頁(yè)面都會(huì)給你一個(gè)反饋信息，比如會(huì)提示：“該字段是必填的”（意思是該字段不能為空）、“請(qǐng)?zhí)顚懻_的手機(jī)號(hào)”、“請(qǐng)輸入一個(gè)合法的郵箱地址”、“密碼長(zhǎng)度應(yīng)該是6至20位的，且至少包含一個(gè)大寫字母及一個(gè)數(shù)字”等等——這就是表單校驗(yàn)。表單驗(yàn)證6.2.36.2前導(dǎo)知識(shí)表單校驗(yàn)可以通過(guò)許多不同的方式實(shí)現(xiàn)?？蛻舳诵ｒ?yàn)發(fā)生在瀏覽器端，指的是表單數(shù)據(jù)被提交到服務(wù)器之前的校驗(yàn)，這種方式能實(shí)時(shí)反饋用戶的輸入校驗(yàn)結(jié)果。這種類型的校驗(yàn)可以有兩種方式：第一種是JavaScript校驗(yàn)，這是可以完全自定義的實(shí)現(xiàn)方式；另一種是HTML5內(nèi)置校驗(yàn)，這種不需要JavaScript，而且性能更好，但是不能像JavaScript那樣可自定義。本節(jié)著重講解使用HTML5內(nèi)置表單數(shù)據(jù)校驗(yàn)。表單驗(yàn)證6.2.36.2前導(dǎo)知識(shí)HTML5一個(gè)特別有用的新功能就是，可以在不寫一行JavaScript腳本代碼的情況下，即對(duì)用戶的輸入進(jìn)行數(shù)據(jù)校驗(yàn)，這都是通過(guò)表單元素的校驗(yàn)屬性實(shí)現(xiàn)的。這些屬性可以讓你定義一些規(guī)則，用于限定用戶的輸入，比如某個(gè)輸入框是否必須輸入，或者某個(gè)輸入框的字符串的最小最大長(zhǎng)度限制，或者某個(gè)輸入框必須輸入一個(gè)數(shù)字、郵箱地址等，還有數(shù)據(jù)必須匹配的模式。如果表單中輸入的數(shù)據(jù)都符合這些限定規(guī)則，那么表示這個(gè)表單校驗(yàn)通過(guò)，否則校驗(yàn)未通過(guò)。表單驗(yàn)證6.2.36.2前導(dǎo)知識(shí)【例6-6】在例6-6中，當(dāng)一個(gè)元素校驗(yàn)通過(guò)時(shí)：該元素將可以通過(guò)CSS偽類:valid進(jìn)行特殊的樣式化；如果一個(gè)元素未校驗(yàn)通過(guò)：該元素將可以通過(guò)CSS偽類:invalid進(jìn)行特殊的樣式化。頁(yè)面結(jié)構(gòu)分析6.3.16.3項(xiàng)目分析信息注冊(cè)頁(yè)面結(jié)構(gòu)圖樣式分析6.3.26.3項(xiàng)目分析1.需要設(shè)置最外層.container定寬居中，并重置所有元素box-sizing屬性為border-box。2.form表單的fieldset和legend樣式需要調(diào)整，默認(rèn)樣式不符合要求。3.在每個(gè)fieldset里面的表單控件放在div.item內(nèi)，每個(gè)div.item需要設(shè)置左浮動(dòng)排成一行,外層div需要清除浮動(dòng)。樣式分析6.3.26.3項(xiàng)目分析4.修改各個(gè)表單控件的默認(rèn)樣式滿足項(xiàng)目需求。5.設(shè)置未填寫信息的提示樣式、填寫正確的樣式等等6.對(duì)mit里面的按鈕進(jìn)行樣式并設(shè)置居中。制作頁(yè)面結(jié)構(gòu)6.4.16.4項(xiàng)目實(shí)踐學(xué)習(xí)完前面的內(nèi)容，下面來(lái)動(dòng)手實(shí)踐一下吧定義CSS樣式6.4.26.4項(xiàng)目實(shí)踐學(xué)習(xí)完前面的內(nèi)容，下面來(lái)動(dòng)手實(shí)踐一下吧6.5項(xiàng)目總結(jié)信息注