註解:

Dreamweaver Creative Cloud 更新已加強對 HTML 表單元素的支援。如需詳細資訊,請參閱加強對 HTML5 表單元素的支援

關於網站表單

當瀏覽者在網路瀏覽器所顯示的網站表單中輸入資訊,並按一下送出按鈕時,資訊會傳送到伺服器,由伺服器端 Script 或應用程式進行處理。伺服器會將處理過的資訊傳回給用戶 (或用戶端),或根據表單內容執行某個動作,做為回應。

您可以建立可將資料傳送到大部分應用程式伺服器的表單,包括 PHP、ASP 和 ColdFusion。如果您使用的是 ColdFusion,也可以在表單中新增 ColdFusion 特定的表單控制項。

註解:

您也可以將表單資料直接傳送給某位電子郵件收件者。

表單物件

在 Dreamweaver 中,表單輸入類型稱為「表單物件」。表單物件是可讓用戶輸入資料的機制。您可以在表單中新增下列表單物件:

文字欄位

接受任何類型的英數文字輸入。文字可以顯示為單行、多行,以及密碼欄位,在密碼欄位中輸入的文字會以星號或項目符號來取代,以隱藏文字而不被旁觀者看到。

表單物件

註解:

使用密碼欄位傳送給伺服器的密碼和其他資訊並未加密。傳送的資料可以被攔截及讀取為英數文字。基於此原因,針對要保持安全的資料,應該一律要提供加密。

隱藏欄位

儲存用戶輸入的資訊 (如名稱、電子郵件地址或檢視偏好設定),然後在用戶下次瀏覽網站時使用該資料。

按鈕

在按下時執行動作。您可以為按鈕新增自訂名稱或標籤,或者使用預先定義的「送出」或「重設」標籤之一。請使用按鈕將表單資料送出給伺服器,或重設表單。您也可以指派在 Script 中定義的其他處理工作。例如,按鈕可能會根據指定值來計算選取項目的總花費。

核取方塊

允許在單一選項群組內有多個回應。用戶可以選取能套用的所有選項。下列範例顯示三個選取的核取方塊項目:衝浪、登山單車及泛舟。

核取方塊

選項按鈕

代表獨佔式的選項。在群組內選取某個按鈕會取消選取群組 (群組由兩個或多個共用相同名稱的按鈕組成) 中所有其他的選項。在以下範例中,泛舟是目前選取的選項。如果用戶按一下衝浪泛舟按鈕就會自動清除。

選項按鈕

清單選單

顯示可讓用戶選取多個選項之捲動清單內的選項值。「清單」選項會顯示選單中的選項值,並只允許用戶選取單一項目。空間量有限卻必須顯示許多項目,或是要控制傳回到伺服器的值時,便可以使用選單。選單與文字欄位不同:用戶可以在文字欄位中鍵入任何資料,包括無效的資料;而您必須要確切設定選單所傳回的值。

註解:

HTML 表單上的彈出式選單與圖像彈出式選單不一樣。如需關於建立、編輯以及顯示和隱藏圖像彈出式選單的詳細資訊,請參閱本小節結尾的連結。

跳頁選單

導覽清單或彈出式選單,可以讓您插入一個選單,其中每個選項都會連結到文件或檔案。

檔案欄位

讓用戶能瀏覽至電腦上的檔案,並將檔案當做表單資料上傳。

影像欄位

可以讓您在表單中插入影像。使用影像欄位可以製作圖像按鈕,例如,「送出」或「重設」按鈕。您必須先將行為附加至表單物件,才能使用影像執行送出資料以外的工作。

建立 HTML 表單

