1 使用其他表單元素
1.1 生成選項列表
select元素可以用來生成一個選項列表供用戶選擇，適合於選項較多的情形
| select元素 | |
|---|---|
| 元素類型 | 短語元素 |
| 允許具有的父元素 | 任何可以包含短語元素的元素 |
| 局部屬性 | name 、disabled 、form 、size 、multiple 、autofocus和required |
| 內容 | option和optgroup元素 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | form 、autofocus和required屬性是HTML5新增的 |
| 習慣樣式 | 無，該元素的外觀因平臺和瀏覽器而異 |
optgroup元素可以用來在select元素的內容中建立一定的結構。
| optgroup元素 | |
|---|---|
| 元素類型 | 無 |
| 允許具有的父元素 | select元素 |
| 局部屬性 | label 、disabled |
| 內容 | option元素 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | 無 |
例子：
<!--設置size屬性可讓select元素顯示多個選項，
設置multiple屬性則可讓用戶一次選擇多個選項-->
-->
<select id="fave" name="fave" size="5" multiple>
<!--optgroup元素的用途是對option元素進行編組
label屬性可用來爲整組選項提供一個小標題。
disabled屬性可用來阻止選擇組內的任何選項。-->
<optgroup label="Top Choices">
<!--提供給用戶的選項由option元素定義
設置了selected屬性以便在頁面顯示出來時被自動選中-->
<option value="apples" label="Apples">Apples</option>
<option value="oranges" label="Oranges">Oranges</option>
</optgroup>
<optgroup label="Others">
<option value="cherries" label="Cherries">Cherries</option>
<option value="pears" label="Pears">Pears</option>
</optgroup>
</select>1.2 輸入多行文字
textarea元素生成的是多行文本框，用戶可以在裏面輸入多行文字
| textarea元素 | |
|---|---|
| 元素類型 | 短語元素 |
| 允許具有的父元素 | 任何可以包含短語元素的元素，但通常是form元素 |
| 局部屬性 | name 、disabled 、form 、readonly 、maxlength 、autofocus 、required 、placeholder 、dirname 、rows 、wrap和cols |
| 內容 | 文本，也即該元素的內容 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | form、autofocus 、required 、placeholder和wrap屬性HTML5新增的 |
| 習慣樣式 | 無 |
1. rows 和cols屬性可用來設置其大小
2. wrap屬性有兩個值： hard和soft, 可用來控制在用戶輸入的文字中插入換行符的方式
例子：
<textarea cols="20" rows="5" wrap="hard" id="story"
name="story">
Tell us why this is your favorite fruit
</textarea> 1.3 表示計算結果
| output元素 | |
|---|---|
| 元素類型 | 短語元素 |
| 允許具有的父元素 | 任何可以包含短語元素的元素 |
| 局部屬性 | name 、form 、for |
| 內容 | 短語內容 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 是 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | output { display: inline; } |
例子：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--添加2個值相乘事件-->
<form oninput="res.value = quant.valueAsNumber * price.valueAsNumber">
<fieldset>
<legend>Price Calculator</legend>
<input type="number" placeholder="Quantity" id="quant" name="quant" /> x
<input type="number" placeholder="Price" id="price" name="price" /> =
<!--使用for屬性關聯2個input元素-->
<output for="quant name" name="res" />
</fieldset>
</form>
</body>
</html>
1.4 生成公開/私有密鑰對
提交表單時，keygen元素會生成一對新的密鑰。公鑰被髮給服務器， 而私鑰則由瀏覽器保留並存入用戶的密鑰倉庫。
| keygen元素 | |
|---|---|
| 元素類型 | 短語元素 |
| 允許具有的父元素 | 任何可以包含短語元素的元素 |
| 局部屬性 | challenge 、keytype 、autofocus 、name 、disabled和form |
| 內容 | 無 |
| 標籤用法 | 虛元素形式 |
| 是否爲HTML5新增 | 是 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | 無 |
1. keytype屬性的用途是指定用來生成密鑰對的算法，不過它支持的值只有RSA一種
2. challenge屬性用來指定一條於公鑰一起發送給服務器的密鑰管理口令
2 使用輸入驗證
對輸入驗證的支持
| 驗證屬性 | 元素 |
|---|---|
| required | textarea 、select、input ( text 、password、checkbox 、radio 、file 、datetime 、datetime-local 、date 、month 、time 、week 、nunber , email 、url 、search及tel型） |
| min、max | input ( datetime 、datetime- local 、date 、month 、time 、week 、number及range型） |
| pattern | input ( text 、password 、email 、url 、search及tel型） |
2.1 確保用戶提供了一個值
required屬性可以檢查用戶是否提供了一個值
例子：
<input type="text" required id="name" name="name"/>2.2 確保輸入值位於某個範圍內
min和max屬性可以用來確保輸入的數值和日期數據處於指定的範圍內
例子：
<input type="number" min="0" max="100"
value="1" id="price" name="price"/>只有用戶輸入一個值後min和max屬性控制的輸入驗證纔會起作用 。設置該屬性的文本框空着的時候瀏覽器也允許用戶提交表單
2.3 確保輸入值與指定模式匹配
pattern屬性可以用來確保輸入值與一個正則表達式匹配
例子：
<input type="text" id="name" name="name" pattern="^.* .*$"/>只有用戶輸入一個值後pattern屬性控制的輸入檢驗纔會起作用。設置該屬性的文本框空着的時候瀏覽器也允許用戶提交表單
3 禁用輸入驗證
要想不經輸入驗證就能提交表單，可以設置form元素的novalidate屬性，也可以設置用來提交表單的button或input元素的formnovalidate屬性。
例子：
<form method="post" novalidate>
<input type="submit" value="Save" formnovalidate />
</form>