1 製作基本表單
製作一個基本的表單需要三個元素： form 、input和button元素
form元素表示HTML頁面上的表單
| form元素 | |
|---|---|
| 元素類型 | 流元素 |
| 允許具有的父元素 | 任何可以包含流元素的元素。但form元素不能是其他form元素的後代元素 |
| 局部屬性 | action 、method 、enctype 、name 、accept-charset 、novalidate 、target和autocomplete |
| 內容 | 流內容（但主要是label元素和input元素） |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | novalidate和autocomplete屈性是HTML5中新增的 |
| 習慣樣式 | form { display: block; margin-top: oem; } |
input元素, 其用途是收集用戶輸入數據
| input元素 | |
|---|---|
| 元素類型 | 短語元素 |
| 允許具有的父元素 | 任何可以包含短語元素的元素 |
| 局部屬性 | name 、disabled 、form、type , 以及取決於type屬性值的其他一些屬性 |
| 內容 | 無 |
| 標籤用法 | 虛元素形式 |
| 是否爲HTML5新增 | 否，但是增加了一些新的input元素類型， 它們由type屬性確定（詳見第13章） |
| 在HTML5中的變化 | 在HTML5 中type屬性有一些新的值。此外還添加了一些新的屬性，它們需要與type屬性的特定值搭配使用 |
| 習慣樣式 | 無。這種元素的外觀取決於type屬性 |
| button元素 | |
|---|---|
| 元素類型 | 短語元素 |
| 允許具有的父元素 | 任何可以包含短語元素的元素 |
| 局部屬性 | name 、disabled 、form 、type 、value 、autofocus , 以及取決千type屬性值的其他一些屬性 |
| 內容 | 短語內容 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 新增了一些屬性，具體有哪些可用取決於type屬性值，詳見7節 |
| 習慣樣式 | 無 |
例子：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<input name="fave"/>
<button>Submit Vote</button>
</form>
</body>
</html>2 配置表單
| 屬性 | 說明 | 值 |
|---|---|---|
| action | 提交表單時瀏覽器應該把從用戶收集的數據發送到什麼地方 | 服務器網址，如果不設置form元素的action屬性， 那麼瀏覽器會將表單數據發到用以加載該HTML文檔的Url |
| method | 指定了用來將表單數據發送到服務器的HTTP方法 | get（默認）和post |
| enctype | 指定瀏覽器對發送給服務器的數據採用的編碼方式 | 1、application/x-www-form-urlencoded：這是未設置enctype屬性時使用的默認編碼方式。它不能用來將文件上傳到服務器。 2、multipart/form-data：該編碼方式用於將文件上傳到服務器。 3、text/plain：該編碼方式因瀏覽器而異 |
| autocomplete | 自動填寫表單，input元素也有autocomplete屬性,會覆蓋表單的autocomplete屬性 | on和off |
| target | 指定表單反饋信息的目標顯示位置 | _blank、_parent、_self、_top、frame |
| name | 設置表單名稱,以便使用DOM,提交表單時其name屬性值不會被髮送給服務器,不設置name屬性，那麼用戶在其中輸入的數據在提交表單時不會被髮送給服務器 | 獨一無二的標識符 |
例子：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form target="_blank" method="post" action="http://titan:8080/form"
enctype="application/x-www-form-urlencoded" autocomplete="off" name="fruitvote">
<input autocomplete="on" name="fave"/>
<input name="name"/>
<button>Submit Vote</button>
</form>
</body>
</html>3 在表單中添加說明標籤（label元素）
| label元素 | |
|---|---|
| 元素類型 | 短語元素 |
| 允許具有的父元素 | 任何可以包含短語元素的元素 |
| 局部屬性 | for 、form |
| 內容 | 短語內容 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | form屬性是HTMLS中新增的，詳見8節 |
| 習慣樣式 | label { cursor: default; } |
例子：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<!--input元素設置了id屬性，並將相關label元素的for屬性設置爲這個id值。
這樣做即可將input元素和label元素關聯起來，
有助於屏幕閱讀器和其他殘障輔助技術對錶單的處理。-->
<p><label for="fave">Fruit: <input id="fave" name="fave"/></label></p>
<p><label for="name">Name: <input id="name" name="name"/></label></p>
<button>Submit Vote</button>
</form>
</body>
</html>
4 自動聚焦到某個input 元素
autofocus屬性可以使表單顯示出來的時候即聚焦於某個input元素
<input autofocus id="fave" name="fave"/>5 禁用單個input 元素
disabled屬性可以禁用input元素
<input disabled id="name" name="name"/>6 對錶單元素編組（fieldset元素）
| fieldset元素 | |
|---|---|
| 元素類型 | 流元素 |
| 允許具有的父元素 | 任何可以包含流元素的元素， 通常是form元素的後代元素 |
| 局部屬性 | name 、form 、disabled |
| 內容 | 流內容。在開頭位置可以包含一個legend元素 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | form屬性是HTML5中新增的， 詳見8節 |
| 習慣樣式 | fieldset { display: block; margin-start: 2px; margin-end: 2px; padding-before: 0.35em; padding-start: 0.75em; padding-end : 0.75em; padding-after: 9.625em; border: 2px groove; } |
legend元素爲fieldset元素添加說明標籤
| legend元素 | |
|---|---|
| 元素類型 | 無 |
| 允許具有的父元素 | fieldset元素 |
| 局部屬性 | 無 |
| 內容 | 短語內容 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | legend { display: block; padding-start: 2px; padding-end: 2px; border: none; } |
1. legend元素必須是fieldset元素的第一個子元素
2. 通過設置fieldset元素的disabled屬性，可以一次性地禁用多個input元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<!--使用fieldset進行分組-->
<fieldset>
<!--使用legend設置分組的說明標籤-->
<legend>Enter Your Details</legend>
<p><label for="name">Name: <input id="name" name="name"/></label></p>
<p><label for="name">City: <input id="city" name="city"/></label></p>
</fieldset>
<!--添加disabled進行禁用-->
<fieldset disabled>
<legend>Vote For Your Three Favorite Fruits</legend>
<p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
<p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
<p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>7 使用button 元素
button元素的type屬性的值
- submit：表示按鈕的用途是提交表單
- reset：表示按鈕的用途是重置表單
- button：表示按鈕沒有具體語義
7.1 用button元素提交表單
type屬性設置爲submit時button 元素的額外屬性
| 屬性 | 說明 |
|---|---|
| form | 指定按鈕關聯的表單，詳見8節 |
| formaction | 覆蓋form元素的action屬性，另行指定表單將要提交到的URL。關於action屬性， 詳見2.1節 |
| fornmethod | 覆蓋form元素的method屬性。關於method屬性，詳見2.2節 |
| formenctype | 覆蓋form元素的enctype屬性，另行指定表單的編碼方式。關於enctype屬性，詳見2.3節 |
| formtarget | 覆蓋form元素的target屬性。關於target屬性，詳見2.5節 |
| formnovalidate | 覆蓋form元素的novalidate屬性，表明是否應執行客戶端數據有效性檢查。關於對輸人數據的檢查，詳見第14章 |
例子：
<button type="submit"
formaction="http://titan:8080/form"
formmethod="post"
formenctype="application/x-www-form-urlencoded"
formtarget="_blank"
formnovalidate="formnovalidate">
Submit Vote
</button>7.2 用button元素重置表單
將button元素的type屬性設置爲reset, 那麼按下按鈕會將表單中所有input元素重置爲初始狀態
<button type="reset">Reset</button>7.3 把button作爲一般元素使用
將button元素的type屬性設置爲button, 那麼該button元素就僅僅是一個按鈕，但是可以在按下按鈕時可以用JavaScript執行一些操作。通過這種方法即可用button元素實現自定義的行爲。
<button type="button">Do NOT press this button</button>
8 使用表單外的元素
在HTML4中， input 、button和其他與表單相關的元素必須放在form元素中。在HTML5中，與表單相關的元素都定義了一個form屬性，將其form屬性設置爲相關form元素的id屬性值即關聯
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form id="voteform" method="post" action="http://titan:8080/form">
<p>
<label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
</p>
</form>
<p>
<label for="name">Name: <input form="voteform" id="name" name="name"/>
</label>
</p>
<button form="voteform" type="submit">Submit Vote</button>
<button form="voteform" type="reset">Reset</button>
</body>
</html>