Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>JavaScript 表单

JavaScript 表单

时间：2006-07-14 来源：pascal4123

第 13 章　Form and validation

德嘉書業 / 德嘉資訊科技 (www.takka.com.hk)　作者: 伍新華 Email: [email protected]

13.5　使用 <textarea>

　　請你參看本出版社郵購網頁中的 form, 這網頁的計算部份是用 JavaScript 寫成。

13.1　Form object

1.　Form 的用途

　　Form 在文書處理器中一般譯作 "表單" 或 "填表", 在網頁中, form (表單) 有三個用途:

(1)　造出文字框或按鈕作為操作工具, 例如用按鈕來啟動 function 或 method。

(2)　設定一些可讓觀看者輸入資料的元件, 例如文字框、下拉式選項、圓鈕選項等等。

(3)　使用 submit 的功能將觀看者的選擇或填入的資料送回指定的地址。

　　這一章主要是說 form 在上述的 (2) 及 (3) 的操作, 另會說到如何使用 JavaScript 來作 validation。

2.　Validation

　　Validation 中文可譯作驗証, 是檢查輸入的資料是否有錯, 例如觀看者輸入的電話號碼, 應該是 8 個位的數字, 若 validation 發現是 7 個位或以下的數字, 或是漏填, 在觀看者送出資料時, 就會告訴觀看者號碼錯誤, 但假若觀看者輸入 8 個位的錯誤電話號碼, validation 就驗不出來, 所以 validation 也有局限之處, 但起碼可以減少一部份錯誤。

Client-side 及 server-side validation:

　　當觀看者在網路中看一個網頁時, 這網頁是從網頁的寄存地 (WWW server) 到達觀看者家中的個人電腦 (client), 若這網頁有 form 及 JavaScript的 validation, 當觀看者填入及送出資料, 這 JavaScript 就會在觀看者的個人電腦中進行 validation 的工作, 這就是 client-side validation。若這網頁內有 CGI 的程式指示, 也可不進行client-side validation, 觀看者的資料全部送出, 然後在 server 處進行 validation, 是為 server-side validation, 發現有錯就將資料送回 client 處要求觀看者修改。

　　在設計 form 時, 我們應該盡量使用 client-side validation, 這反應較為快捷, 因為這是在 client 的電腦中進行, 而且可減輕 server 的負擔及來回輸送的時間。

3.　form 的 event handlers

　　form 只有兩個 event handlers: onSubmit 及 onReset, 分別與 submit 及 reset 兩類按鈕連結使用, 有關 submit 按鈕及 onSubmit, 請看隨後一節中的練習。

4.　form 的 methods

　　form 有兩個 methods: submit( ) 及 reset( ) , 我們可以用這兩個 method 來代替 submit 及 reset 按鈕, 請看 13.2-3 的一段。

13.2　表單送回資料的方式

1.　以電郵方式接收資料

　　我們在網頁中造出一個表單, 觀看者按 submit 的按鈕, 就會將資料送出。

　　送出資料的方式有兩個選擇, 其中一個是將資料送去 WWW 伺服器中我們設定的一個程式, 然後由這程式將資料寫進一個記錄檔案中, 這方式要 ISP 容許我們使用一類名為 CGI (Common Gateway Interface) 的程式介面, 本書不會說及這方面的資料。

　　另一個方式是使用電郵, 我們可以在 form 中設定 mailto (電郵) 的指示, 觀看者按 submit 的按鈕, form 中的資料就會以電子郵件的方式寄去 form 內指定的電郵地址。這方式的好處是不需要 WWW 伺服器的 CGI 程式 (很多 ISP 是不容許一般用戶使用這些程式), 而程式設計也較簡單。

2.　送出 (使用 submit 按鈕) 及收回 form 的練習

　　你可在自己的電腦中造一個試驗的網頁, 在網頁中放下自己的電郵地址, 然後填入 form 中的資料, 按 submit 的按鈕, 看是否能將資料以電郵的方式送出, 稍後可連線, 將電子郵件下載回來, 看是否能看到剛才送出的資料。

練習-105　在表單中設定收件的電郵地址

　　在這例子, 你看到一個簡單的 form, 在 form 中放下自己的電郵地址, 目的是當觀看者輸入資料後, 按 submit 的按鈕, 輸入的資料就會以電子郵件的方式送去你的郵箱。

1.　請你自行用「記事本」造出以下網頁, 在 mailto: 之後換上你的電郵地址。

Please fill in your name:
<input type=text size=20 name="Visitor" > <p>

Please fill in your telephone number:
<input type=text size=20 name="Tel" > <p>

2.　在上述設定, 留意這一句:

action="mailto:[email protected]?subject=Testing submit"

　　這句的 ? 是用來分隔兩個設定, subject= 後的文字會成為信件的標題, 這也可略去。

3.　enctype="text/plain" 表示資料以純文字的方式送出, 不進行編碼, 若不設定這項, 收回的是編了碼的字元。(enctype 表示 encoding type。)

4.　請你在上述的網頁使用自己的電郵地址, 輸入完畢後, 將這檔案存檔, 例如使用 submit.htm 這名稱。

5.　要試驗這 submit.htm 的操作, 標準方法是將這網頁送上 ISP 處自己的戶口中, 然後自己以觀看者的身份, 連線後在瀏覽器中輸入這網頁的 URL 來開啟這網頁, 在網頁中的文字框輸入資料, 例如:

