千呼万唤 HTML 5 (7) - 表单元素_综合

原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/08/2342275.html

作者：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 的 namenovalidate - 提交时是否不需要验证，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 - 关联元素的 idDOMform, htmlForcontrol - 返回 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 的 idformaction - 指定关联 form 的 actionformenctype - 指定关联 form 的编码类型formmethod - 指定关联 form 的 methodformnovalidate - 指定关联 form 在提交时是否不需要验证，boolean 类型formtarget - 指定关联 form 的 targettype - 按钮类型（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, sizemultiple - 是否可多选，boolean 类型option - 选项disabled, label, selected, valueoptgroup - 选项组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.htmlcols - 显示的列数（单位：字符数）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 的 idvalue - 当前值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, namefor - 关联元素的 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
[源码下载]