表單核取方塊 checkbox

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

表單核取方塊 checkbox 基本語法
<input type="checkbox" name="" value="">
開頭的 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 判斷網友是否有勾選該項目,此為相當普遍的表單多選項目的製作方式。

延伸閱讀
© Copyright webtech.tw Since 2010