圖 13-1　在網頁的文字框輸入了資料

　　按 [Submit information] 的按鈕, 就會叫出瀏覽器的電郵功能及送出資料, 稍後你可檢查郵箱的信件, 看收回的有什麼資料。

6.　另一個較簡便的試驗方式是將 submit.htm 保留在自己的電腦中 (不送上 ISP 處), 若使用 IE, 開啟這瀏覽器後, 載入 submit.htm, 在網頁中的文字框輸入資料, 按 [Submit information], 會叫出 Outlook (或 Outlook express) 及出現以下提示:

圖 13-2　要你確定送出資料的對話盒

　　按 [確定], 就會叫出圖13-3 的撥號對話盒, 連線後, 資料就會以電郵的方式送出, 若在撥號對話盒中按 [取消], 就會取消這電郵。

　　在隨後的練習, 你可按 [取消] 不送出電郵, 因來到這一步, 已能証實 submit 的機制操作正常。這些取消的郵件會變為待寄的郵件, 及放在 Outlook Express 的寄件匣內, 在這處你也可看到郵件的內容, 若你不刪去這些試驗郵件, 下次連線就會送出。

圖 13-3　撥號的對話盒

7.　若你使用 Netscape 來看這 submit.htm, 在文字框輸入資料後, 按 [Submit information], 就會有類似圖13-2 的提示對話盒, 按 [確定], 就會叫出撥號對話盒, 連線後, 郵件就會送出。

　　在隨後的練習, 你可在這撥號對話盒中按 [取消] 不送出電郵, 因來到這一步, 已能証實 submit 的機制操作正常。

8.　送出電郵後, 稍候一會, 就可檢查郵箱, 你應收到剛才送出的的信件。筆者作試驗時, 輸入了圖13-1 的資料, 用 Outlook Express 收回郵件, 就見以下資料:

圖 13-4　收回的郵件資料

　　留意在原始檔案中 name="Visitor" 及 name="Tel" 這兩項, 這兩個是文字框在操作上用的個別名稱, 在收回的資料中, 這兩個名稱用來作識別之用, 表示資料是來自該名稱的文字框。

9.　在這網頁, 請你試試 [Clear filled data] 這 reset 按鈕, 這是用來清除 (重置) 已輸入的資料。

3.　submit( ) 及 reset( )

　　在 2.3-G 的一節會說到 submit 及 reset 兩個按鈕, 分別用來送出及重置輸入了的資料, form 另有 submit( ) 及 reset( ) 這兩個 method, 也可作這方面的用途, 這兩個 methods 有以下語法:

document.formName.submit( )
document.formName.reset( )

　　但是 submit( ) 在 Netscape 中不能與 mailto: 使用, 在 IE 則可以, 例如以下的 script:

　　在 IE, [送出] 及 [重置] 的按鈕都有效, 但在 Netscape, 只有 [重置] 的按鈕有效。

4.　Return 鍵自動啟動的 submit

　　若一個 form 內只有一個文字框, 當觀看者輸入資料後按 [Enter] 鍵, 就會自動啟動 submit 的功能, 將資料送出, 請看以下例子:

<html> <body>
<form name=fm1 method=post action="mailto:[email protected]"
　　enctype="text/plain">
請輸入你的姓名: <input type=text>
</form>
<p>
<form name=fm2 method=post action="mailto:[email protected]"
　　enctype="text/plain">
請輸入你的電話號碼: <input type=text size=10>
</form>
</body> </html>

　　以上的網頁有兩個 form, 每個 form內有一個文字框, 觀看者在框內放下文字插入點, 輸入或不輸入文字, 按 [Enter] 鍵, 就會啟動送出資料的機制, 但一個 form 內有兩個文字框, 就不會有這情況出現。

13.3　各類 <input> 元件

　　在表單的操作, 有以下三組標籤可設定輸入的元件:

　　在這三組標籤, <input> 最重要, 是用來造出多類輸入用的元件, 有以下語法:

1.　input 是屬於 form下的物件, 要放在 <form> 及 </form> 之間, 我們可以給予這 form 一個自訂名稱, 在本書很多地方, 筆者使用 fm 這一個簡短名稱。

2.　type=" " 是指定輸入元件的類別, 例如按鈕、文字框等等, 標準是放在 " " 內, 但也可略去 " " 。

3.　name=" " 是我們給予一個元件在操作上的個別物件名稱, 例如一個 form 內有兩個文字框, 我們可以分別命名為 tx1 及 tx2, 若網頁其他地方要引述這元件的資料, 可使用這個別物件名稱。

4.　value=" " 是我們要在元件上顯示的文字, 在一些元件中, 這會是隨 form 送出的資料。

　　使用 <input type="元件類別">, 可以設定以下各項元件:

1.　type=text　　　　接受輸入文字的文字框。
2.　type=password　　接受輸入密碼的文字框。
3.　type=radio　　　　設定圓鈕選項。
4.　type=checkbox　　設定核選方塊。
5.　type=button 　　　設定一般按鈕。
6.　type=submit 　　　設定送出資料的按鈕。
7.　type=reset　　　　設定清除資料的按鈕。

　　若 <input> 內無指定類別, 就是使用 type=text (預設值)。

13.3-A　input type=text

　　input type=text 是造出讓觀看者輸入文字或數字的文字框 (單行文字方塊, text box), 也可用作顯示文字的地方, 假若你不用 document. write( ) 或 alert 對話盒來顯示文字, 可利用 text 造出來的文字框來顯示, 在本書前面, 你已看過很多例子。

