« 79. 如何設計 textarea:文字輸入區塊? | (回到Blog入口) | 81. 如何設計 radio box:選擇鈕? »

80. 如何設計 checkbox:核對盒?

jollen 發表於 October 27, 2006 9:56 PM

checkbox 是所謂的核對盒,當核對盒被勾選,submit 表單時,就會送出 name=value 的資料給伺服器。

checkbox 表單輸入欄位範例:

<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>checkbox 輸入表單測試</title> </head>
<body>
<form method="post" action="checkbox.php"> <p>請選擇您的興趣?</p> <table border="0" width="28%"> <tr> <td width="14%" bgcolor="#DFDFDF" align="center"><input type="checkbox" name="interest[program]" value="程式寫作"> </td> <td width="86%">
程式寫作 </td> </tr> <tr> <td width="14%" bgcolor="#DFDFDF" align="center"><input type="checkbox" name="interest[music]" value="音樂"> </td> <td width="86%"> 音樂 </td> </tr> <tr> <td width="14%" bgcolor="#DFDFDF" align="center"><input type="checkbox" name="interest[coffee]" value="咖啡">
</td> <td width="86%"> 咖啡</td> </tr> <tr> <td width="14%" bgcolor="#DFDFDF" align="center"><input type="checkbox" name="interest[research]" value="專題研究">
</td> <td width="86%">專題研究</td> </tr> <tr> <td width="14%" bgcolor="#DFDFDF" align="center"><input type="checkbox" name="interest[movies]" value="電影">
</td> <td width="86%">電影</td> </tr> </table> </form>
</body> </html>

php
圖: checkbox 核對盒輸入欄位

核對盒最大的特色在於處理複選的情形,因為 name 的部份可以使用陣列來加以維護,例如上面的範例。

讀取 checkbox 個別項目的資料和處理陣列的方法一樣。範例:

<?php
echo "Your interest(s):<br>\n"; for (reset($interest); $k = key($interest); next($interest) echo "{$interest[$k]}<br>\n";
?>

另外,也可以使用 PHP 的 foreach 敘述來處理。範例:

<?php
echo "Your interest(s):<br>\n"; foreach ($interest as $value) echo "$value<br>\n";
?>

Jollen 建議,當使用核對盒時,都以陣列的方法來為 name 命名,然後使用上面範例的方法來處理所有被選取的核對盒。

--jollen

版權聲明

請參閱頁面底部的 CC 授權條款。此外,Jollen's PHP 專欄禁止引用、修改與轉貼,如果您想與朋友分享的話,我們只允許網站連結(hyperlink)的形式。

發表一個評論

(如果你此前從未在此 Blog 上發表過評論,則你的評論必須在 Blog 主人驗證後才能顯示,請你耐心等候。)

| Top | Jollen's Forum |
Jollen's PHP 專欄採用 Attribution-NonCommercial-NoDerivs 2.5 授權條款
Copyright(c) 2001-2007,2010 www.jollen.org