HTML表單部分學習筆記

第一部分：

    <!--
        action ：指定處理提交表單的格式
        method ：指定提交表單的http方法
        enctype：指明用來把表單提交給服務器時的互聯網媒體形式
    -->
    <form action="url" method="get|post" enctype="mine">
    <!--
        表單是一個包含表單元素的區域，經過添加不一樣的表單元素，將顯式不一樣的效果
    -->
        <br><input type="text" name="user">
        <br><input type="password" name="password">
        <br><input type="submit" name="login">
    </form>

 

單行文本輸入框：

    <form>
        <!--
            type="text"    ：定義單行文本輸入框
            name        ：定義文本框的名字，要保證數據的準確採集，必須定義獨一無二的名稱。
            size        ：定義文本框的寬度，單位是當個字符的寬度
            maxlength    ：定義最多可以輸入的字符數
            value        ：定義文本框的初始值
        -->
        <input type="text" name="yourname" size="20" maxlength="15">
    </form>

 

多行文本輸入框：

    <form>
        <!--
            name：定義多行文本框的名字，要保證數據的準確採集，必須定義獨一無二的名稱。
            cols：定義多行文本框的寬度，單位是單個字符的寬度
            rows：定義多行文本框的高度，單位是單個字符的高度
            wrap：定義輸入內容導入文本域時的顯示方式
        -->
        <textarea name="yourworks" cols="50" rows="5" wrap=""></textarea>
    </form>

 

input標籤的整理：

    <form>
        <!--
            input標籤的type屬性：
                text：單行文本輸入框
                password：密碼域
                radio：單選按鈕
                checkbox：複選框按鈕
                button：普通按鈕
                submit：提交按鈕
                reset：重置按鈕
        -->
        <!--
            url:用於說明網站強制，顯示爲在一個文本框中輸入url地址，提交時表單會自動驗證url的值
            email：用於讓瀏覽者輸入email地址，提交時表單會自動驗證email域的值
        -->
        <input type="url">
        <input type="email">
        <!--
            HTML5新增了一些日期和時間輸入類型，其中包括
                date ：選取日月年
                month：選取日年
                week ：選取週年
                time ：選取時間
                datetime：選取時間日月年
                datetime-local：選取時間日月年，本地時間
        -->
        <input type="date"><br>
        <input type="month"><br>
        <input type="week"><br>
        <input type="time"><br>
        <input type="datetime"><br>
        <input type="datetime-local"><br>
        
        <!--
            range：能夠顯示一個滾動的空間，可用max，min和step設置控件的範圍
            number：提供一個輸入數字的輸入類型，用戶能夠直接輸入數字或者經過單價微調框中的按鈕選擇數字
            爲空）
        -->
        <input type="range" name="fir" max="10" min="1" step="1"><br>
        <input type="number" name="sec" max="10" min="1" step="2"><br>
        
        <!--
            required屬性：規定必須在提交之間填寫輸入域（不能爲空）。required屬性適用於text，search，url，email，password，date，pickers，number，checkbox，radio等
        -->
        <input type="text" name="user" required="required"><br>
        <input type="password" name="pwd" required="required"><br>
    </form>

 

多行選擇列表：

    <form>
        <!--
            選擇列表標記
                size：定義選擇列表的行數
                multiple：表示能夠多選（按住ctrl鍵多選）
                value：定義選擇項的值
                selected：即是默認已經選擇本項
        -->
        <select name="fruit" size="3" multiple>
            <option value="A">A
            <option value="B">B
            <option value="C">C
            <option value="D">D
        </select>    
    </form>