表單核取方塊 checkbox

表單核取方塊 checkbox 呈現的是一種多選的模式，舉例來說，希望網友勾選他們的興趣，一次可以複選三種，或是購物清單需要哪幾種規格，一次勾選起來，都可以使用核取方塊來製作，與核取方塊的多選特性相對應的表單功能，有下拉選單 select option 以及選項按鈕 radio buttons 這兩種，兩者都僅能製作單選的結果，若您希望網友一次多選擇幾的項目，請用 checkbox。

表單核取方塊 checkbox 基本語法

開頭的 input type="checkbox" 是宣告一個選項按鈕，name 是選項的名稱，value 是選項的值，每一個 checkbox 的名稱可以是相同的，這樣就是一整組，若選項的 name 不同，就是不同一組的，設計師可依照實際情況而決定 name 的編排。

表單核取方塊 checkbox 範例

<form>
請勾選您想購買的項目<br>
<input type="checkbox" value="1" name="Product_1"> 商品 1<br>
<input type="checkbox" value="2" name="Product_2"> 商品 2<br>
<input type="checkbox" value="3" name="Product_3"> 商品 3<br>
</form>

範例呈現結果

請勾選您想購買的項目
商品 1
商品 2
商品 3

由範例結果可以得知，網友一次可以勾選 1~3 個項目，當勾選完成並送出表單之後，後端的 script 就可以根據每個 checkbox 的 name 與 value 判斷網友是否有勾選該項目，此為相當普遍的表單多選項目的製作方式。

延伸閱讀