第6章 設(shè)計(jì)表單樣式

第6章設(shè)計(jì)表單樣式掌握表單的創(chuàng)建運(yùn)用表單控件實(shí)現(xiàn)登錄注冊功能靈活設(shè)計(jì)表單樣式學(xué)習(xí)目標(biāo)010203本章任務(wù)任務(wù)1：設(shè)計(jì)表單任務(wù)2：設(shè)計(jì)表單樣式任務(wù)3：案例實(shí)戰(zhàn)——表單實(shí)現(xiàn)收貨地址頁面效果任務(wù)1設(shè)計(jì)表單任務(wù)描述手機(jī)注冊頁面效果，用于收集用戶的姓名、電話、郵箱、密碼及驗(yàn)證碼等信息，效果如圖7-1-1。圖7-1-1：手機(jī)注冊頁面任務(wù)實(shí)現(xiàn)任務(wù)分析實(shí)現(xiàn)思路設(shè)計(jì)一個(gè)容器盒子DIV，設(shè)置寬高及背景顏色。在盒子中創(chuàng)建一個(gè)form表單，設(shè)置表單的寬高及背景圖片。在form表單中創(chuàng)建文本框、密碼框、提交按鈕、重置按鈕，設(shè)置每種元素的位置及大小。任務(wù)實(shí)現(xiàn)基本語法<form>標(biāo)簽action：規(guī)定用戶點(diǎn)擊提交按鈕時(shí)，表單被提交到的位置method：規(guī)定表單提交時(shí)所使用的http請求方法，分為get或post兩種，區(qū)別在于get請求方法提交的信息會(huì)被顯示在頁面的地址欄中，而post請求方法提交的信息不會(huì)顯示name：定義表單的名稱，不能包含特殊字符和空格target：規(guī)定action屬性中地址的目標(biāo)（默認(rèn)：_self）<formaction="…"method="…"name="…"target="…">若干子標(biāo)簽</form>基礎(chǔ)案例操作<input>標(biāo)簽用法：它是自閉合標(biāo)簽，根據(jù)type屬性值的不同，可以變化為多種形態(tài)，例如單行文本框、密碼框、單選按鈕、復(fù)選框、文件上傳域、普通按鈕、提交按鈕以及重置按鈕等。<input>標(biāo)簽案例：<form>用戶名:<inputtype="text"name="name"/><br/>密碼:<inputtype="password"name="password"/><br/>性別:<inputtype="radio"name="sex"value="boy"/>男<inputtype="radio"name="sex"value="girl"/>女<br/>愛好:讀書<inputtype="checkbox"name="read"value="read"/>跑步<inputtype="checkbox"name="run"value="run"/>逛街<inputtype="checkbox"name="shopping"value="shopping"/>看電影<inputtype="checkbox"name="movie"value="movie"/><br/>文件上傳:<inputtype="file"name="file"src="url"/><br/><inputtype="submit"value="提交"/><inputtype="button"value="確定"/><inputtype="reset"value="重置"/></form>圖7-1-2：<input>標(biāo)簽案例效果圖基礎(chǔ)案例操作<select>標(biāo)簽用法：定義下拉列表<select>標(biāo)簽案例：<form>學(xué)歷：<select><option>高中</option><option>大專</option><option>本科</option><option>研究生</option></select></form>圖7-1-3：<select>標(biāo)簽案例效果圖基礎(chǔ)案例操作<option>標(biāo)簽用法：在定義<select>標(biāo)簽中定義待選擇的選項(xiàng)<option>標(biāo)簽案例：<form>學(xué)歷：<select><option>高中</option><option>大專</option><option>本科</option><option>研究生</option></select></form>圖7-1-4：<option>標(biāo)簽案例效果圖基礎(chǔ)案例操作<textarea>標(biāo)簽用法：定義多行輸入字段（文本域）<textarea>標(biāo)簽案例：<form>

個(gè)人簡介：<textareaname="description">此處是描述信息

</textarea></form>圖7-1-5：<textarea>標(biāo)簽案例效果圖基礎(chǔ)案例操作<button>標(biāo)簽用法：定義可點(diǎn)擊的按鈕，與<input>標(biāo)簽創(chuàng)建的按鈕不同的是，在<button>標(biāo)簽內(nèi)部，不僅可以放置文本，還可以放置圖像。<button>標(biāo)簽案例：<form><buttontype="button">普通按鈕</button><br/><buttontype="submit">提交按鈕</button><br/><buttontype="reset">重置按鈕</button><br/><buttontype="button"><imgsrc="…"></button></form>圖7-1-6：<button>標(biāo)簽案例效果圖任務(wù)實(shí)現(xiàn)布局代碼樣式代碼任務(wù)描述任務(wù)分析任務(wù)2設(shè)計(jì)表單樣式任務(wù)描述本案例制作宜職官網(wǎng)注冊頁面效果，用于收集注冊用戶的郵箱和密碼，并設(shè)計(jì)該注冊頁面的表單樣式，提升用戶體驗(yàn)，如圖7-2-1所示圖7-2-1：宜職官網(wǎng)注冊頁面任務(wù)實(shí)現(xiàn)任務(wù)分析實(shí)現(xiàn)思路設(shè)計(jì)一個(gè)容器盒子DIV，設(shè)置寬高及背景圖片在盒子中創(chuàng)建一個(gè)form表單，并在表單中添加三個(gè)文本框和一個(gè)提交按鈕通過CSS設(shè)置該表單樣式任務(wù)實(shí)現(xiàn)基本語法基本語法width：設(shè)置寬度height：設(shè)置高度border：設(shè)置邊框?qū)傩詅ont：設(shè)置字體background-color：設(shè)置背景顏色基礎(chǔ)案例操作1．設(shè)置文本框和文本域樣式用法1：文本框的常用樣式有設(shè)置寬度、高度、邊框?qū)傩?、字體、背景等圖7-2-2：設(shè)置文本框和文本域樣式樣式代碼基礎(chǔ)案例操作1．設(shè)置文本框和文本域樣式用法2：使用偽類選擇器設(shè)置鼠標(biāo)劃入文本框或文本框獲得焦點(diǎn)時(shí)文本框的樣式:hover設(shè)置鼠標(biāo)劃入文本框時(shí)的樣式；:focus設(shè)置當(dāng)前文本框獲得焦點(diǎn)時(shí)的樣式。圖7-2-3：設(shè)置文本框和文本域樣式樣式代碼基礎(chǔ)案例操作2．設(shè)置單選框和復(fù)選框樣式用法：設(shè)置單選框和復(fù)選框中的圖標(biāo)樣式。圖7-2-4：設(shè)置單選框和復(fù)選框樣式布局代碼布局代碼基礎(chǔ)案例操作3．設(shè)置下拉列表樣式用法：設(shè)置下拉列表中顯示的字體和邊框樣式圖7-2-5：設(shè)置下拉列表樣式樣式代碼任務(wù)實(shí)現(xiàn)布局代碼樣式代碼任務(wù)描述任務(wù)分析任務(wù)3案例實(shí)戰(zhàn)——表單實(shí)現(xiàn)收貨地址頁面效果任務(wù)描述根據(jù)給定的素材背景圖片，設(shè)計(jì)如圖7-3-1的頁面效果。圖7-3-1：