填表

毛慶禎
輔仁大學圖書資訊學系

HTML的填表祗提供資料輸入的界面, 另外需要共通介面(CGI, Common Gateway Interface)程式, 才能夠把取得的資料傳送出去。

把HTML與CGI結合, 才能夠發揮網頁的互動性。

架構

以<FORM>宣告填表:

<FORM METHOD="get|post" ACTION="URL" ENCTYPE="MIME type">

</FORM>

METHOD屬性用來指定與CGI程式間的資料傳遞方式, get 或 post; ACTION屬性則指定CGI程式的位置。

在<FORM>標籤裡, 還有若干控制標籤:

• <INPUT>, 設立欄位
• <SELECT>, 設計選項
• <TEXTAREA>, 指定輸入資料的編輯視窗
• <BUTTON>, 設計圖像按鈕
• <FIELDSET> 與 <LEGEND>, 設計填表的外框與標題

INPUT

<INPUT TYPE="欄位型式"
NAME="欄位名稱"
VALE="欄位的內定值"
SIZE="欄位的顯示寬度"
MAXLENGTH="欄位資料輸入的最大長度"
ACCESSKEY="英文字母"
CHEDKED
READONLY
DISABLED>

有九種屬性:

• TYPE="欄位型式", 必備
• NAME="欄位名稱", 必備
• VALE="欄位的內定值"
• SIZE="欄位的顯示寬度"
• MAXLENGTH="欄位資料輸入的最大長度"
• ACCESSKEY="英文字母"
• CHEDKED
• READONLY
• DISABLED

欄位型態 TYPE

有八種資料型態:

• TEXT
• PASSWORD
• HIDDEN
• RADIO
• CHECKBOX
• SUBMIT
• RESET
• IMAGE

PASSWORD的型態等同於TEXT, 但是不顯示其內容。

HIDDEN型態根本不顯示, 純供傳送給伺服器用, 不讓使用者變動其內容。

RADIO 單選, 以圓圈為記, 用欄位名稱NAME屬性指明其為同一個欄位, 搭配 CHECKED, 表示為內定的選擇, DISABLED 表示為不允許的選擇。傳送時, 以選定的 VALUE 值送出。

CHECKBOX 複選, 以方塊為記, 欄位名稱各不相同。

填表一定有兩個按鈕SUBMIT 與 RESET, 填表的資料才有意義。按下 SUBMIT 鈕, 則將欄位裡的資料傳送到伺服器端; 按下 RESET 鈕, 則清除欄位裡的資料, 恢復至原先的設定值。

IMAGE 當成按鈕使用, 另外多傳一組游標所在的座標值。

欄位名稱 NAME

需有意義, 否則以後在維護時會出問題。

內定值 VALE

沒有指定內定值, 則為空白。

寬度 SIZE

顯示在螢幕上的寬度, 內定值是20個字元。

輸入資料長度 MAXLENGTH

通常大於SIZE的顯示寬度, 若沒有設定, 則等於SIZE指定的寬度。

快速鍵 ACCESSKEY

指定一個按鈕為啟動的快速鍵。以Alt+B的方式, 指定B為啟動該欄位的快速鍵。

CHEDKED

指定部份選項是固定的。

READONLY

表示不能更改該欄位的內容。

DISABLED

表示不能選擇該欄位。

其他控制標籤

• SELECT
• TEXTAREA
• BUTTON
• FIELDSET 與 LEGEND

SELECT

<SELECT NAME="欄位名稱" SIZE="數字">

<OPTION VALUE="選項值" SELECTED>選項敘述
<OPTION VALUE="選項值">選項敘述

</SELECT>

指定顯示的選擇項目數, 以免過多的項目佔據畫面, 影響其他欄位的安排。

TEXTAREA

<TEXTAREA NAME="欄位名稱" COLS="高度" ROWS="寬度">

</TEXTAREA>

宣告一個長方型的本文區域, 供輸入該欄位的資料之用。

BUTTON

<BUTTON NAME="欄位名稱" TYPE="按鈕型態">

<IMG SRC="URL">

</BUTTON>

按鈕型態有 RESET 與 SUBMIT 兩種。可以選擇變化較多的圖片。

加外框

<FIELDSET>

<LEGEND>標題文字</LEGEND>
<INPUT>......</INPUT>

<LEGEND>標題文字</LEGEND>
<INPUT>......</INPUT>

</FIELDSET>

CGI

填表之後, 傳送給伺服器時, 需在 ACTION 屬性裡, 把定伺服器端的接收CGI程式位置, 以及用 ENCTPYE 屬性指定資料的編碼方式。

以 post 方式傳送比較安全, 資料串分批傳送, 有些系統把它放在不同的檔案裡, 其長度則存在環境變數 CONTENT_LENGTH, 其資料長度不設限。以 get 方式傳送時, 資料串存在環境變數 QUERY_STRING裡, 長度在256字元以內。