(僅限 Creative Cloud 用戶):做為 HTML5 支援的一部分,已針對在「屬性」面板中引進新屬性。此外,4 個新的表單元素 (電子郵件、搜尋、電話、URL) 也已引進「插入」版面中的「表單」區段。如需詳細資訊,請參閱加強對 HTML5 表單元素的支援

  1. 開啟頁面,然後將插入點放在您希望表單出現的位置。
  2. 選取「插入 > 表單」或選取「插入」面板中的「表單」類別,然後按一下「表單」圖示。

    在「設計」檢視中,表單會以虛線的紅色外框表示。若您看不到這個外框,請選取「檢視>視覺輔助>隱藏元素」。

  3. 設定「屬性」檢視窗中 HTML 表單的屬性 (「視窗 > 屬性」):

    a. 在「文件」視窗中,按一下表單外框以選取表單。

    b. 在「表單名稱」方塊中,鍵入唯一的名稱以識別該表單。

    命名表單讓它可能得以參考或控制使用 Script 語言的表單,如 JavaScript 或 VBScript。如果沒有為表單命名,Dreamweaver 會使用 formn 語法產生名稱,並為加入網頁的每個表單遞增 n 值。

    c. 在「動作」方塊中,輸入路徑或按一下資料夾圖示瀏覽至適當的網頁或 Script,以指定將處理表單資料的網頁或 Script。例如,processorder.php。

    d. 在「方法」彈出式選單中指定方法,將表單資料傳輸到伺服器。

    設定下列任何一個選項:

    預設:使用瀏覽器的預設設定,將表單資料傳送到伺服器。一般來說,預設值為 GET 方法。

    GET:將值附加到在要求頁面的 URL。

    POST:在 HTTP 要求中內嵌表單資料。

    請勿使用 GET 方法傳送長表單。URL 限制為 8192 個字元。如果所傳送的資料量太大,資料將被截斷,導致未預期或失敗的處理結果。

    GET 方法傳遞的參數所產生的動態網頁可以加入書籤,因為重新產生頁面需要的所有值都包含在瀏覽器「網址」方塊中所顯示的 URL 中。相反地,POST 方法傳遞的參數所產生的動態網頁則無法加入至書籤。

    如果您收集機密性的用戶名稱和密碼、信用卡號碼或其他機密資訊時,POST 方法顯然會比 GET 方法更安全。然而,POST 方法所傳送的資訊並未加密,駭客很容易便可以擷取。為了確保安全,請使用安全的連線並連往安全的伺服器。

     

    e. (選擇性) 在「編碼類型」彈出式選單中,指定送出到伺服器以進行處理之資料的 MIME 編碼方式類型。

    application/x-www-form-urlencode 的預設值通常會與 POST 方法一併使用。如果您是在建立檔案上傳欄位,請指定 multipart/form‑data MIME 類型。

     

    f. (選擇性) 在「目標」彈出式選單中,指定要顯示由叫用之程式傳回資料的視窗。

    如果沒有開啟命名視窗的話,會以該名稱開啟一個新視窗。設定下列任何一個目標值:

    _blank:在新的未命名視窗中開啟目標文件。

    _parent:在顯示目前文件視窗的上一層視窗中開啟目標文件。

    _self:在送出表單的相同視窗中開啟目標文件。

    _top:在目前視窗的內文中開啟目標文件。這個值可以用來確保目標文件會接受完整的視窗,即使原始文件是顯示在頁框中也一樣。

  4. 在網頁中插入表單物件:

    a. 將插入點放在表單物件應該在表單中出現的位置。

    b. 在「插入 > 表單」選單中,或是「插入」面板的「表單」類別中選取物件。

    c. 完成「輸入標籤輔助功能屬性」對話方塊。如需詳細資訊,請按一下對話方塊中的「說明」按鈕。

    註解:

    如果您沒有看到「Input 標籤輔助功能屬性」對話方塊,可能是因為您在嘗試插入表單物件時,將插入點置於「程式碼」檢視中。請確認插入點位於「設計」檢視中,並再試一次。如需有關這個主題的詳細資訊,請參閱 David Powers 的文章:在 Dreamweaver 中建立 HTML 表單

    d. 設定物件的屬性。

    e. 在「屬性」檢視窗中輸入物件的名稱。

    每個文字欄位、隱藏欄位、核取方塊和清單/選單物件都必須具有可識別表單中物件的唯一名稱。表單物件名稱不能包含空格或特殊字元。您可以使用任何英數字元和底線 (_) 的組合。您指定給物件的標籤,就是儲存欄位值 (輸入的資料) 的變數名稱。這是傳送給伺服器以便進行處理的值。

    註解:

    同一群組中的所有選項按鈕名稱必須相同。

    f. 若要標示網頁上的文字欄位、核取方塊或選項按鈕,請在物件旁邊按一下並輸入標籤。

  5. 調整表單的版面。

    使用斷行符號、分段符號、預先格式化的文字或表格來格式化您的表單。您無法在另一個表單中插入表單 (也就是說,您無法重疊標籤),但是您可以在網頁中包含一個以上的表單。

    在設計表單時,請記得以描述性文字來標示表單欄位,讓用戶知道他們所回應的是何種要求,例如,使用「請鍵入您的名稱」來要求名稱資訊。

    使用表格來為表單物件和欄位標籤提供結構。在表單中使用表格時,請確定所有 table 標籤都包含在 form 標籤之間。

