2009年11月1日 星期日

HTML再接再厲(十九)：表單製作與應用

這裡介紹的是表單旗標<FORM>、輸入旗標<INPUT>和多行輸入框旗標<TEXTAREA>，它們構成了表單的最基本結構。每個旗標都有一些相關屬性，例如：METHOD、ACTION、TYPE、NAME和SIZE等等，運用屬性的值可以對表單作進一步的控制。

表單旗標可以使用mailto:或是CGI程式將表單內容傳送到指定地址，由於CGI程式需要架設網站(伺服器端)的支援，所以這裡只討論mailto:。

其實mailto:也不是標準的HTML指令，但幾乎所有的網站都支援mailto:指令，反而是瀏覽程式(客戶端)不完全支援。如果使用的是舊版的微軟探險家3.0版以下，mailto:指令是在幕前開啟e-mail程式。如果使用的是網景領航員或微軟探險家4.0版以上，mailto:指令會依瀏覽程式的設定，啟動e-mail程式，在幕後工作而送出表單。

第一步驟

第一步驟當然是使用<FORM>旗標告訴瀏覽程式你現在要製作一個表單：

<FORM METHOD="POST" ACTION="mailto:電子郵箱地址">

  • MEHTOD的中文解釋為方法
  • POST的中文解釋為張貼、公佈
  • ACTION的中文解釋為行動
  • mailto:和電子郵箱地址之中不能有空白
  • 電子郵箱地址由你指定，例如艾爾弗烈德使用alfredcave@gmail.com
  • 整個指令要求瀏覽程式將表單內容張貼(傳送)至某個(你的)電子郵件信箱中

接下來的問題是：瀏覽程式到底送出去什麼內容呢？它送出你使用<INPUT>旗標或<TEXTAREAJ>旗標所蒐集的資料。<INPUT>旗標可以設定蒐集方式屬性(TYPE)，此TYPE屬性有三個常用的屬性值：單行輸入框(TEXT)、單選圓鈕(RADIO)和複選方格(CHECKBOX)。此外還有名稱屬性(NAME)、大小屬性(SIZE)和列高屬性(ROWS)和行寬屬性(COLS)，以下都會一一介紹。

單行輸入框

這是最基本的資料蒐集方式，你在網頁上製作一個長條型的單行輸入框，可以讓受訪者填入姓名、綽號或電子郵箱地址等資料。單行輸入框的範例如下：

試試看在輸入框內打幾個字！只要將滑鼠指標點選到輸入框的位置，就可以輸入文字了。(輸入框不是一個圖形檔，它是HTML的內建指令，在網頁上顯示一個方框)。單行輸入框的指令如下：

<INPUT TYPE="TEXT" NAME="boxname" SIZE="30">

  • INPUT的中文解釋是輸入
  • TYPE的中文解釋是形式
  • NAME的中文解釋是名稱
  • SIZE的中文解釋是大小
  • <INPUT>旗標為一個單身旗標，不需要回復旗標
  • TYPE為<INPUT>旗標的屬性
  • TEXT為預設的屬性值，
  • INPUT TYPE="TEXT"告訴瀏覽程式，資料的輸入方式為單行輸入框
  • NAME為<INPUT>旗標的屬性
  • NAME="boxname"告訴瀏覽程式，這個輸入框的名稱為boxname
  • boxname是由你指定，阿貓或阿狗隨你稱呼，不過艾爾弗烈德建議你使用英文字母，例如：box1name、box2email、box3address等，最好是由box、數字及你所要蒐集資料的英文單字組成，又好記、又可免除不可預期的效果發生
  • SIZE為<INPUT>旗標的屬性
  • SIZE="30"告訴瀏覽程式，這個輸入框的寬度為30個英文字母(15個中文字)

當你收到由上述指令蒐集到資料的email時，email的內容如下：

boxname=(受訪者填寫在單行輸入框內的文字)

多行輸入框

顧名思義就可知道多行輸入框的作用和單行輸入框相同，只是可以讓受訪者輸入更多的資料而已，通常是讓受訪者自由發揮給予建議和批評。多行輸入框的範例如下：

還是一樣的，你可以試試看在輸入框內打幾個字！只要將滑鼠指標點選到輸入框的位置，就可以輸入文字了。多行輸入框的指令如下：

<TEXTAREA NAME="boxcomment" ROWS="6" COLS="40"></TEXTAREA>

  • TEXTAREA的中文解釋是文字區域
  • ROWS的中文解釋是列(高)
  • COLS的中文解釋是行(寬)
  • <TEXTAREA>旗標為成雙成對，需要回復旗標</TEXTAREA>
  • NAME="boxcomment"告訴瀏覽程式，這個輸入框的名稱為boxcomment
  • boxcomment是由你指定，同樣地，最好使用英文字母
  • ROWS="6"告訴瀏覽程式，這個輸入框的列高為6列
  • CLOS="40"告訴瀏覽程式，這個輸入框的行寬為40個英文字母

當你收到由上述指令蒐集到資料的email時，email的內容如下：

boxcomment=(受訪者填寫在多行輸入框內的文字)

單選圓鈕

設身處地想一想，如果你的表單上都是文字輸入框，受訪者回答了幾個問題之後就可能不會理你了，很少有網友們上網的目的是寫申論題考卷的。這時候就用得上輸入圓鈕了，它是一個空心小圓，當滑鼠點選到空心小圓時，它的中間出再出現一個實心的黑圓。選擇圓鈕的範例如下：

1 2 3

試試看，點選各個小圓。你有沒有發現，三個小圓你只能選擇一個。艾爾弗烈德稱它為單選圓鈕，英文是Radio Button，因為它像老式收音機(Radio)的旋鈕。單選圓鈕的指令如下：

