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

来源：互联网发布：2016淘宝开店要钱吗编辑：程序博客网时间：2024/05/17 07:11

原文地址：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 的 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
[源码下载]