如需建立表單的教學課程,請參閱 www.adobe.com/go/vid0160_tw

如需使用 CSS 設定表單樣式的教學課程,請參閱 www.adobe.com/go/vid0161_tw

文字欄位物件屬性

選取文字欄位物件,並在「屬性」檢視窗中設定下列任何選項:

字元寬度

指定欄位中最多可以顯示的字元數。此數字可以小於「最多字元數」,後者是指定欄位中可以輸入的最多字元數。例如,如果「字元寬度」設定為 20 (預設值) 而用戶輸入 100 個字元,則在文字欄位將只能檢視到前 20 個字元。雖然您無法檢視欄位中的字元,欄位物件仍能辨識這些文字,而且這些文字會傳送到伺服器以進行處理。

最多字元數

指定用戶可以在單行文字欄位的欄位中輸入的最多字元數。使用「最多字元數」將郵遞區號限制為 5 位數、將密碼限制為 10 個字元等等。如果您讓「最多字元數」方塊保留空白,用戶便可以輸入任何字元數量的文字。如果文字超過欄位的字元寬度,文字將會捲動。如果用戶超過最多字元數,表單會產生警告聲音。

行數

(在選取「多行」選項時提供) 設定多行文字欄位的欄位高度。

已停用

停用文字區域。

唯讀

使文字區域成為唯讀文字區域。

類型

將欄位指定為單行、多行或密碼欄位。

單行

造成 input 標籤將其 type 屬性設定為 text。「字元寬度」設定會對應到 size 屬性,而「最多字元數」設定則對應到 maxlength 屬性。

多行

產生 textarea 標籤。「字元寬度」設定會對應到 cols 屬性,而「行數」設定則對應到 rows 屬性。

密碼

造成 input 標籤將其 type 屬性設定為 password。「字元寬度」和「最多字元數」設定的屬性對應與單行文字欄位的屬性對應相同。當用戶在密碼文字欄位中輸入時,輸入的文字會顯示為項目符號或星號,藉此保護密碼不會被別人看到。

初始值

指定第一次載入表單時,要在欄位中顯示的值。例如,您可能藉由包含一個備註或範例值,指示用戶在欄位中輸入資訊。

類別

讓您對物件套用 CSS 規則。

按鈕物件選項

按鈕名稱

指定按鈕的名稱。兩個保留名稱 (「送出」和「重設」) 分別會告知表單要將表單資料送給處理應用程式或 Script,或將所有表單欄位重設為它們的原始值。

決定出現在按鈕上的文字。

動作

決定按一下按鈕時會發生的動作。

送出表單

在用戶按一下按鈕時送出表單資料以進行處理。資料會送出到表單的「動作」屬性所指定的網頁或 Script。

重設表單

在按一下按鈕時清除表單的內容。

指定在按一下按鈕時要執行的動作。例如,您可以新增 JavaScript 行為,在用戶按一下按鈕時開啟另一個頁面。

類別

對物件套用 CSS 規則。

核取方塊物件選項

核取的值

設定在選取核取方塊時,要傳送到伺服器的值。例如,在意見調查中,您可能將非常滿意的值設定為 4,而非常不滿意的值設定為 1。

初始化狀態

決定當瀏覽器載入表單時,是否會選取核取方塊。

動態

讓伺服器動態地決定核取方塊的初始化狀態。例如,您可以使用核取方塊,以視覺化的方式呈現儲存在資料庫記錄中的「是/否」資訊。在設計階段時,您並不知道這些資訊。伺服器會在執行階段讀取資料庫記錄,如果值為「是」,便會選取核取方塊。

類別

對物件套用串接樣式表 (CSS) 規則。

單一選項按鈕物件選項

核取的值

設定當選取選項按鈕時,要傳送到伺服器的值。例如,您可以在「核取的值」方塊中鍵入滑雪,表示有一個用戶選擇了滑雪。

初始化狀態

決定當瀏覽器載入表單時,是否會選取選項按鈕。

動態

