表單簡介

表單標籤對‘<form>’是一個“塊級元素”。表單標籤的內容通常是“表單元素”+“提交按鈕”的形式。它雖然和‘<div>’標籤一樣屬於“塊級元素”，但它卻有自己的實際用處，也就是若不將“表單元素”放置於表單標籤‘<form>’中，那某些表單元素將會失效，如：“提交”按鈕和“重置”按鈕。

表單屬性

• name：規定表單的名稱

• action：規定當提交表單時向何處傳送表單資料，它的屬性值應該是一個“URL”

• method：規定用於傳送 form-data 的 HTTP 方法，值為：get/post

• target：規定在何處開啟“action”中設定的URL。有以下值（_blank、_self、_parent、_top、frame的name）

• enctype：規定在傳送到伺服器之前應該如何對錶單資料進行編碼，有以下值：

  • application/x-www-form-urlencoded（預設，在傳送前編碼所有字元）；
  • multipart/form-data（不對字元編碼，在使用包含檔案上傳控制元件的表單時，必須使用該值；
  • text/plain（空格轉換為 “+” 加號，但不對特殊字元編碼）；

• autocomplete：規定是否啟用表單的自動完成功能，有以下值：on/off

• novalidate：如果使用該屬性，則提交表單時不進行html5自帶的驗證。

‘label’標籤

表單中用於顯示錶單欄位的標籤，可以讓使用者知道該行表單元素的作用，它屬於“行級元素”。和‘<span>

<form>
    <label>賬號：</label><br>
    <label>密碼：</label><br>
</form>

呈現效果如下：

‘textarea’標籤

‘<textarea>’標籤是一個可以輸入多行文字的標籤對，它同樣是一個“行內塊級標籤”。

textarea 標籤常用屬性

• cols：設定行數

• rows：設定列數

• placeholder：設定佔位符

程式碼示例

<form>
    <textarea rows="5" cols="30" placeholder="請輸入您的個性簽名"></textarea>
</form>

呈現效果：

‘select’標籤

通過‘<select>’標籤可以建立單選和多選的下拉選單。可以通過“size”屬性設定該標籤在一個選項選單中可見的選項個數，當它的值設為“1”時，將顯示為預設的‘<select>’下拉選單的樣式，‘<option>’是它必須的子選單，否則將不能提供任何可選項，而‘<option>’標籤通常需要具有一個“value”屬性，以便於在做資料操作時能準確地通過該屬性值取到對應標籤的內容。

‘select’標籤常用屬性

• autofocus： 規定在頁面載入後文本區域自動獲得焦點。

• disabled：規定禁用該下拉列表。

• multiple：規定可以選擇多個選項。

• name：規定下拉列表的名稱。

• required：規定文字域是必填的。

程式碼示例

<form>
    <label>請選擇您喜歡的城市：</label>
    <select required="required" multiple="multiple">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">杭州</option>
        <option value="4">成都</option>
    </select>
</form>

‘selected’屬性

如果想要預設選中某一項，則為‘option’標籤新增‘selected’屬性即可。

‘select’分組

分組下拉選單，將‘optgroup’標籤巢狀在‘select’標籤中，併為其指定‘label’屬性設定組標題，再將‘option’標籤巢狀在‘optgroup’標籤中即可，如下所示：

<form>
    <label>中午吃什麼呢：</label>
    <select>
        <optgroup label="西餐">
            <option value="1">牛排</option>
            <option value="2">披薩</option>
        </optgroup>
        <optgroup label="中餐">
            <option value="3">麻婆豆腐</option>
            <option value="4">青椒肉絲</option>
            <option value="5">螞蟻上樹</option>
        </optgroup>
        <optgroup label="快餐">
            <option value="6">阿米巴巴</option>
            <option value="7">大米先生</option>
            <option value="8">順旺基</option>
        </optgroup>
    </select>
</form>

提示：size 屬性可以指定顯示的列表個數，當顯示個數小於實際選單項時以滾動顯示呈現；

‘dataList’標籤

‘<datalist>’需要配合一個屬性為“list”的‘<input>’標籤使用，通過將list的屬性值設定為‘<datalist>’標籤的“ID”屬性的值來實現關聯，實現出一個既可輸入，又可選擇的下拉選單。當然，IE瀏覽器不支援該元素。

程式碼示例：