1.　設定文字框的語法

　　在前面你已看過很多文字框的例子, 設定這些文字框有以下語法:

1.　使用 type="text" 就可造出一個文字框。

2.　name=" " 是你給予這文字框的個別物件名稱。

3.　value=" " 是將一些預設文字放在這元件內, 這項可以不要, 也可以用 "" 來代表沒有 (例如 value="" )。在不同項目, value= 有不同用途。

　　我們可以省去 " " 這雙引號, 但這只限於一個字的名稱, 若名稱內有空格, 例如value="Your Name Here", 這句要放在 " " 內, 否則只會出現第一個字。

4.　size=" " 是文字框的長度, 預設是 20。

5.　maxlength=" " 是輸入文字的最大數限, 這例子的 30 表示最多可輸入約 30 個英文字或約 15 個中文字。

2.　text 的 event handler 及 method

　　在 input type=text 的標籤內, 我們可以使用這些 event handlers: onBlur、onChange、onFocus、onSelect , 請參看第11章的資料, 例如使用以下的 script, 可以將觀看者輸入的文字全部變為大寫, 留意這處如何使用 this operator 來簡化編寫工夫。

練習-106　this.value 的使用

　　在 form 的操作, 我們常要用到 this 這個 operator 來代表操作中的物件, 這可使到 script 較為簡短, 在練習-55 已有一個例子, 在這處請你多看一個例子。

1.　請用瀏覽器開啟示範磁碟中的 this.htm, 這檔案有以下內容:

<html> <body bgcolor=wheat> 請輸入你的英文姓名:
<form name=fm >
<input type=text name="Visitor" value="" size=20
　　onBlur="this.value=this.value.toUpperCase( ) ">
</form>
</body> </html>

2.　網頁開啟後, 請你在文字框中輸入一些小寫英文, 然後用滑鼠指標在文字框外的地方按一下 (對文字框來說, 這就是 onBlur), 你會見到小寫英文變為大寫。

　　在這例子, 我們在 document.fm.Visitor 這範圍內使用 this.value來代表輸入的文字, 這處的 this 就是 document. fm.Visitor。

　　設定一個文字框後, 我們可以使用以下三個 methods 對文字框作一些操作:

1.　blur( ): 這是將 focus 移離文字框。
2.　focus( ): 這是將 focus 放進文字框。
3.　select( ): 這是選定文字框內的文字。

　　有關這三項的操作, 請看第 11 章。

13.3-B　input type=password

　　這是用來設定輸入密碼用的文字框, 與上段說的 input type=text 相似, 例如:

<form>
請設定你的 5 位數字密碼:
<input type=password name="pw" value="" size=8 maxlength=5>
</form>

　　在網頁中出現的是一個文字框, 輸入文字時不會出現文字, 而是出現 ***** 這些符號, 例如:

圖 13-5　輸入密碼的文字框

留意:　密碼在傳送時並沒有加密機制, 所以有可能被人攔截而看到密碼。

密碼的再確認:

　　設定密碼的一般習慣是要觀看者輸入密碼後, 要重新再輸入多一次, 兩次輸入相同, 密碼才會生效, 請看以下例子。

練習-107　密碼的再確認

　　在這例子, 網頁中有一個 password 的文字框, 觀看者輸入密碼, 按 [確定] 的按鈕, 就會有一個子視窗出現, 觀看者再輸入密碼, 若兩次輸入相同, 就接受密碼, 若不同就清除密碼, 要觀看者重新再設定。

1.　請用瀏覽器開啟示範磁碟中的 password.htm, 這檔案有以下內容:

<html> <body>

<form name=fm1> 請輸入5個字元的密碼, 然後按 [確定] :
<input type=password name="pw1" size=8 maxlength=5
　　onChange="confirm1( )" >
<input type=button value="確定" >
</form>

</body> </html>

2.　網頁開啟後, 你會看到一個文字框, 請輸入五個字元的密碼, 按 [確定], 會出現一個子視窗, 請再輸入一個與剛才不同的密碼, 按 [確定], 看有什麼結果。

3.　請再重新輸入五個字元的密碼, 按 [確定], 在子視窗再輸入剛才的密碼, 按 [確定], 看有什麼結果。

1.　在這例子, 父視窗的 [確定] 按鈕沒有作用, 目的是讓觀看者按一下, 因而引發文字框內的 onChange 反應, 再啟動 confirm1( ) 這f unction。

2.　confirm1( ) 這 function 是將一個網頁寫進 pwWin 這子視窗, 你也可為這子視窗寫一個獨立的網頁, 然後放進這子視窗 (請看 2.2 的一節)。

3.　為了簡化 script 的句子, 這處使用了 with(pwWin.document) , 有關 with statement 的使用, 請看 6.11 的一節。

4.　在這一句: onChange=\'window.opener.confirm2( )\' , 這符號 \ 是告訴document.write( ) 隨後的一個字元作為文字來處理, 而不是操作字元, 請看 1.8-2 的一段。

　　在子視窗, window.opener 是指父視窗, window.opener.confirm2( ) 是啟動父視窗網頁中的 confirm2( ) function, 這方面的操作, 請看 2.4 的一節。

13.3-C　input type=hidden