讓伺服器動態地決定選項按鈕的初始化狀態。例如,您可以使用選項按鈕,以視覺化的方式呈現儲存在資料庫記錄中的資訊。在設計階段時,您並不知道這些資訊。伺服器會在執行階段讀取資料庫記錄,如果其值與您所指定的值相符,便會選取選項按鈕。

類別

對物件套用 CSS 規則。

清單/選單

指定選單的名稱。名稱必須是唯一的。

類型

指出選單會在按一下時拉下 (「選單」選項) 或顯示可捲動的項目清單 (「清單」選項)。如果您希望在瀏覽器中顯示表單時,只會看到一個選項,請選取「表單」選項。若要顯示其他選項,用戶必須按一下向下鍵。

當表單在瀏覽器中顯示時,選取「清單」選項會列出一些或全部選項,讓用戶選取多個項目。

高度

(僅限「清單」類型) 設定選單中顯示的項目數目。

選取範圍

(僅限「清單」類型) 指出用戶是否可以從清單中選取多個項目。

清單值

開啟對話方塊,讓您新增項目至表單選單:

  1. 使用加號 (+) 和減號 (-) 按鈕來新增或移除清單中的項目。

  2. 為各選單項目輸入標籤文字及選擇性的值。

    清單中的每一個項目都有標籤 (出現在清單中的文字) 和值 (選取項目時傳送給處理應用程式的值)。如果沒有指定值,則換成將標籤傳送給處理應用程式。

  3. 使用向上和向下鍵按鈕來重新排列清單中的項目。

    項目在選單中出現的順序與在「清單值」對話方塊中出現的順序相同。當瀏覽器載入頁面時,清單上的第一個項目就是選取的項目。

動態

讓伺服器在初次顯示選單時,動態選取選單中的項目。

類別

讓您對物件套用 CSS 規則。

起始時已選取

設定清單中依預設選取的項目。按一下清單中的一個或多個項目。

插入檔案上傳欄位

您可以建立一個檔案上傳欄位,供用戶選取其電腦上的檔案 (如文書處理文件或圖像檔),並將檔案上傳至伺服器。檔案欄位除了還包含一個「瀏覽」按鈕之外,它看起來就像其他文字欄位一樣。用戶可以手動輸入要上傳的檔案路徑,或使用「瀏覽」按鈕找出並選取檔案。

您必須有能夠處理檔案送出的伺服器端 Script 或網頁,才能使用檔案上傳欄位。請參閱您用來處理表單資料的伺服器技術文件說明。例如,如果您使用 PHP,請參閱線上 PHP 手冊中的「處理檔案上傳」,網址為:http://us2.php.net/features.file-upload.php

您需要在檔案欄位中使用 POST 方法,才能將檔案從瀏覽器傳輸到伺服器。檔案會公佈到您在表單的「動作」方塊中指定的位址。

註解:

在使用檔案欄位之前,請先連絡您的伺服器管理員,以確認是否允許匿名檔案上傳。

  1. 在網頁中插入表單 (「插入>表單」)。
  2. 選擇要顯示其「屬性」檢視窗的表單。
  3. 將表單的「方法」設定為 POST
  4. 從「編碼類型」彈出式選單中,選取 multipart/form-data
  5. 在「動作」方塊中,指定能夠處理已上傳檔案的伺服器端 Script 或網頁。
  6. 將插入點放在表單外框內,並選取「插入>表單>檔案欄位」。
  7. 在「屬性」檢視窗中設定下列任何選項:

    檔案欄位名稱

    指定檔案欄位物件的名稱。

    字元寬度

    指定欄位中最多可以顯示的字元數。

    最多字元數

    指定欄位最多會保留的字元數。如果用戶是以瀏覽方式找到檔案的話,檔案名稱和路徑可以超過指定的「最多字元數」值。但是,如果用戶嘗試輸入檔案名稱和路徑,則檔案欄位將只允許「最多字元數」值所指定的字元數。

插入影像按鈕

您可以使用影像做為按鈕圖示。您必須先將行為附加至表單物件,才能使用影像執行送出資料以外的工作。

  1. 在文件中,將插入點放在表單外框內。
  2. 選取「插入>表單>影像欄位」。

    「選取影像原始檔」對話方塊便會出現。

  3. 在「選取影像原始檔」對話方塊中選取按鈕的影像,然後按一下「確定」。
  4. 在「屬性」檢視窗中設定下列任何選項:

    影像欄位

    指定按鈕的名稱。兩個保留名稱 (「送出」和「重設」) 分別會告知表單要將表單資料送給處理應用程式或 Script,或將所有表單欄位重設為它們的原始值。

    原始檔

    指定要用在按鈕上的影像。

    替代

    讓您輸入描述性文字,在瀏覽器無法載入影像的情況下將其載入。

    對齊

    設定物件的對齊屬性。

    編輯影像

    啟動您的預設影像編輯器,並開啟要編輯的影像檔案。

    類別

    讓您對物件套用 CSS 規則。

  5. 若要將 JavaScript 行為附加至按鈕,請選取影像,然後在「行為」面板 (「視窗>行為」) 中選取行為。