<form>
    <input type="text" list="citys" placeholder="請輸入或選擇您喜歡的城市" size="30">
    <datalist id="citys">
        <option value="北京"></option>
        <option value="上海"></option>
        <option value="成都"></option>
        <option value="杭州"></option>
        <option value="三亞"></option>
    </datalist>
</form>

‘button’標籤

‘button’標籤對和其它表單元素一樣，同是屬於“行內塊元素”。

‘button’標籤常用屬性

• type：指定按鈕型別，其值包括：button（普通按鈕）/submit（提交按鈕）/reset（重置按鈕）

程式碼示例

<form>
    <button type="button">普通按鈕</button>
    <button type="submit">提交按鈕</button>
    <button type="reset">重置按鈕</button>
</form>

效果呈現

‘output’ 標籤

• ‘for’ 屬性關聯‘input’的‘id’屬性值，如果有多個則以空格隔開；

• 為‘form’標籤新增‘oninput’屬性，根據公式拼接出輸出內容；

• 如果需要轉換為數字，則使用‘parseInt()’進行轉換；

程式碼示例：

<form oninput="result.value = parseInt(rangeVal.value)">
    <label>0</label>
    <input type="range" min="0" max="10" step="2" id="rangeVal">
    <label>10</label>
    <br>
    <label>您選擇的值是：</label>
    <output name="result" for="rangeVal"></output>
</form>

‘input’標籤

‘input’標籤是一個沒有內容的標籤，按照佈局型別它屬於“行內塊級元素”，它是通過設定屬性及屬性值來決定它的顯示型別的

‘input’標籤常用屬性

• type：指定input型別

• autocomplete：設定是否自動完成，其值為：on/off

• autofocus：規定輸入欄位在頁面載入時是否獲得焦點，不適用於type= ‘hidden’

• checked：預設選擇，對type值為‘checkbox’及‘radio’有效

• disabled：禁用

• size：設定輸入欄位的寬度

• maxlength：設定輸入欄位的最大長度

• width：設定寬度，（適用於 type=‘image’）

• height：設定高度，（適用於 type=‘image’）

• step：設定輸入欄位合法數字間隔

• required：表示輸入欄位為必需

• readonly：表示只讀

• placeholder：設定輸入框的佔位符

• pattern：規定輸入欄位的值的模式或格式。例如 pattern=‘[0-9]’表示輸入值必須是 0 與 9 之間的數字。

• multiple：如果使用該屬性，則允許一個以上的值，適用於‘select’及‘datalist’

• min：設定輸入欄位的最小值

• max：這是輸入欄位的最大值

• list：引用包含輸入欄位的預定義選項的 datalist 。

• value：設定input的值

‘type’屬性值

• text：普通輸入框

• password：密碼輸入框

• radio：單選寬

• checkbox：多選框

• file：檔案

• button：普通按鈕

• submit：提交按鈕

• reset：重置按鈕

• image：圖片按鈕

• hidden：隱藏域

• email：郵箱輸入框

• url：資源地址

• search：搜尋框

• number：數值輸入控制元件

• tel：電話號碼

• range：數值選擇範圍控制元件

• date：日期選擇控制元件

• month：月份選擇控制元件

• week：周選擇控制元件

• time：時間選擇控制元件

• datetime：日期時間選擇控制元件

• datetime-local：本地日期時間選擇控制元件

• color：顏色選擇控制元件

對錶單元素編組

對於一些複雜的表單，有時需要將一些元素組織在一起，為此可以使用‘fieldset’元素。在每一個‘fieldset’元素中新增一個‘legend’元素即可新增表單相關說明，‘legend’元素必須是fieldset元素的第一個子元素，用法類似於‘details’元素與‘summary’元素的關係。

程式碼示例：

<form>
    <fieldset>
        <legend>Enter Your Info</legend>
        <label>賬號：</label><input type="text" name=""><br><br>
        <label>密碼：</label><input type="passowrd" name=""><br><br>
    </fieldset>
    <fieldset>
        <legend>Enter Your Hobby</legend>
        <label>#1：</label><label>賬號：</label><input type="text" name=""><br><br>
        <label>#2：</label><label>賬號：</label><input type="text" name=""><br><br>
        <label>#3：</label><label>賬號：</label><input type="text" name=""><br><br>
    </fieldset>
</form>

顯示效果：