單元5注冊登錄與留言網頁設計

一個網站不僅需要各種供用戶瀏覽的網頁，而且還需要與用戶進行交互的表單，表單是實現用戶注冊、登錄、留言等功能的重要手段。 利用表單處理程序，可以收集、分析用戶的反饋意見，做出合理的決策。 本單元通過對各類網站的注冊、登錄與留言網頁設計的探析與訓練，重點學習HTML5中的表單及控件標簽、HTML5新的form屬性和input屬性、HTML5的input類型等，學會應用表單及控件設計注冊登錄與留言網頁。教學導航教學目標（1）熟悉HTML5中的表單及控件標簽（2）掌握HTML5新的form屬性和input屬性（3）掌握HTML5的input類型及使用（4）學會應用表單及控件設計注冊登錄與留言網頁關鍵字注冊登錄與留言網頁表單及控件標簽form屬性input屬性和類型參考資料（1）HTML5的常用標簽及其屬性、方法與事件參考附錄B（2）CSS的屬性參考附錄C（3）CSS的各種選擇器的含義和用法參考附錄D教學方法任務驅動法、分組討論法、理論實踐一體化、探究學習法課時建議6課時實例探析【任務5-1】探析手機麥包包網的用戶注冊網頁【效果展示】 手機麥包包網的用戶注冊網頁0501.html的瀏覽效果如圖5-1所示。圖5-1手機麥包包網的用戶注冊

網頁0501.html的瀏覽效果【網頁探析】1．網頁0501.html的HTML代碼探析2．網頁0501.html的CSS代碼探析知識梳理1．HTML5的表單及控件標簽（1）<form>標簽 <form>標簽用于為用戶輸入創建HTML表單，表單用于向服務器傳輸數據。 表單能夠包含<input>元素，如文本字 段、復選框、單選框、提交按鈕等。 表單還可以包含<menus>、<textarea>、<fieldset>、<legend>和<label>元素。（2）<input>標簽 <input>標簽用于搜集用戶信息，根據不同的type屬性值，輸入字段擁有很多種形式。 輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等。（3）<label>標簽 <label>標簽為<input>元素定義標注（標記），<label>元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。 如果在<label>元素內單擊文本，就會觸發此控件。 也就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。 <label>標簽的for屬性應當與相關元素的id屬性相同。（4）<menu>標簽 <menu>標簽定義命令的列表或菜單，用于上下文菜單、工具欄以及用于列出表單控件和命令。（5）<textarea>標簽 <textarea>標簽定義多行的文本輸入控件，文本區中可容納無限數量的文本，其中的文本 的默認字體是等寬字體（通常是Courier）。 可以通過cols和rows屬性來規定<textarea>的尺寸，不過更好的辦法是使用CSS的height和width屬性進行設置。（6）<fieldset>標簽和<legend>標簽 <fieldset>標簽將表單內的相關元素分組，當一組表單元素放到<fieldset>標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D效果，或者甚至可創建一個子表單來處理這些元素。（7）<datalist>標簽 <datalist>標簽用于定義輸入域的選項列表，列表是通過<datalist>內的<option>元素創建的。 該標簽與<input>元素配合使用該元素，用 來定義<input>可能的值。 <datalist>元素及其選項不會被顯示出來，它僅僅是合法的輸入值列表。 使用<input>元素的list屬性來綁定<datalist>。（8）<keygen>標簽 <keygen>元素的作用是提供一種驗證用戶的可靠方法。 <keygen>元素是表單的密鑰對生成器（key-pairgenerator）。 當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。 私鑰（privatekey）存儲于客戶端，公鑰（publickey）則被發送到服務器。 公鑰可用于之后驗證用戶的客戶端證書（clientcertificate）。（9）<output>標簽 <output>標簽用于定義不同類型的輸出，如腳本的輸出。（10）<datagrid>標簽 <datagrid>標簽用于定義可選數據的列表，<datagrid>作為樹列表來顯示。 如果把列表表單控件的multiple屬性設置為true，則可以在列表中選取一個以上的項目。2．HTML5新的form屬性（1）autocomplete屬性

autocomplete屬性規定<form>或<input>域應該擁有自動完成功能。

autocomplete適用于<form>標簽及以 下類型的<input>標簽：text、search、url、telephone、email、password、datepickers、range及color。 當用戶在自動完成域中開始輸入時，瀏 覽器應該在該域中顯示填寫的選項。（2）novalidate屬性

novalidate屬性規定在提交表單時不應該驗證<form>或<input>域。

novalidate