隱藏欄位物件選項

隱藏欄位

指定欄位的名稱。

指定欄位的值。這個值會在送出表單時,傳遞到伺服器。

插入選項按鈕群組

  1. 將插入點放在表單外框內。
  2. 選取「插入 > 表單 > 選項按鈕群組」。

  3. 完成這個對話方塊,然後按一下「確定」。

    a. 在「名稱」方塊中,輸入選項按鈕群組的名稱。

    如果您設定選項按鈕將參數傳回給伺服器,參數便會與名稱相關聯。例如,如果您將群組命名為 myGroup,並將表單方法設定為 GET (也就是說,您希望當用戶按送出按鈕時,表單會傳遞 URL 參數,而不是傳遞表單參數),則 myGroup="CheckedValue" 運算式將在 URL 中傳遞給伺服器。

    b. 按一下加號 (+) 按鈕,將選項按鈕新增至群組中。為新的按鈕輸入標籤與核取值。

    c. 按一下向上或向下鍵來重新排序按鈕。

    d. 若要在瀏覽器開啟網頁時,已經選取了特別的選項按鈕,請在「選取的值等於」方塊中輸入選項按鈕值的相等值。

    輸入靜態值或是按一下方塊旁邊的閃電圖示,並選取包含可能核取值的資料集,以指定動態的值。不論是哪一種情況,您指定的值應該要符合群組的任一選項按鈕的核取值。若要檢視選項按鈕的核取值,請選取每個選項按鈕,然後開啟它的「屬性」檢視窗 (「視窗 > 屬性」)。

    e. 選取您要 Dreamweaver 配置按鈕的格式。使用斷行符號或表格來配置按鈕。如果您選取表格選項,Dreamweaver 便會建立單欄表格,並將選項按鈕放在左邊,標籤放在右邊。

    您也可以使用「屬性」檢視窗或直接在「程式碼」檢視中設定屬性。

插入核取方塊群組

  1. 將插入點放在表單外框內。
  2. 選取「插入 > 表單 > 核取方塊群組」。

  3. 完成這個對話方塊,然後按一下「確定」。

    a. 在「名稱」方塊中,輸入核取方塊群組的名稱。

    如果您設定核取方塊會將參數傳回給伺服器,參數便會與名稱相關聯。例如,如果您將群組命名為 myGroup,並將表單方法設定為 GET (也就是說,您希望當用戶按送出按鈕時,表單會傳遞 URL 參數,而不是傳遞表單參數),則 myGroup="CheckedValue" 運算式將在 URL 中傳遞給伺服器。

    b. 按一下加號 (+) 按鈕,將核取方塊新增至群組中。為新的核取方塊輸入標籤與核取的值。

    c. 按一下向上或向下箭頭來重新排序核取方塊。

    d. 若要在瀏覽器開啟網頁時,已經選取了特別的核取方塊,請在「選取的值等於」方塊中輸入核取方塊值的相等值。

    輸入靜態值或是按一下方塊旁邊的閃電圖示,並選取包含可能核取值的資料集,以指定動態的值。不論是哪一種情況,您指定的值應該要符合群組中任一核取方塊的核取值。若要檢視核取方塊的核取值,請選取每個核取方塊,然後開啟它的「屬性」檢視窗 (「視窗 > 屬性」)。

    e. 選取您要 Dreamweaver 配置核取方塊的格式。

    使用斷行符號或表格來配置核取方塊。如果您選取表格選項,Dreamweaver 便會建立單欄表格,並將核取方塊放在左邊,標籤放在右邊。

    您也可以使用「屬性」檢視窗或直接在「程式碼」檢視中設定屬性。

關於動態表單物件

