介绍
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>
#p#
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>
#p#
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>
原文链接：http://www.cnblogs.com/webabcd/archive/2012/02/08/2342275.html
