千呼萬喚 HTML 5 (7) - 表單元素
作者：webabcd
介紹
HTML 5: 表單元素
- 表單元素 - form, label, button, select, option, optgroup, datalist, textarea, fieldset, legend, progress, meter, keygen, output
- 表單驗證
示例
1、form - 表單
element/form/form.html
<!doctype html>
<html>
<head>
<title>form</title>
</head>
<body>
<!--
form - 表單，用於提交子元素數據到服務端
accept-charset - 指定提交數據的編碼格式
action - 提交的目標地址
autocomplete - 是否對所有子元素啟用自動完成功能（on 或 off）
enctype - 編碼類型（application/x-www-form-urlencoded 或 multipart/form-data 或 text/plain）
method - form 的 method（默認是 GET）
name - form 的 name
novalidate - 提交時是否不需要驗證，boolean 類型
target - form 的 target
-->
<form action="#">
<input type="text" name="txt" value="webabcd" />
<input type="submit" name="btn" value="submit" />
</form>
</body>
</html>
2、label - 關聯其它元素
element/form/label.html
<!doctype html>
<html>
<head>
<title>label</title>
</head>
<body>
<!--
label - 關聯其它元素
form - 指定 label 所屬的表單，多個用空格分開
for - 關聯元素的 id
DOM
form, htmlFor
control - 返回 label 所關聯的元素
-->
<label><input type="checkbox" /> checkbox title</label>
<br />
<input id="chk" type="checkbox" />
<label id="lbl" for="chk">checkbox title</label>
<script type="text/javascript">
var lbl = document.getElementById("lbl");
alert(document.getElementById("lbl").htmlFor);
alert(document.getElementById("lbl").control.outerHTML);
</script>
</body>
</html>
3、button - 按鈕元素
element/form/button.html
<!doctype html>
<html>
<head>
<title>button</title>
</head>
<body>
<!--
button - 按鈕元素
autofocus - 頁面加載后是否自動置為焦點，boolean 類型
disabled - 是否無效，boolean 類型
form - 指定關聯的 form 的 id
formaction - 指定關聯 form 的 action
formenctype - 指定關聯 form 的編碼類型
formmethod - 指定關聯 form 的 method
formnovalidate - 指定關聯 form 在提交時是否不需要驗證，boolean 類型
formtarget - 指定關聯 form 的 target
type - 按鈕類型（button 或 submit 或 reset）
-->
<button type="button">button</button>
</body>
</html>
4、select - 下拉列表框元素, option - 選項, optgroup - 選項組
element/form/select_option_optgroup.html
<!doctype html>
<html>
<head>
<title>select option optgroup</title>
</head>
<body>
<!--
select - 下拉列表框元素
autofocus, disabled, form, name, required, size
multiple - 是否可多選，boolean 類型
option - 選項
disabled, label, selected, value
optgroup - 選項組
disabled, label
-->
<select>
<option value="1" label="aaa" />
<option value="2" label="bbb" />
<option value="3" label="ccc" selected />
<option value="4" label="ddd" />
<option value="5" label="eee" />
</select>
<select multiple>
<option value="1">aaa</option>
<option value="2">bbb </option>
<option value="3" selected>ccc</option>
<option value="4" selected>ddd</option>
<option value="5">eee </option>
</select>
<select>
<optgroup label="optgroup 1">
<option value="1">aaa</option>
<option value="2">bbb </option>
</optgroup>
<optgroup label="optgroup 2">
<option value="3">ccc</option>
<option value="4">ddd </option>
</optgroup>
<optgroup label="optgroup 3">
<option value="5" selected>eee</option>
<option value="6">fff </option>
</optgroup>
</select>
</body>
</html>
5、datalist - 數據列表元素, option - 數據項
element/form/datalist_option.html
<!doctype html>
<html>
<head>
<title>datalist option</title>
</head>
<body>
<!--
datalist - 數據列表元素
option - 數據項
value - 數據項的值
label - 數據項的說明
-->
<input type="email" list="contacts" />
<datalist id="contacts">
<option value="aabb@aa.com" label="張三" />
<option value="ccdd@cc.com" label="李四" />
<option value="eeff@ee.com" label="王五" />
</datalist>
</body>
</html>
6、textarea - 文本區域元素
element/form/textarea.html
<!doctype html>
<html>
<head>
<title>textarea</title>
</head>
<body>
<!--
textarea - 文本區域元素
autofocus, dirname, disabled, maxlength, name, placeholder, readonly, required - 參考 /element/form/input/_attributes.html
cols - 顯示的列數（單位：字符數）
rows - 顯示的行數（單位：字符數）
wrap - 換行方式
soft - 需要換行則換行（相當於 wrap）
hard - 強制不換行（相當於 nowrap）
-->
<textarea cols="3" rows="3">
aaabbbccc
</textarea>
</body>
</html>
7、fieldset - 用於定義一個區域, legend - 用於定義一個區域的標題，它是 fieldset 的第一個子元素
element/form/fieldset_legend.html
<!doctype html>
<html>
<head>
<title>fieldset legend</title>
</head>
<body>
<!--
fieldset - 用於定義一個區域
form - 指定所屬表單，多個用空格分開
disabled - 是否無效（Opera 支持此標准）
legend - 用於定義一個區域的標題，它是 fieldset 的第一個子元素
-->
<fieldset disabled>
<legend>
<label>
<input type="checkbox" /> title
</label>
</legend>
<p>
p1
</p>
<p>
p2
</p>
<p>
p3
</p>
</fieldset>
</body>
</html>
8、progress - 進度元素
element/form/progress.html
<!doctype html>
<html>
<head>
<title>progress</title>
</head>
<body>
<!--
progress - 進度元素
value - 當前進度值
max - 進度的最大值
form - 對應的 form 的 id
-->
<progress id="progress" max="100"></progress>
<script type="text/javascript">
var progressBar = document.getElementById('progress');
progressBar.value = 10;
</script>
</body>
</html>
9、meter - 用來表示一個范圍已知且可度量的值
element/form/meter.html
<!doctype html>
<html>
<head>
<title>meter</title>
</head>
<body>
<!--
meter - 用來表示一個范圍已知且可度量的值
form - 對應的 form 的 id
value - 當前值
min - 最小值
max - 最大值
low - 低水平的值
high - 高水平的值
optimum - 最適宜的值
-->
<span>血糖含量：</span>
<meter value="60" min="0" max="100" low="20" high="80" optimum="50" />
</body>
</html>
10、keygen - 呈現出一個鍵值對生成器，提交表單后，公鑰發往服務端，私鑰保存在客戶端
element/form/keygen.html
<!doctype html>
<html>
<head>
<title>keygen</title>
</head>
<body>
<!--
keygen - 呈現出一個鍵值對生成器，提交表單后，公鑰發往服務端，私鑰保存在客戶端
autofocus, challenge, disabled, form, keytype
-->
<keygen />
</body>
</html>
11、output - 用於呈現計算結果
element/form/output.html
<!doctype html>
<html>
<head>
<title>output</title>
</head>
<body>
<!--
output - 用於呈現計算結果（必須要有起始和結束標記）
form, name
for - 關聯元素的 id，可以有多個
-->
<output id="output"></output>
<script type="text/javascript">
document.getElementById("output").value = 10 * 10;
</script>
</body>
</html>
12、表單驗證
element/form/_validate.html
<!doctype html>
<html>
<head>
<title>表單驗證</title>
</head>
<body>
<!--
表單驗證（Opera 支持此標准）
required - 指定是否為必填元素
pattern - 用指定的正則表達式對 input 的值做驗證
url, email, number 等有驗證功能的元素
element.validity - 返回驗證狀態，ValidityState 對象
ValidityState - 驗證狀態對象
valid - 是否通過了驗證（以下 8 個值都為 false，則此值為 true），boolean 類型
valueMissing - 是否沒有值（對應的元素如果設置為必填但沒有值的時候，此值為 true），boolean 類型
typeMismatch - 是否值的類型與期望類型不匹配，boolean 類型
patternMismatch - 是否正則表達式驗證失敗，boolean 類型
tooLong - 是否字符過多，boolean 類型
rangeUnderflow - 是否比預設的最小值還要小，boolean 類型
rangeOverflow - 是否比預設的最大值還要大，boolean 類型
stepMismatch - 是否不匹配 step 的設置（比如 step 為 3，那么如果值要匹配 step 的話，則一定要為 3 的倍數），boolean 類型
customError - 是否有自定義錯誤信息，boolean 類型
element.setCustomValidity("錯誤信息") - 用於指定自定義的錯誤信息
element.setCustomValidity("") - 用於清除自定義的錯誤信息
-->
<form action="#">
<input type="text" name="txt" id="txt" required />
<input type="email" name="email" id="email" />
<input type="submit" name="btn" value="submit" />
<br />
<input type="button" value="驗證 email 元素" onclick="validateEmail();" />
</form>
<script type="text/javascript">
function validateEmail() {
var email = document.getElementById("email");
var validityState = email.validity;
alert
(
validityState.valid + "\n" +
validityState.valueMissing + "\n" +
validityState.typeMismatch + "\n" +
validityState.patternMismatch + "\n" +
validityState.tooLong + "\n" +
validityState.rangeUnderflow + "\n" +
validityState.rangeOverflow + "\n" +
validityState.stepMismatch + "\n" +
validityState.customError
);
}
</script>
</body>
</html>
OK
[源碼下載]