「動態表單物件」是一種表單物件,其初始狀態是在向伺服器要求頁面時由伺服器所決定,而不是由表單設計人員在設計階段時決定的。 例如,當用戶要求具有選單的 PHP 頁面時,頁面中的 PHP Script 就可以自動使用儲存在資料庫中的值填入選單中。然後,伺服器就會將完成的頁面傳送到用戶的瀏覽器。

使用動態表單物件可以簡化網站維護工作。例如,許多網站都是使用選單以呈現一組選項給用戶。如果選單是動態的,您就可以在單一位置 (儲存項目的資料庫表格) 中新增、移除或變更選單項目,以更新網站上相同選單的所有實體。

插入或變更動態 HTML 表單選單

您可以使用資料庫的項目,以動態方式填入 HTML 表單選單或清單選單。您可以在大部分的網頁中使用 HTML 選單物件。

在開始之前,您必須在 ColdFusion、PHP 或 ASP 頁面中插入 HTML 表單,而且必須為該選單定義資料集或其他動態內容來源。

  1. 將 HTML 清單/選單表單物件插入頁面:

    a. 按一下頁面上的 HTML 表單內部 (「插入 > 表單 > 表單」)。

    b. 選取「插入 > 表單 > 清單/選單」以插入表單物件。

  2. 請執行下列其中一項作業:

    • 選取新的或現有的 HTML 清單/選單表單物件,然後在「屬性」檢視窗中按一下「動態」按鈕。

    • 選取「插入 > 資料物件 > 動態資料 > 動態選取清單」。

  3. 完成「動態清單/選單」對話方塊,然後按一下「確定」。

    a. 在「資料集選項」彈出式選單中,選取要做為內容來源的資料集。稍後,您也會使用這個選單來編輯靜態和動態清單/選單項目。

    b. 在「靜態選項」區域中,輸入清單或選單中的預設項目。此外,請在新增動態內容之後,使用這個選項來編輯清單/選單表單物件中的靜態項目。

    c. (選擇性) 使用加號 (+) 和減號 (–) 按鈕,新增及移除清單中的項目。項目的順序與「初始清單值」對話方塊中的順序相同。當瀏覽器載入頁面時,清單上的第一個項目就是選取的項目。使用向上和向下鍵按鈕來重新排列清單中的項目。

    d. 在「值」彈出式選單中,選取包含選單項目值的欄位。

    e. 在「標籤」彈出式選單中,選取包含選單項目標籤的欄位。

    f. (選擇性) 若要指定當瀏覽器開啟網頁,或在表單中顯示記錄時,已經選取特別的選單項目,請在「選取的值等於」方塊中輸入選單項目值的相等值。

    您可以輸入靜態值或指定動態值,只要按一下方塊旁邊的閃電圖示並從資料來源清單中選取一個動態值即可。不論是哪一種情況,您指定的值應該要符合其中一個選單項目值。

     

使現有的 HTML 表單選單呈現動態效果

  1. 在「設計」檢視中,選取清單/選單表單物件。
  2. 在「屬性」檢視窗中,按一下「動態」按鈕。
  3. 完成這個對話方塊,然後按一下「確定」。

在 HTML 文字欄位中顯示動態內容

在瀏覽器中檢視表單時,您可以在 HTML 文字欄位中顯示動態內容。

在開始之前,您必須在 ColdFusion、PHP 或 ASP 頁面中建立表單,而且必須為該文字欄位定義資料集或其他動態內容來源。

  1. 在網頁上的 HTML 表單中選取文字欄位。
  2. 在「屬性」檢視窗中,按一下「初始值」方塊旁的閃電圖示,以顯示「動態資料」對話方塊。
  3. 選取將提供值給文字欄位的資料集欄,然後按一下「確定」。

設定動態文字欄位對話方塊選項

  1. 從「文字欄位」彈出式選單中,選取要呈動態效果的文字欄位。
  2. 按一下「選取的值等於」方塊旁邊的閃電圖示,從資料來源清單中選取一種資料來源,然後按一下「確定」。

    資料來源應該包含文字資訊。如果清單中並未出現任何資料來源,或者可用的資料來源不符合您的需要,請按一下加號 (+) 按鈕定義新的資料來源。

動態預先選取 HTML 核取方塊

當表單在瀏覽器中顯示時,您可以讓伺服器決定是否要選取核取方塊。

