12.表單元素詳解

表單元素詳解

form元素：瀏覽器在網頁上專門用來劃分出一個用來存儲表單元素的區域
form是塊元素
form標籤的action屬性內部是一個連接，指向的是提交表單時向哪個服務器地址發送表單數據。
form標籤的method屬性內部存儲着，該表單向目標服務器傳輸數據時採用的是哪種方式

**input元素：**在 form 元素中使用，用來展示用戶可以輸入數據的元素。input標籤最終的表現形式和傳輸至服務器的數據類型，取決於 type 屬性。
input是行內塊元素
input標籤的type屬性內部是存儲着該input元素輸入信息的類別（如，文字，單選，郵箱，電話號碼，多選框等）
form標籤的name屬性內部存儲着該input元素的名稱，此處的名稱與class不同

文字信息輸入：type=“text”，
此時input的展示形狀爲一個輸入框
用戶輸入的信息會在框內顯示出來

佔位符：placeholder=“請輸入用戶名”
佔位符的作用是在用戶尚未輸入信息時，在輸入框中顯示提示信息，該信息在用戶點擊
輸入框並輸入任意信息後會自動消失

input元素（密碼輸入）

密碼信息輸入：type=“password”
此時input的展示形狀爲一個輸入框
用戶輸入的信息會被加密，不會顯示原始文字信息

佔位符：placeholder=“請輸入密碼”
佔位符的作用是在用戶尚未輸入信息時，在輸入框中顯示提示信息，該信息在用戶點擊
輸入框並輸入任意信息後會自動消失

數字信息輸入：type=“number”
此時input的展示形狀爲一個輸入框,當鼠標懸浮在元素上時，此處會顯示一個上下調整的按鈕，可用來選擇具體數字

步長：step=“10”
步長的作用是，當用戶點擊上下調整的按鈕時，數字每次加減的數字，比如step=“10”,那麼每次點擊就是±10

滑塊

type="range"滑塊

        <input type="range" min="0" max="99">

日期

<!-- 日期 -->
        <!-- 時分：type="time" -->
        <br>
        <input type="time">
        <!-- 日期：type="date" -->
        <br>
        <input type="date">
        <input type="month">
        <input type="week">
        <input type="datetime-local">

單選按鈕

   <!-- type="radio"單選按鈕 -->
        <!-- 單選聯動：相同的name -->
        <!-- checked：默認選中狀態 -->
        <br>
        性別是：
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2" >女

你們愛我嘛？
        <input type="radio" name="love" id="love01">
        <label for="love01" class="label01">我們愛你</label> lable標籤與id進行綁定
        <input type="radio" name="love">我們很愛你
        <input type="radio" name="love">我們非常愛你

複選按鈕

 <!-- type="checkbox"複選按鈕 -->
        <!-- 後端接收的是鍵值對：name === value -->
        <br>
        喜歡什麼水果？
        <!-- pt === on -->
        <input type="checkbox" name="pt" value="on">葡萄
        <input type="checkbox" name="cm" value="on">草莓
        <input type="checkbox" name="clz" value="on">車釐子
        <input type="checkbox" name="ll" value="on">榴蓮

buttom按鈕

  <!-- button專職按鈕 -->
    <button>點我點我快點我</button>

下拉列表

 <!-- 下拉列表 -->
    <!-- selected默認選中項 -->
    <select name="month" id="">
        <option value="0" selected>-請選擇月份-</option>
        <optgroup label="一季度">
            <option value="1月">1月</option>
            <option value="2月">2月</option>
            <option value="3月">3月</option>
        </optgroup>
        <optgroup value="" label="二季度">
            <option value="4月">4月</option>
            <option value="5月">5月</option>
            <option value="6月">6月</option>
        </optgroup>
        <optgroup value="" label="三季度">
            <option value="1月">7月</option>
            <option value="2月">8月</option>
            <option value="3月">9月</option>
        </optgroup>
    </select>

textarea區域

textarea元素：創造一個文本輸入區域，rows屬性表示這個文本輸入區域默認的高，cols屬性表示這個文本輸入區域默認的寬，這裏的寬高值得是字符。區域中可以輸入任意個文字，超出會有滾動鍵。

fildset表單

<fieldset>
        <legend>&nbsp;性別&nbsp;</legend>
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2" >女
        <input type="radio" name="sex" value="0" checked>泰國來的
</fieldset>