建立網站表單

在「設計」檢視中，表單會以虛線的紅色外框表示。 如果您沒有看到此外框，請選取「檢視 > 視覺輔助 > 隱藏元素」。

設定「屬性」檢視窗中 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：在目前視窗的內文中開啟目標文件。 這個值可以用來確保目標文件會接受完整的視窗，即使原始文件是顯示在頁框中也一樣。

在網頁中插入表單物件：

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

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

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

d. 設定物件的屬性。

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

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

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

使用換行符號、段落分隔符號、預先格式化的文字或 表格來格式化您的表單。 您無法在另一個 表單中插入表單 (也就是說，您無法重疊標記)，但您可以在頁面中包含多個 表單。

設計表單時，請記住要 使用描述性文字來標示表單欄位，讓使用者知道 他們正在回應什麼內容，例如「輸入您的姓名」來要求姓名 資訊。

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

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

指定可在欄位中顯示的字元數上限。

指定欄位可容納的字元數上限。如果使用者瀏覽來定位檔案，檔案名稱和路徑可能會超出指定的字元數上限值。但是，如果使用者嘗試輸入檔案名稱和路徑，檔案欄位只會允許字元數上限值所指定的字元數。

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

指定按鈕的名稱。 兩個保留名稱 Submit 和 Reset，分別告訴表單將表單資料提交給處理應用程式或指令碼，或者將所有表單欄位重設為其原始值。

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

讓您輸入描述文字，以防影像無法在瀏覽器中載入。

設定物件的對齊屬性。

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

讓您對物件套用 CSS 規則。

選取「插入 > 表單 > 選項按鈕群組」。

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

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

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

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

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

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

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

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

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

選取「插入 > 表單 > 核取方塊群組」。

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

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

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

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

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

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

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

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

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

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

將 HTML 清單/選單表單物件插入頁面：

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

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

請執行下列其中一項作業：

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

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

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

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

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

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

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

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

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

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

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

• 按一下「選取核取方塊，如果」方塊旁邊的閃電圖示，然後從資料來源清單中選取欄位。

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

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

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

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

您選取的記錄集包含符合選項按鈕勾選值的值。若要檢視選項按鈕的勾選值，請選取每個選項按鈕並開啟其屬性面板 (「視窗」>「屬性」)。

完成「動態資料」對話方塊，然後按一下「確定」。

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

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

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

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

例如，您可以指定人員年齡的文字欄位僅接受數字。

例如，您可以輸入尚未存在的函數名稱，例如 processMyForm()。

例如，您可以在文件的 head 區段中定義下列 JavaScript 函數，以便在使用者按一下「送出」按鈕時 顯示訊息：

function processMyForm(){

alert('Thanks for your order!');

}

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

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

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

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

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

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

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

注意：這是建議的無障礙選項，但功能可能因瀏覽器而異。

不使用標籤標記，如下所示：

使用鍵盤等效項 (一個字母) 和 Alt 鍵 (Windows) 或 Control 鍵 (Macintosh) 來在瀏覽器中選取表單物件。 例如，如果您輸入 B 作為 存取鍵，使用 Macintosh 瀏覽器的使用者可以輸入 Control+B 來選取表單物件。

指定表單物件的定位停駐點順序。 如果您為一個物件設定跳位順序，就必須為所有物件設定跳位順序。

當頁面上有其他連結和表單物件，且需要使用者按特定順序使用 Tab 鍵瀏覽時，設定 Tab 鍵順序會很有用。

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

• 在「程式碼」檢視中編輯適當的屬性。

• 按一下滑鼠右鍵 (Windows) 或按住 Control 鍵並按一下 (Macintosh)，然後選取「編輯標記」。