學習要點：
1.表單元素總彙
2.表單元素解析
主講教師：李炎恢
本章主要探討 HTML5 中表單元素，表單元素用於獲取使用者的輸入資料。
一．表單元素總彙
在 HTML5 的表單中，提供了各種可供使用者輸入的表單控制元件。
|
元素名稱 |
說明 |
|
form |
表示 HTML 表單 |
|
input |
表示用來收集使用者輸入資料的控制元件 |
|
textarea |
表示可以輸入多行文字的控制元件 |
|
select |
表示用來提供一組固定的選項 |
|
option |
表示提供提供一個選項 |
|
optgroup |
表示一組相關的 option 元素 |
|
button |
表示可用來提交或重置的表單按鈕（或一般按鈕） |
|
datalist |
定義一組提供給使用者的建議值 |
|
fieldset |
表示一組表單元素 |
|
legend |
表示 fieldset 元素的說明性標籤 |
|
label |
表示表單元素的說明標籤 |
|
output |
表示計算結果 |
二．表單元素解析
1.<form>定義表單
<form method="post" action="http://www.haosou.com/">
<button>提交</button> </form>
解釋：<form>元素主要是定義本身是一組表單。
|
元素名稱 |
說明 |
|
action |
表示表單提交的頁面 |
|
method |
表示表單的請求方式：有 POST 和 GET 兩種，預設 GET |
|
enctype |
表示瀏覽器對傳送給伺服器的資料所採用的編碼格式。有三種：application/x-www-form-urlencoded（預設編碼，不能將檔案上傳到伺服器）、multipart/form-data（用於上傳檔案到伺服器）、text/plain（未規範的編碼，不建議使用，不同瀏覽器理解不同） |
|
name |
設定表單名稱，以便程式呼叫 |
|
target |
設定提交時的目標位置：_blank、_parent、_self、_top |
|
autocomplete |
設定瀏覽器記住使用者輸入的資料，實現自動完成表單。預設為 on 自動完成，如果不想自動完成則設定 off。 |
|
novalidate |
設定是否執行客戶端資料有效性檢查，後面課程講解。 |
//使用 get 提交資料
method="get"
//喪失自動提示功能
autocomplete="off"
//使用_blank 新建目標
target="_blank"
2.<input>表示使用者輸入資料
<input name="user">
解釋：<input>元素預設情況會出現一個單行文字框，有五個屬性。
|
屬性名稱 |
說明 |
|
autofocus |
讓游標聚焦在某個 input 元素上，讓使用者直接輸入 |
|
disabled |
禁用 input 元素 |
|
autocomplete |
單獨設定 input 元素的自動完成功能 |
|
form |
讓表單外的元素和指定的表單掛鉤提交 |
|
type |
input 元素的型別，內容較多，將在下節課展開講解 |
|
name |
定義 input 元素的名稱，以便接收到相應的值 |
//聚焦游標
<input name="user" autofocus>
//禁用 input
<input name="user" disabled>
//禁止自動完成
<input name="user" autocomplete="off">
//表單外的 input
<form method="get" id="register"> ... </form> <input name="email" form="register">
3.<label>新增說明標籤
<p><label for="user">使用者名稱：<input id="user" name="user"></label></p>
解釋：<label>元素可以關聯 input，讓使用者體驗更好。且更加容易設定 CSS 樣式。
4.<fieldset>對錶單進行編組
<fieldset>...</fieldset>
解釋：<fieldset>元素可以將一些表單元素組織在一起，形成一個整體。
|
屬性名稱 |
說明 |
|
name |
給分組定義一個名稱 |
|
form |
讓表單外的分組與表單掛鉤 |
|
disabled |
禁用分組內的表單 |
5.<legend>新增分組說明標籤
<fieldset> <legend> 登錄檔單 </legend> </fieldset>
解釋：<legend>元素給分組加上一個標題。
6.<button>新增按鈕
<button type="submit"></button>
解釋：<button>元素新增一個按鈕，type 屬性有如下幾個值：
|
值名稱 |
說明 |
|
submit |
表示按鈕的作用是提交表單，預設 |
|
reset |
表示按鈕的作用是重置表單 |
|
button |
表示按鈕為一般性按鈕，沒有任何作用 |
//提交表單
<button type="submit">提交</button>
//重置表單
<button type="reset">重置</button>
//普通按鈕
<button type="button">按鈕</button>
對於 type 屬性為 submit 時，按鈕還會提供額外的屬性。
|
屬性名稱 |
說明 |
|
form |
指定按鈕關聯的表單 |
|
formaction |
覆蓋 form 元素的 action 屬性 |
|
formenctype |
覆蓋 form 元素的 enctype 屬性 |
|
formmethod |
覆蓋 form 元素的 method 屬性 |
|
formtarget |
覆蓋 form 元素的 target 屬性 |
|
formnovalidate |
覆蓋 form 元素的 novalidate 屬性 |
//表單外關聯提交
<button type="submit" form="register">提交</button>