在開始之前,您必須在 ColdFusion、PHP 或 ASP 頁面中建立表單,而且必須為該核取方塊定義資料集或其他動態內容來源。理想的情況是,內容來源應包含 Boolean 資料,例如「Yes/No」或「True/False」。

  1. 在頁面上選取核取方塊表單物件。
  2. 在「屬性」檢視窗中,按一下「動態」按鈕。
  3. 完成「動態核取方塊」對話方塊,然後按一下「確定」。
    • 按一下「如果以下條件為真,請選取」方塊旁邊的閃電圖示,然後從資料來源清單中選取欄位。

      資料來源必須包含 Boolean 資料,如 YesNo,或 truefalse。如果清單中並未出現任何資料來源,或者可用的資料來源不符合您的需要,請按一下加號 (+) 按鈕定義新的資料來源。

    • 在「等於」方塊中,為要顯示為已選取狀態的核取方塊輸入欄位必須擁有的值。

      例如,如果在記錄中的特定欄位有 Yes 值時,您要核取方塊顯示為已選取狀態,請在「等於」方塊中輸入 Yes

    註解:

    如果用戶按一下表單的「送出」按鈕,也會將這個值傳給伺服器。

動態預先選取 HTML 選項按鈕

當瀏覽器中的 HTML 表單顯示一筆記錄時,會動態預先選取 HTML 選項按鈕。

在開始之前,您必須先在 ColdFusion、PHP 或 ASP 頁面中建立表單,然後插入至少一組 HTML 選項按鈕 (「插入 > 表單 > 選項按鈕群組」)。您也必須定義該選項按鈕動態內容的資料集或其他來源。理想的情況是,內容來源應包含 Boolean 資料,例如「Yes/No」或「True/False」。

  1. 在「設計」檢視中的選項按鈕群組內,選取選項按鈕。
  2. 在「屬性」檢視窗中,按一下「動態」按鈕。
  3. 完成「動態選項按鈕群組」對話方塊,然後按一下「確定」。

設定動態選項按鈕群組對話方塊選項

  1. 在「選項按鈕群組」彈出式選單中,選取網頁中的表單和選項按鈕群組。

    「選項按鈕值」方塊會顯示群組中所有選項按鈕的值。

  2. 選取一個值,從值的清單動態預先選取。此值將顯示在「值」方塊中。
  3. 按一下「選取的值等於」方塊旁邊的閃電圖示,並選取資料集,該資料集需包含群組中選項按鈕的可能核取值。

    您選取的資料集應該包含符合選項按鈕之核取值的值。若要檢視選項按鈕的核取值,請選取每個選項按鈕,然後開啟它的「屬性」檢視窗 (「視窗 > 屬性」)。

  4. 按一下「確定」。

設定動態選項按鈕群組對話方塊選項 (ColdFusion)

  1. 從「選項按鈕群組」彈出式選單中選取選項按鈕群組和表單。
  2. 按一下「選取的值等於」方塊旁邊的閃電圖示。
  3. 完成「動態資料」對話方塊,然後按一下「確定」。

    a. 請從資料來源清單中選取資料來源。

    b. (選擇性) 選取文字的資料格式。

    c. (選擇性) 修改 Dreamweaver 會插入頁面以顯示動態文字的程式碼。

  4. 按一下「確定」以關閉「動態選項按鈕群組」對話方塊,並在「選項按鈕群組」中插入動態內容預留位置。

驗證 HTML 表單資料

Dreamweaver 可以新增 JavaScript 程式碼,以檢查指定文字欄位的內容,進而確保用戶已輸入正確的資料類型。

您可以使用 Spry 表單 Widget 來建立表單,並驗證特定表單元素的內容。如需詳細資訊,請參閱底下列出的 Spry 主題。

您也可以在 Dreamweaver 中建立 ColdFusion 表單,以驗證指定之欄位的內容。如需詳細資訊,請參閱下方所列的 ColdFusion 章節。

  1. 建立至少包括一個文字欄位及一個「送出」按鈕的 HTML 表單。

    確定要驗證的每個文字欄位都有唯一的名稱。

  2. 選取「送出」按鈕。
  3. 在「行為」面板 (「視窗>行為」) 中,按一下加號 (+) 按鈕,然後從清單中選取「驗證表單」行為。
  4. 設定各文字欄位的驗證規則,然後按一下「確定」。

    例如,您可能會指定個人年齡的文字欄位只能接受數字。

    註解:

    「驗證表單」行為只有在已將文字欄位插入文件時才能使用。

將 JavaScript 行為附加至 HTML 表單物件

