千呼万唤 HTML 5 (7) - 表单元素
千呼万唤 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
[源码下载]
