HTML 5深入淺出教學篇之七

作者：webabcd 2012-05-30 15:17:54

本文講到的是HTML 5表單元素form, label, button, select, option, optgroup, datalist, textarea, fieldset, legend, progress, meter, keygen, output的使用

介紹

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

責任編輯：張偉來源： webabcd的博客

HTML5