您可以將儲存在 Dreamweaver 中的 JavaScript 行為附加至 HTML 表單物件,如按鈕。

  1. 選取 HTML 表單物件。
  2. 在「行為」面板 (「視窗>行為」) 中,按一下加號 (+) 按鈕,然後從清單中選取行為。

附加自訂 Script 至 HTML 表單按鈕

有些表單會使用 JavaScript 或 VBScript 在用戶端上執行表單處理或其他動作 (與傳送表單資料給伺服器進行處理相反)。您可以使用 Dreamweaver 設定表單按鈕,在用戶按一下按鈕時,執行特定的用戶端 Script。

  1. 在表單中選取「送出」按鈕。
  2. 在「行為」面板 (「視窗>行為」) 中,按一下加號 (+) 按鈕,然後從清單中選取「呼叫 JavaScript」。
  3. 在「呼叫 JavaScript」方塊中,輸入要在用戶按一下按鈕時執行的 JavaScript 函式名稱,然後按一下「確定」。

    例如,您可以輸入目前不存在的函式名稱,例如 processMyForm()

  4. 如果文件中的 head 區段還沒有 JavaScript 函式,請現在加進去。

    例如,您可以在文件的 head 區段中定義下列 JavaScript 函式,以在用戶按一下「送出」按鈕時顯示訊息。

    function processMyForm(){ 
        alert('Thanks for your order!'); 
    }

建立具有輔助功能的 HTML 表單

當您插入 HTML 表單物件時,您可以讓表單物件具有輔助功能,而且也可以在稍後變更輔助功能屬性。

新增具有輔助功能的表單物件

  1. 第一次新增具有輔助功能的表單物件時,請對表單物件啟動「輔助功能」對話方塊 (請參閱最佳化視覺開發的工作區)。

    這是只需做一次即可的步驟。

  2. 在文件中,將插入點放在您要表單物件出現的地方。
  3. 選取「插入>表單」,然後選取要插入的表單物件。

    「Input 標籤輔助功能屬性」對話方塊便會出現。

  4. 完成這個對話方塊,然後按一下「確定」。以下是選項的部分清單:

    註解:

    螢幕讀取器會將您所輸入的名稱朗讀為物件的「標籤」屬性。

    ID

    為表單欄位指定一個 ID。此值可用來參照來自 JavaScript 的欄位;也可在您選擇「樣式」選項底下的「使用 for 屬性附加標籤標記」選項時,當做 for 屬性值來使用。

    以標籤標記圍繞

    在表單項目的周圍以標籤標記圍繞,如下所示:

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    使用 for 屬性附加標籤標記

    使用 for 屬性,在表單項目的周圍以標籤標記圍繞,如下所示:

    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

    這項選擇會使瀏覽器呈現與核取方塊關聯的文字,以及具有焦點矩形的選項按鈕。而且用戶只要在關聯文字中的任何位置按一下 (不一定要在核取方塊或選項按鈕控制項中),就可以選取核取方塊和選項按鈕。

    注意:這是輔助功能的常用選項,但是功能或許會因瀏覽器而有所不同。

    沒有標籤標記

    不使用標籤標記,如下所示:

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    存取鍵

    使用對等鍵盤按鍵 (一個字母) 與 Alt 鍵 (Windows) 和 Control 鍵 (Macintosh),在瀏覽器中選取表單物件。例如,如果您輸入 B 做為「存取鍵」,使用 Macintosh 瀏覽器的用戶可以輸入 Control+B 來選取表單物件。

    定位停駐點索引

    指定表單物件的定位停駐點順序。如果您設定了某個物件的定位停駐點順序,就必須對所有物件設定定位停駐點順序。

    如果頁面上有其他連結和表單物件,而且需要用戶依特定順序以 Tab 鍵在其中依序移動,設定 Tab 鍵順序就很有用處。

  5. 按一下「是」以插入表單標籤。

    表單物件便會出現在文件中。

    註解:

    如果您按「取消」,表單物件也會出現在文件中,不過 Dreamweaver 並不會與輔助功能標籤或屬性產生關聯。

編輯表單物件的輔助功能值

  1. 在「文件」視窗中選取物件。
  2. 請執行下列其中一項作業:
    • 在「程式碼」檢視中編輯適當的屬性。

    • 按一下右鍵 (Windows) 或 Control+按一下 (Macintosh),然後選取「編輯標籤」。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策