HTML 表單中的 checkbox 核取方塊設計

HTML 表單中的 checkbox 核取方塊的功能是用來設計複選的網頁表單,例如提供給網友勾選興趣的表單,也許一次勾選好幾種興趣,就可以用 HTML 表單預設的 checkbox 核取方塊來製作。HTML 表單有三種常見的選單功能,分別是 select option 下拉選單radio button 選項按鈕以及本篇介紹的 checkbox 核取方塊,其中只有 checkbox 核取方塊能夠一次做出多選的功能,而 select option 下拉選單radio button 選項按鈕都要使用多組才能做出多選效果,以下我們就來看看 checkbox 核取方塊的語法規則以及實際範例。

HTML checkbox 語法規則

HTML 的 checkbox 核取方塊的 type 必須要用 checkbox,同一個表單可以使用多個不同的 checkbox,每一個 checkbox 的 name 與 value 都應該要與其他的 checkbox 不一樣,這樣當網有勾選好並送出表單後,負責接收表單資料的 PHP 程式才有辦法判斷網友都選的是哪幾個項目,我們寫個簡單的 checkbox 範例給各位讀者朋友們參考。

HTML checkbox 實際範例

輸出結果
你最喜歡吃什麼水果
蘋果
香蕉
橘子
範例在一個 HTML 表單中寫了一個簡單的問題,並提供三個不同的選項給網友勾選,每個選項都是用 checkbox 來製作,可以看到三個選項的 type 都是 checkbox,差別在選項值 value 與選項名稱 name,當網友勾選任何一個選項或多個選項,送出這個表單,後端的 test.php 就可以接收到網友勾選了哪幾個項目,這就是 HTML checkbox 的基本用法。

關於表單的設計規則請參閱《HTML Form 表單設計》篇的詳細介紹。

如果你想要找的是單選的選單功能,請參閱:HTML radio button 選項按鈕設計

更多 HTML Form 表單元素
分享於 2014-12-15 - 更新於 2017-07-31