　　hidden 是隱藏文字框, 不會在瀏覽器中顯示, 所以觀看者在畫面中不會知道有這文字框, 也不能更改這文字框的資料, 但 script 內的程式可以改變這些資料, 所以隱藏文字框可供程式操作之用, 在練習-111 及練習-113 有使用 hidden 文字框的例子。

　　設定隱藏文字框有以下的語法:

<html> <body> Demonstration
<form>
<input type="hidden" name="hid" value="00000">
</form>
</body> </html>

　　在瀏覽器中, input type=hidden不會產生任何可見的元件, 觀看者不知有這一項存在。隱藏文字框其中一個用途是作為暫存地方, 請看以下例子。

練習-108　隱藏文字框的使用

　　在前一節說到密碼再確認的操作, 我們也可以使用隱藏文字框作為存放其中一次輸入的地方。在這例子, 網頁中有一個密碼文字框及一個隱藏文字框, 觀看者第一次輸入密碼後, 這密碼就移放在隱藏文字框, 然後有對話盒告訴觀看者輸入第二次來確認, 兩次輸入相同, 密碼才被接受, 否則會返回密碼文字框及重置資料。

1.　請用瀏覽器開啟示範磁碟中的 hidden.htm, 這檔案有以下內容:

<form name=fm> 請輸入5個字元的密碼, 然後按 [確定] :
<input type=password name="pw" size=8 maxlength=5 >
<input type=button value="確定" onClick="confirmIt( )" >
<input type=button value="清除密碼" onClick="clearIt( )" >
<input type=hidden name=hid value="0" >
</form>

</body> </html>

2.　網頁開啟後, 你會見到一個密碼文字框, 請你輸入 5 個字元的密碼, 按 [確定], 會有對話盒要你再輸入多一次, 請你分別輸入正確及錯誤的確認密碼, 看有什麼反應。

1.　請看網頁中這兩句:

