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

<label>

標簽表示用戶界面中某個元素的說明。<input>

<input>

元素用于為基于Web的表單創建交互式控件，以便接受來自用戶的數據。<button>

<button>

元素表示一個可點擊的按鈕，可以用在表單或文檔其它需要使用簡單標準按鈕的地方。<fieldset><fieldset>元素可將表單內的相關元素分組。<legend><legend>元素用于表示它的父元素<fieldset>的內容的標題。<textarea>

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

元素表示一個控件，提供一個選項菜單。<option>

<option>

用于定義在<select>,

<optgroup>

或<datalist>

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

maxlength指定可以輸入的值的最大長度submit用于提交表單的按鈕reset用于將表單所內容設置為缺省值的按鈕button無缺省行為按鈕radio單選按鈕，使用

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

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

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

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

e-mail的字段。numberHTML5新增用于輸入浮點數的控件。telHTML5新增用于輸入電話號碼的控件，可以使用屬性比如

pattern和

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