屬性適用于<form>及以下類型的<input>標簽：text、search、url、telephone、email、password、datepickers、range及color。3．HTML5新的input屬性（1）autofocus屬性 autofocus屬性規定在頁面加載時，域自動地獲得焦點，autofocus屬性適用于所有<input>標簽的類型。（2）form屬性 form屬性規定輸入域所屬的一個或多個表單，form屬性適用于所有<input>標簽的類型。form屬性必須引用所屬表單的id。（3）表單重寫屬性（4）height和width屬性 height和width屬性規定用于image類型的<input>標簽的圖像高度和寬度，并且僅適用于image類型的<input>標簽。（5）list屬性 list屬性規定輸入域的<datalist>，<datalist>是輸入域的選項列表。 list屬性適用于以下類型的<input> 標簽：text、search、url、telephone、email、datepickers、number、range 及color。（6）min,max和step屬性 min、max和step屬性用于為包含數字或日期的<input>類型規定限定（約束）。 max屬性規定輸入域所允許的最大值。 min屬性規定輸入域所允許的最小值。 step屬性為輸入域規定合法的數字間隔（如果step=“3”，則合法的數是-3、0、3、6等）。 min、max和step屬性適用于以下類型的<input>標簽：datepickers、number及range。（7）multiple屬性 multiple屬性規定輸入域中可選擇多個值，multiple屬性適用于以下類型的<input>標簽：email和file。（8）pattern(regexp)屬性 pattern屬性規定用于驗證<input>域的模 式（pattern）模式（pattern）是正則表達式。 pattern屬性適用于以下類型的<input>標 簽：text、search、url、telephone、email及password。（9）placeholder屬性 placeholder屬性提供一種提示信息，描述輸入域所期待的值。 placeholder屬性適用于以下類型的<input>標簽：text、search、url、telephone、email及password。 提示信息會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失。（10）required屬性 required屬性規定必須在提交之前填寫輸 入域（不能為空）。 required屬性適用于以下類型的<input> 標簽：text、search、url、telephone、email、password、datepickers、number、checkbox、radio及file。4．HTML5的input類型及使用方法（1）email email類型用于應該包含E-mail地址的輸入域。 在提交表單時，會自動驗證email域的值。（2）url

url類型用于應該包含URL地址的輸入域。 在提交表單時，會自動驗證url域的值。（3）number number類型用于應該包含數值的輸入域，還能夠設定對所接受的數字的限定。屬性值描述maxnumber規定允許的最大值minnumber規定允許的最小值stepnumber規定合法的數字間隔（如果step="3"，則合法的數是-3、0、3、6等）valuenumber規定默認值表5-5

HTML5的Input數字類型的限定屬性（4）range range類型用于應該包含一定范圍內數字值的輸入域，range類型顯示為滑動條，還能夠設定對所接受的數字的限定。（5）DatePickers（日期選擇器） HTML5擁有多個可供選取日期和時間 的新輸入類型，分別為date用于選取日、月、年；month用于選取月、年；week用于選取 周和年；time用于選取時間（小時和分鐘）；datetime用于選取時間、日、月、年（UTC 時間）；datetime-local用于選取時間、日、 月、年（本地時間）。（6）search search類型用于搜索域，如站點搜索或百度搜索，search域顯示為常規的文本域。引導訓練【任務5-2】設計同程旅游無線網的會員登錄網頁【任務描述】 同程旅游無線網的會員登錄網頁0502.html的瀏覽效果如圖5-2所示。圖5-2同程旅游無線網的會員

登錄網頁0502.html的瀏覽效果【任務實施】1．網頁0502.html的主體結構設計 在本地硬盤的文件夾“05登錄注冊與留言網頁設計\0502”中創建網頁0502.html。（1）定義網頁0502.html通用CSS代碼（2）定義網頁0502.html主體結構的CSS代碼（3）編寫網頁0502.html主體結構的HTML代碼2．網頁0502.html的局部內容設計（1）網頁0502.html的頂部內容設計（2）網頁0502.html的中部內容設計（3）網頁0502.html的底部內容設計【網頁瀏覽】 保存網頁0502.html，在瀏覽器GoogleChrome中的瀏覽效果如圖5-2所示。【任務5-3】設計去哪兒網的意見反饋網頁【任務描述】 去哪兒網的意見反饋網頁0503.html的瀏覽效果如圖5-3所示。圖5-3去哪兒網的意見反饋

網頁0503.html的瀏覽效果【任務實施】1．定義網頁0503.html的CSS代碼 在本地硬盤的文件夾“05登錄注冊與留言網頁設計\0503”中創建網頁0503.html。（1）定義網頁0503.html通用CSS代碼（2）定義網頁0503.html主體結構的CSS代碼（3）定義網頁0503.html其他的CSS代碼2．編寫網頁0503.html的HTML代碼（1）編寫網頁0503.html主體結構的HTML代碼（2）編寫網頁0503.html用戶注冊部分的HTML代碼同步訓練【任務5-4】設計掌上1號店的用戶登錄網頁【任務描述】 掌上1號店的用戶登錄網頁0504.html的瀏覽效果如圖5-4所示。圖5-4掌上1號店的用戶登錄網頁0504.html的瀏覽效果【任務實施】1．定義網頁0504.html的CSS代碼 在本地硬盤的文件夾“05登錄注冊與留言網頁設計\0504”中創建網頁0504.html。（1）定義網頁0504.