<INPUT TYPE="RADIO" NAME="ButtonChoice" VALUE="ButtonValue1"> Text1
<INPUT TYPE="RADIO" NAME="ButtonChoice" VALUE="ButtonValue2"> Text2
………

  • INPUT TYPE="RADIO"告訴瀏覽程式，資料的輸入方式為單選圓鈕
  • NAME="ButtonChoice"告訴瀏覽程式，這一整組單選圓鈕的名稱為ButtonChoice
  • ButtonChoice是由你指定，同樣地，最好使用英文字母。例如，你想瞭解網友喜好的冰淇淋口味，你可以取名為IceCreamFlavor
  • VALUE是<INPUT>旗標的屬性
  • VALUE="ButtonValue"告訴瀏覽程式，這個單選圓鈕的數值(也可以說是名稱)為ButtonValue，這個數值(名稱)也是由你指定。例如，巧克力冰淇淋口味，你可以設定(取名)為chocolate

當你收到由上述指令蒐集到資料的email時，假設受訪人選擇為Text1，email的內容如下：

ButtonChocie_ButtonValue1

複選方格

複選方格的作用和單選圓鈕很類似，只是以方格代替圓圈，而且可以複選答案。選擇方格的範例如下：

1 2 3 4 5

還是一樣的，你可以試試看，選擇數個方格。艾爾弗烈德稱它為複選方格，英文是Checkbox，因為它是在小方格裡打個鉤或Ｘ。複選方格的指令如下：

<INPUT TYPE="CHECKBOX" NAME="CkBoxChoice" VALUE="CkBoxValue1"> Text1
<INPUT TYPE="CHECKBOX" NAME="CkBoxChoice" VALUE="CkBoxValue2"> Text2
………

當你收到由上述指令蒐集到資料的email時，假設受訪人選擇為Text1和Text2，email的內容如下：

CkBoxChocie_CkBoxValue1

CkBoxChocie_CkBoxValue2

躍出式選單方框

躍出式(下拉式)選單方框也是表單上常見的格式，範例如下：

躍出式(下拉式)選單方框的指令如下：

<SELECT NAME="PopUpChoice">
<OPTION SELECTED="SELECTED""> Text1 </OPTION>
<OPTION> Text2 </OPTION>
………
</SELECT>

  • SELCET的中文解釋是選擇
  • OPTION的中文解釋是可選擇的項目
  • <SELECT>旗標為成雙成對，需要回復旗標</SELECT>
  • <SELECT>旗標告訴瀏覽程式，這是一個躍出式選單方框
  • NAME="PopUpChoice"告訴瀏覽程式，這個躍出式選單方框的名稱為PopUpChoice
  • OPTION SELCETED的中文解釋是已擇定的項目，所以在選單方框一開始出現的是 藍色

傳送和重設按鈕

表單上有一個不能缺少的按鈕就是傳送鈕，當你製作一份表單，你總會希望所蒐集到的資料能送回你的電子郵箱或你指定的地方吧！這時你就需要傳送鈕。此外，也許有些受訪人在最後關頭會改變主意，想要重新填寫，這時你就需要重設鈕。SUBMIT(送出查詢)和RESET(重設)按鈕的範例如下：

這一回別試著用滑鼠點選這兩個按鈕，艾爾弗烈德沒有指定它們傳送資料至任何電子信箱。點選它們，你可能會收到錯誤訊息。

它們的指令很簡單：

<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">

最後步驟

最後別忘了，<FORM>旗標為成雙成對，一定要加上：</FORM>

相關提示

閱讀郵件：利用表單所蒐集的資料利用電子郵件信箱傳遞時，它是以附件的形式傳送，其延伸檔名為.dat，但它實際上是一個文字檔，可以將延伸檔名改為.txt後開啟閱讀。

以文字格式傳送：利用表單所蒐集的資料利用電子郵件信箱傳遞時，當它以附件的形式傳送時，不但要麻煩地修改延伸檔名，而且其內容會連成一氣，不分行也不分段，閱讀十分吃力。可以在<FORM>旗標內加上一個屬性指令，ENCTYPE="text/plain"，它就可直接列在電子郵件內，其範例如下：

<FORM METHOD="POST" ACTION="mailto:電子郵箱地址" ENCTYPE="text/plain">

郵件主題：你在收電子郵件時，可能希望知道這封電子郵件的主題。例如表單蒐集的是網友喜歡的冰淇淋口味，你可以在mailto:的指令中加上subject=，其範例如下：

<FORM METHOD="POST" ACTION="mailto:電子郵箱地址?subject=冰淇淋口味" ENCTYPE="text/plain">

電子郵箱地址和subject=之間用問號連結。

郵件附本：你希望電子郵件的附本寄到其它的電子郵箱，你可以在mailto:的指令中加上&CC=，其範例如下：

<FORM METHOD="POST" ACTION="mailto:電子郵箱地址(一)?subject=冰淇淋口味&CC=電子郵箱地址(二)" ENCTYPE="text/plain">

一郵多傳：你希望電子郵件能寄到不止一個電子郵箱，你可以在mailto:的指令中用逗號隔開各個地址即可，其範例如下：

<FORM METHOD="POST" ACTION="mailto:電子郵箱地址(一),電子郵箱地址(二)" ENCTYPE="text/plain">

多行輸入框自動換行：有時候，多行輸入框在輸入資料時不能自動換行，你可以在<TEXTAREA>旗標上中加入WARP屬性，讓它強制換行，其範例如下

<FORM>
<TEXTAREA COLS="50" ROWS="10" WRAP="virtual">
</FORM>

本文配合HTML 4.0撰寫，新版HTML均可向前相容。

文章分類：

0 留言:

張貼留言