if (document.fm.hid.value=="0")
{　document.fm.hid.value=document.fm.pw.value

　　因為隱藏文字框的初始值是 0, 這處第一句是檢查這數值是否 0, 若是 TRUE, 表示是第一次輸入密碼, 隨後的一句就將密碼放進隱藏文字框。

2.　當觀看者第二次輸入密碼, if (document.fm.hid.value=="0") 這句變成 FALSE, 因此有 if (document.fm.hid.value==document.fm.pw.value) 這項檢查, 這是比較密碼文字框和隱藏文字框內的字元, 這就可知兩次輸入是否相同。

13.3-D　input type=radio

Radio 的設定:

　　input type=radio 是用來造出選擇用的圓鈕選項, 例如以下原始碼:

<form name=fm> 你居住的地區是: <br>
<input type=radio name="Area" value="HK" checked> 香港 <br>
<input type=radio name="Area" value="KLN" > 九龍 <br>
<input type=radio name="Area" value="NT" > 新界 <br>
</form>

　　在瀏覽器中有以下顯示:

圖 13-6　一組圓鈕內的三個選項

　　每一個 type=radio 是造出一個圓鈕選項, name= 是這組選項元件的名稱, 上圖中三個選項屬同一組 (set) 元件, name= 要相同。在這組別中, 觀看者只可選其中一個, 若選另一個, 先前被選的一個變成不被選。

　　value= 是在每個選項收回的文字, 這例子是 HK 或 KLN 或 NT, 這三個選項中, 其中一個是 checked, 是這組圓鈕出現時預設選定的一個, 也可不要。

收回的資料:

　　在以上三個選項, 若觀看者選了第二項, 然後將資料送出, 我們在電郵中就會收到以下資料 (請看圖 13-4 ):

Area=KLN

Radio 的 event handler:

　　Radio 可以使用以下三個 event handler: onBlur、onClick、onFocus, 有關 event handler, 請看 11.3 的一節。

指定個別圓鈕選項:

　　前面說的三個圓鈕選項都是使用同一的 name , 若要指定個別圓鈕, 要使用array 的方法, 在這例子, 這些圓鈕是在 fm 這個 form 之內, 圓鈕名稱是 Area, 所以這三個圓鈕選項順序是:

document.fm.Area[0]
document.fm.Area[1]
document.fm.Area[2]

例 1:　圓鈕選項的 checked property

　　圓鈕選項有多個 property:

checked　　　(個別選項的選定狀態)
form　　　　 (圓鈕選項所在的 form 的物件名稱)
name　　　　 (這組圓鈕選項的物件名稱)
type　　　　　(這組元件的 object 名稱, 即是 radio )
value　　　　 (個別選項的 value )

　　例如使用以下 script:

　　這會出現 alert 對話盒來顯示 radio 這字, 這就是這組元件的 object 名稱 (type)。這些 property, 除了 checked 及 value, 其他實用性不大, 以下例子是利用 checked 這個 property 來檢查觀看者選了哪一項。

練習-109　檢查觀看者選了圓鈕選項中哪一項

　　這例子有圖13-6 的圓鈕選項, 但沒有預設選項, 在觀看者按一個按鈕時, 就會有 alert 對話盒顯示觀看者選了哪一項。

1.　請用瀏覽器開啟示範磁碟中的 radio1.htm, 這檔案有以下內容:

<html> <body bgcolor=oldlace >
<form name=fm> 你居住的地區是: <br>
<input type=radio name="Area" value="香港區" > 香港 <br>
<input type=radio name="Area" value="九龍區" > 九龍 <br>
<input type=radio name="Area" value="新界區" > 新界 <br>
<input type=button value="確定" onClick="showIt( )" >
</form>

</body> </html>

2.　網頁開啟後, 你會見到三個圓鈕選項及一個 [確定] 按鈕, 請你先不作任何選擇就按 [確定], 看有什麼反應, 再分別選每一項, 然後按 [確定], 看每一項的反應。

1.　首先看以下的設定:

choice=3

for (i=0; i <= 2; i++)
　{　if(document.fm.Area[i].checked==true)　　{　choice = i　}
　}

　　這是將 choice 先設為 3, 然後利用 for(i=0; i<=2; i++) 檢查每一個選項, 前面說過一組圓鈕選項是一個陣列, 如下:

　　例如觀看者選了第二項, 即是 document.fm.Area[1], 在 i=1 的一個迴圈, 有以下檢查:

if(document.fm.Area[1].checked==true) { choice = 1 }

　　這是問 document.fm.Area[1].checked 是否 true, 若答案是 TRUE, 就將 choice 定為 1, 否則 choice 仍是 3。

2.　上述用作檢查的一句, 也可作以下寫法:

if(document.fm.Area[i].checked) { choice = i }

　　在 if(statement) 內預設是 ==true , 你沒加上去就使用預設值, 若使用 if(document.fm.Area[i].checked==false) 就一定要指定是 ==false。

3.　在 JavaScript, true 及 false 可分別用 1 及 0 來代表, 所以上述的一句也可寫成:

if(document.fm.Area[i].checked==1) { choice = i }

4.　用上述方法, 若觀看者選了第一項, choice 會是 0, 若選第二項, choice 會是 1, 選第三項, choice 會是 2, 隨後的 script 是看 choice 的數值而顯示某一段的訊息。

例 2:　用圓鈕選項作選擇

　　練習-65 的例子是利用多個按鈕 (button) 及 onClick 的方式來讓觀看者作出選擇, 圓鈕選項也有 onClick 這個 event handler, 所以我們也可用來讓觀看者作選擇, 操作與按鈕的方式相同, 例如以下的 script 是讓觀看者選擇在 document.pic.src 這位置顯示的圖片:

<html> <body>
<img src=null.gif name=pic width=200 height=200 border=1 >

<form name=fm> 請選看圖片: <br>

例 3:　圓鈕選項的驗証

　　在 form 中有圓鈕選項, 當觀看者送出表單時, 我們可以作一些 validation 來看是否有選其中一項, 也可檢查觀看者選了哪一項, 有需要可因應某個選項作出反應。

練習-110　圓鈕選項的 validation

　　在這例子, 網頁中有圖13-6 的圓鈕, 但沒有預設選項, 在觀看者送出表單前, 這 script 會檢查觀看者是否已選了其中一項, 再檢查選了哪一項, 然後依這結果分別顯示三段不同的訊息。這網頁可以有多個不同寫法, 你可試用自己的方法寫出來。

1.　請用瀏覽器開啟示範磁碟中的 radio2.htm, 這檔案有以下內容, 在 mailto: 後, 請使用你自己的電郵地址。

你居住的地區是: <br>
<input type=radio name="Area" value="港島區" onClick="choice=0"> 港島 <br>
<input type=radio name="Area" value="九龍區" onClick="choice=1"> 九龍 <br>
<input type=radio name="Area" value="新界區" onClick="choice=2" > 新界 <br>
<input type=submit value="送出資料">
</form> </body> </html>

2.　網頁開啟後, 你會見到三個圓鈕選項及一個 [送出資料] 的按鈕, 請你先不作任何選擇就按 [送出資料], 看有什麼反應, 再分別選每一項, 然後按 [送出資料], 看每一項的反應。

　　這例子與練習-109 不同之處是使用 onSubmit 來啟動驗証程序, 另在觀看者按某個圓鈕時, 就使用 onClick 來設定 choice 的數值, 而不是利用 checked 這 property 來檢查觀看者選了哪一項。

13.3-E　 input type=checkbox

1.　checkbox 的語法

　　input type=checkbox 是造出選擇用的核選方塊 (checkbox), 這處說的 "方塊", 其實是小方框, 觀看者用滑鼠按一下, 方框內就出現一個釣 , 表示選定該項, 請看以下例子。

練習-111　造出 checkbox

　　在這例子, 筆者造出兩組 checkbox, 第一組每個選項有自己的物件名稱, 第二組每個選項用同一物件名稱, 你可看看有什麼分別。

1.　請用瀏覽器開啟示範磁碟中的 ckbox1.htm, 這檔案有以下內容, 在 mailto: 後, 請使用你自己的電郵地址。

<html> <body bgcolor=oldlace >
<form name=fm method=post action="mailto:[email protected]" enctype="text/plain" >
請選擇你喜愛的花類 (可選多項): <br>
<input type=checkbox name=rose value=yes checked> 玫瑰 <br>
<input type=checkbox name=lily value=yes checked> 百合 <br>
<input type=checkbox name=gladiolus value=yes > 劍蘭 <p>
<input type=hidden name="=====" value="=====">

請選擇你喜愛的顏色 (可選多項): <br>
<input type=checkbox name=color_favor value=red checked>紅色<br>
<input type=checkbox name=color_favor value=yellow>黃色<br>
<input type=checkbox name=color_favor value=lightblue>藍色<br>
<input type=checkbox name=color_favor value=white>白色<br>

<input type=submit value="送出資料" >
<input type=reset value="重置資料" >
</form>
</body> </html>

2.　網頁開啟後, 你會見到一些 checkbox, 請你全部都核選, 然後將表單送出, 看收到的會是什麼資料。

1.　在上述的 checkbox 設定, 有些項目有 checked 這個字, 網頁開啟後, 這些項目已經選定了 (方框內有 tick )。

2.　在這例子, 若你全部都選, 應會收到以下的電郵資料:

　　這處有兩組 checkbox, 筆者用 type=hidden 的方式在收回的資料中用 ====== 來將兩組資料分隔。

3.　第一組每個 checkbox 各有物件名稱, 每項是獨立的 object, 我們可用這名稱來指定該 checkbox, 例如 document.fm.rose 是第一個, document.fm.lily 是第二個, document.fm.gladiolus 是第三個。

4.　第二組全部 checkbox 用一個物件名稱, 所以全部 checkbox 是一個 object, 我們可用陣列的方式來指定某一個成員, 例如:

第一個:　document.fm.color_favor[0]
第四個:　document.fm.color_favor[3]

　　假若在上述網頁下方加入以下的 script, 就會顯示 yes 及 lightblue 兩個字。

2.　checkbox 的 event handler 及 property

　　checkbox 有三個 event handler: onBlur、onClick、onFocus, 我們最多用的是onClick, 觀看者用滑鼠選某一個 checkbox, 就會引發我們預設的反應, 有關這些功能, 請看第11章。

　　checkbox 有以下的 property:

checked　　　　　　是否已被選定 (true 或 false)。
defaultChecked　　　是否預設選項 (true 或 false)。
form　　　　　　　　 checkbox 所在的 form 的物件名稱。
name 　　　　　　　 checkbox 的物件名稱。
type　　　　　　　　物件的 object 名稱, 即是 checkbox。
value　　　　　　　個別 checkbox 的 value。

　　這些 property 最有用的是 checked 及 value, 我們可以用來作驗証。

3.　checkbox 的 validation

　　在前一節, 你看過 radio 的驗証, checkbox 也有類似操作, 主要是看觀看者是否已作出選擇, 或選了哪一項或多少項, 請看以下例子。

練習-112　checkbox 的 validaition

　　這例子有一組 checkbox, 當觀看者按 submit 按鈕時, validation 的機制會檢查觀看者是否最少選了一項, 及最多選三項。

1.　請用瀏覽器開啟示範磁碟中的 ckbox2.htm, 這檔案有以下內容, 在 mailto: 後, 請使用你自己的電郵地址。

<body bgcolor=aliceblue >
<form name=fm method=post action="mailto:[email protected]"
enctype="text/plain" onSubmit="return checkIt( )" >
請選擇你喜愛的顏色 (最少選一項, 最多選三項): <br>
<input type=checkbox name=favor value=red> 紅色 <br>
<input type=checkbox name=favor value=yellow > 黃色 <br>
<input type=checkbox name=favor value=lightblue> 藍色 <br>
<input type=checkbox name=favor value=white> 白色 <br>
<input type=submit value="送出資料" >
<input type=reset value="重置資料" >
</form> </body> </html>

2.　網頁開啟後, 你會見到一些 checkbox, 請你試試不作選擇, 或全選四項, 然後按 [送出資料] 的按鈕, 看有什麼反應。

　　這例子中檢查觀看者選了多少項是以下兩句:

for( i=0; i <= 3; i++ )
{　if (document.fm.favor[i].checked==true)　{　 x = x+1　}
}

　　for(i=0; i <=3; i++) 是設定 4 個迴圈來檢查四個 checkbox, 若有某一個選了, 就會使到 x 加 1, 因 x 的初始值是 0, 所以最後 x 的數值就是核選了的 checkbox 的數目。

　　這一句: if(document.fm.favor[i].checked==true) { x = x+1 } , 也可簡為 if(document.fm.favor[i].checked) { x = x+1 } , 請看前面的解釋。

練習-113　購物的 checkbox (請你參看本出版社的郵購, 這網頁與這處的例子相似。 )

　　這例子是購物的網頁, 分為父視窗及子視窗, 首先開啟的是父視窗 (ckbox3.htm), 是讓觀看者選購物品及數量, 選完後, 按 [計算總額] 的按鈕, 就會啟動validation 的機制, 這是檢查觀看者是否選了最少一項物品及輸入物品的數量, 若通過這驗証, 就會進行計算及以一個子視窗顯示選購資料, 若不通過驗証, 會有 alert 對話盒通知觀看者更正。

　　子視窗開啟時會載入 send.htm, 這檔案會讀取父視窗的選購資料, 然後向觀看者顯示選了的項目、數量及購物總金額, 觀看者看過後, 按 [確定購買], 資料就會利用 submit 按鈕及 action=post 送出, 若按 [返回主網頁] 的按鈕, 就會返回父視窗, 不送出資料, 也不清除資料, 觀看者可繼續選擇。

　　在這例子, 筆者用一個子視窗來顯示觀看者的選擇, 另一個方式是用兩個窗格, 一個大窗格讓觀看者瀏覽選購, 另一個小窗格顯示已選了的貨品及總金額。

　　這是一個相當長的網頁, 請你將各部份拆開來看, 順序跟下去, 就不會覺得複雜。

1.　請用瀏覽器開啟示範磁碟中的 ckbox3.htm, 這檔案有以下內容:

   <!-- 第一部份開始 -->

<body bgColor=beige text=blueviolet>
請輸入你的姓名: <font color=red size=+1> 略 </font> <br>
請輸入你的地址: <font color=red size=+1> 略 </font> <br>
請輸入你的聯絡電話: <font color=red size=+1> 略 </font> <p>

<form name=fm > 請選購你要的貨品及數量: <p>
<table border=1 cellspacing=0 width=60%>

 <!-- 第一部份結束 -->

</body> </html>

2.　開啟網頁後, 你會見到四個 checkbox, 請你模擬自己是觀看者, 然後試驗一些錯誤的操作, 例如沒有選任何貨品就按 [計算總額], 或選了貨品, 但沒有輸入數量, 等等。

3.　最後請你依正常操作, 選了一些貨品及輸入數量, 按 [計算總額], 在出現的子視窗中按 [確定購買], 就會送出資料。

　　在第 7 章會說到編寫長的程式時, 我們可以將程式分為多個獨立部份來編寫, 這處的網頁是一個典型例子, 筆者也將這網頁分開多個部份來解釋。

第一部份:

　　這是造出讓觀看者選擇的表單, 屬於 HTML 的部份, 沒有什麼特別地方, 觀看者按 [計算總額], 就會啟動 checkIt( ) 這fu nction, 這就引去第二部份。

第二部份:

　　這利用 for(i=0; i <=(document.fm.item.length-1); i++ ) 檢查每個 checkbox, 看是否有核選了一項 (即是 document.fm.item[i].checked), 但在右方卻沒有填入數量或是填入了負數 (document.fm.quan[i].value <= 0), 有這情況, 就會有 alert 對話盒通知觀看者及終止 (return) 這 script 及回到網頁部份。

第三部份:

　　若通過前面一段的檢查, 這第三部份會檢查觀看者選了哪些貨品及數量, 將資料用一個名為 buyItem 的變數記下來, 同時計算總金額, 用 totalSum 這變數記下來。

　　這部份同時檢查 totalSum 是否 0, 若是 TRUE, 就會有對話盒通知觀看者及終止 (return) 程式, 回到網頁部份。

第四部份:

　　若通過 totalSum==0 的檢查, 就會開啟一個 msgWin 的子視窗, 並在這子視窗載入 send.htm, 父視窗的工作到此完畢, 其後送出資料的工作交給這 send.htm 負責。

第五部份:　send.htm

　　這檔案有以下內容, 在 mailto: 後, 請使用你自己的電郵地址:

1.　請首先看第一個 script:

x=window.opener
document.write("你選了: <br> <font color=red>" + x.buyItem
+ "<br> 總金額是: $" + x.totalSum + "<p> </font>")

　　這是在子視窗中顯示觀看者選了的物品 (buyItem) 及總金額 (totalSum), 這兩個變數是在父視窗 (window.opener) 中設定, 在子視窗中一定要指定這變數的來源, 否則瀏覽器只會在子視窗找這變數, 當然會找不到。這兩個變數全名是window.opener.buyItem 及 window.opener.totalsum, 為了簡化這名稱, 筆者用來代表 window.opener。

2.　這子視窗有以下的一個隱藏文字框:

　　這網頁送出的, 就是這隱藏文字框的資料, 這文字框開始時是空的, 在下方有一個 script 用以下一句將資料寫進這文字框:

document.fm2.buy.value=(x.buyItem + ", 總數=$" + x.totalSum)

3.　你試試在網頁中使用自己的電郵地址, 填入資料然後送出, 收回的電郵會有類似以下資料:

buy=物品A, 數量= 3 。<br> 物品B, 數量= 5 。<br> , 總數=$161

　　收到的資料有 <br> 這字符, 原因是這項資料在前面要在子視窗中顯示, 所以使用了 <br> 來折行, 而電郵使用的是純文字, 所以就有這標籤出現, 我們知道這標籤的來源, 可以不理會, 若你不喜歡這字符, 可以使用 replace( ) 的方法刪去或轉為另一些字符或分行符號。

13.3-F　input type=button

　　這是用來設定按鈕 (button), 使用以下語法:

　　在 onClick 處, 我們可以設定這按鈕在被按一下時所產生的反應, 在本書前面已有很多例子, 有關詳細設定, 請看 2.5 的一節。除了 onClick, 按鈕還可接受這些event handlers: onBlur、onFocus、onMouseDown、onMouseUp。

13.3-G　 input type=submit　input type=reset

　　這是在一個 form 內的送出 (submit) 及重置 (reset) 按鈕, 這兩個按鈕的影響範圍是 <form> 及 </form> 之間的全部元件, 請參看練習-105 的例子。

　　我們也可以將 submit 及 reset 按鈕連同 onClick 使用, 觀看者按一下按鈕, 這按鈕會先執行 onClick 的操作, 完成後, 就會進行送出資料或進行重置資料操作, 請你試試以下的網頁, 這是在示範磁碟中的 submit.htm。

　　除了 onClick, 這兩個按鈕也可使用 onBlur 及 onFocus 這兩個 event handler, 請同時參看第11章中的 onSubmit 及 onReset。

13.4　使用 <select>

　　在 <form> 內可使用三類輸入元件: <input>、<select> 及 <textarea>, 前一節說的是 <input>, 這一節是說 <select>。

1.　<select> 的語法

　　<select> 是用來造出下拉式選項 (pull-down menu), 有這語法:

練習-114　<select> 的選項

　　在這例子, 你看到一個下拉式選項, 你可試選其中一些項目, 將資料送出, 看收回的是什麼資料。

1.　請用瀏覽器開啟示範磁碟中的 select1.htm, 這檔案有以下內容, 在 mailto: 後, 請使用你自己的電郵地址。

<html> <body>
<form name=fm method=post
　　action="mailto:[email protected]" enctype="text/plain">
　　你喜歡的顏色 (可選多項): <br>
<select name="colorFavor" multiple >
<option value="white"> 白色
<option value="green"> 綠色
<option value="red" selected> 紅色
<option value="yellow"> 黃色
<option value="blue"> 藍色
<option value="none"> 不在上列
</select>
<input type=submit value="送出資料">
<input type=reset value="重置資料">
</form>
</body> </html>

2.　在網頁中你會見到一個下拉式選項, 請你選數項, 然後按 [送出資料], 看收回的電郵有什麼。

1.　<select> 是設定下拉式選項的標籤, 要用 </select> 來結束。name=" " 的 colorFavor 是給予這組下拉式選項的物件名稱, 在其他地方指定使用這物件, 就要引用這名稱。

2.　在 <select> 中加進 multiple 的指示, 例如: <select name =colorFavor multiple>, 用滑鼠選擇的時候, 按著 [Ctrl] 鍵, 可同時選擇多項。

3.　在 <select> 內的 size= 是指定選項窗口的大小, 若沒有指定就使用預設的 4 或 5。例如設定 <select size=1 multiple>, 就會有下圖的顯示, 出現的窗口只有一列, 右方會有箭頭按鈕來捲動各選項, 這處的 multiple 是讓觀看者可選多項。

　　若設定 <select size=1>, 不加上 multiple 的指示 (即只可選一項), 就會有下圖左的顯示, 出現的窗口只有一列, 右方有下拉式按鈕, 按一下會拉下選項, 如下圖右, 觀看者可選另一項。

4.　<select> 內每個選項用 <option> 來產生, 在某個 <option> 內加入 selected 這個字, 下拉式選項出現時預設是選定了這一項 (例如上圖 "紅色" 的一項)。

5.　value= 是每個選項的操作文字, 例如選了 "白色"、"綠色"、"紅色", 收回的電郵會有以下三項:

colorFavor=white
colorFavor=green
colorFavor=red

6.　<select> 內的選項屬一組物件 (這例子是 colorFavor), 個別選項沒有獨立名稱, 若我們要指定某個選項, 就要使用陣列的方式, 這處例子有以下的陣列:

document.fm.colorFavor[0].value==white
document.fm.colorFavor[1].value==green
document.fm.colorFavor[2].value==red
　　　　　:　　　　　　 :

2.　<select> 的 event handler、property 及 method

　　在 <select> 中, 我們可使用這些 event handlers: onBlur、onChange、onFocus, 有關這些用法, 請看第 11 章。

　　<select> 有以下的 property:

form 　　　　　<select> 所在的 form 的物件名稱。
length　　　　 <select> 內選項的數目。
name 　　　　　<select> 的物件名稱。
options　　　　 <select> 內的 <option> 陣列。
selected　　　　<select> 內被選定了的項目。
selectedIndex 　第一個被選項目的陣列排序。
type　　　　　　物件的 object 名稱, 即是 select。

　　這些 property 最有用的是 selected, 我們可以用來作驗証。

　　在以上 options 的一項, 是各選項的陣列, 在練習-114 的例子, 我們可用以下辦法指定各選項:

document.fm.colorFavor.options[0].value==white
document.fm.colorFavor.options[1].value==green
　　　　:　　　　　 :

　　因 <select name=colorFavor> 在建立各選項時, 會自動將各選項變成一個陣列, 所以我們也可略去 options 這指示, 即是:

document.fm.colorFavor[0].value==white
document.fm.colorFavor[1].value==green
　　　　:　　　　　 :

　　<select> 可使用這兩個 methods: blur( ) 及 focus( ), 例如使用document.fm.colorFavor.focus( ) , 就可使到 focus 放在有關的位置。

3.　<select> 的選項檢查

　　我們設定 <select> 後, 可以用 selected 這property來檢查觀看者選了哪幾項, 看是否符合我們的要求。

練習-115　<select> 的驗証

　　在這例子, 你看到一個下拉式選項, 有文字要求觀看者選擇最少一項, 最多三項, 資料送出前, 會有一個 script 檢查觀看者的選擇是否符合這要求, 另有一個confirm對話盒顯示觀看者作出選擇, 及確定是否送出資料。

1.　請用瀏覽器開啟示範磁碟中的 select2.htm, 這檔案有以下內容, 在 mailto: 後, 請使用你自己的電郵地址。

 </head>

<body bgcolor=oldlace >
<form name=fm method=post action="mailto:[email protected]"
　　enctype="text/plain" onSubmit="return checkIt( )">
　　請選擇你最喜歡的三種顏色 (最少一項, 最多三項): <p>
<select name="colorFavor" multiple >
<option value="白色"> 白色
<option value="綠色"> 綠色
<option value="紅色"> 紅色
<option value="黃色"> 黃色
<option value="藍色"> 藍色
<option value="紫色"> 紫色
</select> <p>
<input type=submit value="送出資料">
<input type=reset value="重置資料">
</form>
</body> </html>