第10章 使用CSS美化表單
【學習重點】
- 正確使用各種表單控件
- 熟悉HTML5新增的表單控件
- 掌握表單屬性的設置
- 設計易用性表單頁面
10.1 表單的基本結構
表單包含多個標簽，由很多控件組成。一個完整的表單結構由下面三部分組成：
- 表單框架（<form>標簽）：<form>標簽是一個包含框，里面包含所有表單對象。
- 表單域（<input>、<select>等標簽）：用於采集用戶的輸入或選擇的數據。
- 表單按鈕（<input>、<buttom>等標簽）：用於將數據發送給服務器，還可以用來控制其它腳本行為。
所有表單元素都包含兩個基本屬性：
- name：定義表單對象的名稱；
- id：定義表單對象的ID編碼，以便JavaScript和CSS訪問該對象。
name和id屬性可以設置相同值。
<form>標簽包含很多屬性，其中HTML5支持的屬性說明如下：
| 屬性 | 取值 | 說明 |
|---|---|---|
| accept-charset | charset_list | 設置服務器可服務的表單數據字符集 |
| action | URL | 設置當提交表單時向何處發送表單數據 |
| autocomplete | On/Off | 設置是否啟用表單的自動完成功能 |
| enctype | application/x-www-form-urlencoded multipart/form-data text-plain |
設置在發送表單數據之前如何對其進行編碼 |
| method | get/post | 設置在發送表單數據之前如何對其進行編碼 |
| name | form_name | 設置表單的名稱 |
| novalidate | novalidate | 如果使用該屬性，則提交表單時不進行驗證 |
| target | _blank、_self、_parent、_top、_framename | 設置在何處打開actionURL |
10.2 創建表單控件
10.2.1 輸入型控件
<input>標簽可定義多種形式的輸入框，基本應用方式如下：
<input type=" "/>
如果不設置type屬性，默認顯示為單行文本框。
HTML5中<input>標簽的屬性說明如下：
| 屬性 | 取值 | 說明 |
|---|---|---|
| accept | mime_type | 設置通過文件上傳來提交的文件的類型 |
| alt | text | 定義圖像輸入的替代文本 |
| autocomplete | On/Off | HTML5新增，設置是否使用輸入字段的自動完成功能 |
| autofocus | autofocus | HTML5新增，設置字段在頁面加載時是否獲得焦點 |
| checked | checked | 設置此input元素首次加載時應當被選中 |
| disabled | disabled | 當input元素加載時禁用此元素 |
| form | formname | HTML5新增，設置輸入字段所屬的一個或多個表單 |
| formaction | URL | 覆蓋表單的action屬性，適用於type="submit"和type="image" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
HTML5新增，覆蓋表單的enctype屬性，適用於type="submit"和type="image" |
| formmethod | get post |
HTML5新增，覆蓋表單的method屬性，適用於type="submit"和type="image" |
| formnovalidate | formnovalidate | HTML5新增，覆蓋表單的novalidate屬性，使用該屬性，則提交表單時不進行驗證 |
| formtarget | _blank、_self、_parent、_top、framename | HTML5新增，覆蓋表單的target屬性，適用於type="submit"和type="image" |
| height | 像素、% | HTML5新增，定義input字段的高度，適用於type="image" |
| list | datalist-id | HTML5新增，引用包含輸入字段的預定義選項的datalist |
| max | number、date | HTML5新增，設置輸入字段的最大值，與min屬性配合使用，創建合法值的范圍 |
| maxlength | number | 設置輸入字段中字符的最大長度 |
| min | number、date | HTML5新增，設置輸入字段的最小值，與max屬性配合使用，創建合法值的范圍 |
| multiple | multiple | HTML5新增，如果使用該屬性，則允許一個以上的值 |
| name | field_name | 定義input元素的名稱 |
| pattern | regexp_pattern | HTML5新增，設置輸入字段的值的模式或格式 |
| placeholder | text | HTML5新增，設置幫助用戶填寫輸入字段的提示 |
| readonly | readonly | 設置輸入字段為只讀 |
| required | required | HTML新增，指示輸入字段的值是必需的 |
| size | number_of_char | 定義輸入字段的寬度 |
| src | URL | 定義以提交按鈕形式顯示的圖像的URL |
| step | number | HTML5新增，設置輸入字的合法數字間隔 |
| type | button、checkbox、file、hidden、image、password、radio、reset、submit、text | 設置input元素的類型 |
| value | value | 設置input元素的值 |
| width | 像素、% | HTML5新增，定義input字段的寬度，適用於type="image" |
10.2.2 選擇型控件
單選按鈕（<input type="radio">）。多個單選按鈕可以合並為一個單選按鈕組，單選按鈕組中的name值必須相同，單選按鈕組同一時刻只能選擇一個。
復選框（<input type="select">）組可以允許多項選擇，每個復選框都是一個獨立的元素，且必須有一個唯一的名稱（name）。
1 <form> 2 <p>姓名：<input type="text" value=" " /></p> 3 <p> 喜歡的運動： 4 <label> 5 <input name="足球" type="checkbox" value="足球"/></label> 6 <label> 7 <input name="排球" type="checkbox" value="排球"/></label> 8 <label> 9 <input name="籃球" type="checkbox" value="籃球"/></label> 10 <label> 11 <input name="羽毛球" type="checkbox" value="羽毛球"/></label> 12 </p> 13 <p><input type="submit" value="提交"/></p> 14 </form>
<select>標簽與<option>標簽配合使用可以設計下拉菜單或者列表框。<optgroup>標簽是對<option>標簽的分組，即多個<option>標簽放到一個<optgroup>標簽內。
1 <form> 2 <p>姓名：<input type="text" value="" /></p> 3 <p>所在城市： 4 <select name="選擇城市"> 5 <optgroup label="山東省"> 6 <option value="濰坊">濰坊</option> 7 <option value="青島" selected="selected">青島</option> 8 </optgroup> 9 <optgroup label="山西省"> 10 <option value="太原">太原</option> 11 <option value="榆次">榆次</option> 12 </optgroup> 13 </select> 14 </p> 15 <p><input type="submit" value="提交"/></p> 16 </form>
10.2.3 輔助控件
使用<fieldset>和<ledend>標簽可以對表單控件進行分組。
- <fieldset>：為表單對象進行分組，一個表單可以包含多個<fieldset>標簽。表單區域分組的外圍會顯示一個包圍框。
- <ledend>：定義每組的標題，默認顯示在<fieldset>包含框的左上角。
<label>標簽定義表單對象的提示信息，不允許嵌套使用。<label>標簽包含for專有屬性，可將提示信息與表單對象綁定在一起；當用戶單擊提示信息時，將會激活對應的表單對象。如果不使用for屬性，通過<label>標簽包含表單對象，也可以實現相同的設計目標。
HTML5為表單中的元素提供了三個屬性：accesskey（快捷訪問鍵）、tabindex（Tab訪問鍵）、disabled（禁用表單域，用戶不能輸入）。
10.3 HTML5新增輸入類型
10.3.1 email類型
email類型的input元素是一種專門用於輸入email地址的文本框，用法如下：
<input type="email" name="user_email"/>
10.3.2 url類型
url類型的input元素用於輸入URL地址這類特殊文本的文本框，用法如下：
<input type="url" name="user_url"/>
10.3.3 number類型
number類型的input元素提供用於輸入數值的文本框。用戶可以設定對所接受的數字的限制，包括設置允許最大值和最小值、合法的數字間隔或默認值等。例：
<form action="demo_form.php" method="get"> 請輸入數值：<input type="number" name="number1" min="1" max="20" step="4"> <input type="submit"/> </form>
number類型使用下面的屬性來設置對數字類型的限定：
| 屬性 | 取值 | 說明 |
| max | number | 設置允許的最大值 |
| min | number | 設置允許的最小值 |
| step | number | 設置合法的數字間隔（如果step=“4”，則合法的數字是-4,0,4,8等） |
| value | number | 設置默認值 |
10.3.4 range類型
range類型的input元素提供用於輸入包含一定范圍內數字值得文本框，在網頁中顯示為滑動條。用戶還可以設定對所接受的數字的限制。
range類型和屬性和number屬性完全一致，而不同點僅僅在外觀表現上。
10.3.5 日期選擇器類型
HTML5提供了6種日期選擇器控件，分別用於選取：日期、月、星期、時間、日期+時間、日期+時間+時區，如下表所示：
| 輸入類型 | HTML代碼 | 功能和說明 |
|---|---|---|
| date | <input type="date"> | 選取日、月、年 |
| month | <input type="month"> | 選取月、年 |
| week | <input type="week"> | 選取周和年 |
| time | <input type="time"> | 選取時間（小時和分鍾） |
| datetime | <input type="datetime"> | 選取時間、日、月、年（UTC時間） |
| datetime-local | <input type="datetime-local"> | 選取時間、日、月、年（本地時間） |
10.3.6 search類型
search類型的input元素提供用於輸入搜索關鍵詞的文本框。
10.3.7 tel類型
tel類型的input元素提供專門用於輸入電話號碼的文本框，不限定只輸入數字。
10.3.8 color類型
color類型的input元素提供專門用於輸入顏色的文本框。當color類型文本框獲取焦點后，會自動調用系統的顏色窗口。IE和Safari瀏覽器暫時不支持。
10.4 HTML5新增輸入屬性
10.4.1 autocomplete屬性
autocomplete屬性可以幫助用戶在input類型的輸入框中實現自動完成內容輸入。
autocomplete屬性有兩個值：on、off。
當autocomplete屬性值設置為“on”時，可以使用HTML5中新增加的datalist標簽和list屬性提供一個數據列表供用戶選擇。
10.4.2 autofocus屬性
HTML5新增了autofocus屬性，它可以實現在頁面加載時，某表單控件自動獲得焦點。
10.4.3 form屬性
可以把表單內的從屬元素寫在頁面中的任一位置，只需要為這個元素指定一下form屬性並為其指定屬性值為該表單的id。
10.4.4 表單重寫屬性
HTML5新增了多個表單重寫屬性，用於重寫form元素的某些屬性設定，包括：
- formaction：用於重寫表單的action屬性。
- formenctype：用於重寫表單的enctype屬性。
- formmethod：用於重寫表單的method屬性。
- formnovalidate：用於重寫表單的novalidate屬性。
- formtarget：用於重寫表單的target屬性。
表單重寫屬性並不適用於所有的input輸入類型，僅適用於submit和image輸入類型。
10.4.5 height和width屬性
height和width屬性用於設置image類型的標簽的圖像高度和寬度，這兩個屬性只適用於image類型的<input>標簽。
<form action="testform.asp" method="get"> 請輸入用戶名：<input type="text" name="user_name"/><br/> <input type="image" src="images/1.png" width="72" height="26"/> </form>
如以上代碼所示，image類型的input標簽被限制為72X26像素。
10.4.6 list屬性
HTML5中新增了一個datalist元素，可以實現數據列表的下拉效果，其外觀類似autocomplete，用戶可以從列表中選擇，也可以自行輸入。
目前支持這一屬性的瀏覽器只有Opera。
1 <form action="testform.asp" method="get "> 2 請輸入網址： 3 <input type="url" list="url_list" name="weblink"/> 4 <datalist id="url_list"> 5 <option label="新浪" value="http://www.sina.com.cn" /> 6 <option label="搜狐" value="http://www.sohu.com" /> 7 <option label="網易" value="http://www.163.com"/> 8 </datalist> 9 <input type="submit" value="提交"/> 10 </form>
10.4.7 min、max和step屬性
HTML5新增了min、max和step屬性，用於為包含數字或日期的input輸入類型設置限值。
10.4.8 multiple屬性
在HTML5之前，input輸入類型中file類型支持選擇單個文件來上傳，而HTML5新增的multiple屬性支持一次性選擇多個文件。
10.4.9 pattern屬性
pattern屬性用於驗證input類型輸入框中用戶輸入的內容是否與自定義的正則表達式相匹配。
該屬性適用於以下類型的<input>標簽：text、search、URL、telephone、email、password。
pattern屬性允許用戶自定義一個正則表達式，pattern屬性中的正則表達式語法與JavaScript中的語法相匹配。
<form action="testform.asp" method="get "> 請輸入郵政編碼： <input type="text" name="zip_code" pattern="[0-9]{6}" title="請輸入6位數的郵政編碼"/> <input type="submit" value="提交"/> </form>
10.4.10 placeholder屬性
placeholder屬性用於為input類型的輸入框提供一種提示（hint），這些提示可以描述輸入框期待用戶輸入何種內容，在輸入框為空時顯式出現，當輸入框獲得焦點時消失。
<form action="testform.asp" method="get "> <input type="text" name="zip_code" pattern="[0-9]{6}" placeholder="請輸入6位數的郵政編碼"/> <input type="submit" value="提交"/> </form>
10.4.11 required屬性
新增的required屬性用於定義輸入框填寫的內容不能為空，否則不允許用戶提交表單。示例：
<input type="text" name="user_name" required="required"/>
10.5 HTML5新增控件
10.5.1 datalist元素
datalist元素用於為輸入框提供一個可選的列表。該列表由datalist中的option元素創建。用戶也可以不從列表中選擇，自行輸入其它內容。
在實際應用中，如果要把列表綁定到某個輸入框，則需要使用輸入框的list屬性來引用datalist元素的id。
每一個option元素都必須設置value屬性。
10.5.2 keygen元素
keygen元素是秘鑰相對生成器，能夠使得用戶驗證更為可靠。用戶提交表單時會生成兩個鍵，一個私鑰，一個公鑰。私鑰會被儲存在客戶端，公鑰則會被發送到服務器。
<form action="testform.asp" method="get "> 請輸入用戶名： <input type="text" name="user_name"/> <br/> 請輸入加密強度： <keygen name="security"/> <br/> <input type="submit" value="提交"/> </form>
10.5.3 output元素
output元素用於在瀏覽器中顯示計算結果或腳本輸出，包含完整的開始和結束標簽，語法如下：
<output name="">Text</output>
10.6 HTML5表單屬性
HTML5新增了2個form屬性，分別是autocomplete和novalidate。
10.6.1 autocomplete屬性
當autocomplete屬性用於整個form時，所有從屬於該form的元素便都具備自動完成功能。
如果要使個邊元素關閉自動完成功能，則單獨為該元素指定“autocomplete="off"”即可。
10.6.2 novalidate屬性
form元素的novalidate屬性用於在提交表單時取消整個表單的驗證，即關閉對表單內所有元素的有效性檢查。
10.6.3 顯式驗證
除了為input元素新增屬性，來對輸入內容進行自動驗證外，HTML5為form、input、select和textarea元素都定義了一個checkValidity（）方法。調用該方法，可以顯式地對表單內所有元素內容或單個元素內容進行有效性驗證。checkValidity（）方法將返回布爾值。