第6章 設計表單樣式

第6章設計表單樣式掌握表單的創(chuàng)建運用表單控件實現登錄注冊功能靈活設計表單樣式學習目標010203本章任務任務1：設計表單任務2：設計表單樣式任務3：案例實戰(zhàn)——表單實現收貨地址頁面效果任務1設計表單任務描述手機注冊頁面效果，用于收集用戶的姓名、電話、郵箱、密碼及驗證碼等信息，效果如圖7-1-1。圖7-1-1：手機注冊頁面任務實現任務分析實現思路設計一個容器盒子DIV，設置寬高及背景顏色。在盒子中創(chuàng)建一個form表單，設置表單的寬高及背景圖片。在form表單中創(chuàng)建文本框、密碼框、提交按鈕、重置按鈕，設置每種元素的位置及大小。任務實現基本語法<form>標簽action：規(guī)定用戶點擊提交按鈕時，表單被提交到的位置method：規(guī)定表單提交時所使用的http請求方法，分為get或post兩種，區(qū)別在于get請求方法提交的信息會被顯示在頁面的地址欄中，而post請求方法提交的信息不會顯示name：定義表單的名稱，不能包含特殊字符和空格target：規(guī)定action屬性中地址的目標（默認：_self）<formaction="…"method="…"name="…"target="…">若干子標簽</form>基礎案例操作<input>標簽用法：它是自閉合標簽，根據type屬性值的不同，可以變化為多種形態(tài)，例如單行文本框、密碼框、單選按鈕、復選框、文件上傳域、普通按鈕、提交按鈕以及重置按鈕等。<input>標簽案例：<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>標簽案例效果圖基礎案例操作<select>標簽用法：定義下拉列表<select>標簽案例：<form>學歷：<select><option>高中</option><option>大專</option><option>本科</option><option>研究生</option></select></form>圖7-1-3：<select>標簽案例效果圖基礎案例操作<option>標簽用法：在定義<select>標簽中定義待選擇的選項<option>標簽案例：<form>學歷：<select><option>高中</option><option>大專</option><option>本科</option><option>研究生</option></select></form>圖7-1-4：<option>標簽案例效果圖基礎案例操作<textarea>標簽用法：定義多行輸入字段（文本域）<textarea>標簽案例：<form>

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

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