如果你是網頁設計的相關工作者，相信常常會為了設計一個又一個麻煩的表單(form)而煩惱吧。Web Form Designer這套免費的軟體可以幫你解決這個困擾，它提供了類似Visual Studio的整合開發環境，可以直接拖曳出各式表單的元素，相當地直覺、方便，還具有內建的Javascript語法，輕鬆幫你檢查欄位是否填寫。設計好的表單，可以存成文字檔或複製到剪貼簿，直接跟DreamWeaver、FrontPage或Namo WebEditor等網頁設計軟體結合。有了Web Form Designer，讓設計表單不再是你的惡夢！
有設計過互動式網頁/網站的人應該都知道，表單是絕對少不了的東西，像登入表單、問卷調查、個人資料…等等，每次設計起來總是又繁瑣、又浪費時間。現在就讓這套免費的軟體–Web Form Designer為你代勞吧！你可以先藉著它幫你設計好一整套的表單，需要用到的時候只要呼叫出來修改一下，就可以馬上套用到你的網頁之中，省時又省力喔！
版本：1.2.1 (Freeware)
官方網站：http://www.webformdesigner.com/
下載點：http://www.webformdesigner.com/download.html (1036KB)
主畫面介紹
本軟體畫面分為幾個部份：
- 表單元件：內建九種設計表單會用到的元件，先點選要用的元件，然後在表單設計畫面點一下滑鼠左鍵即可出現。
- 元件屬性：可設定各個元件的屬性，包括元件名稱、尺寸、位置、字型、顏色…等。
- 表單設計畫面：為所視即所得(WYSIWYG)的設計畫面，直接將元件放置於畫面中，就會在網頁裡出現一樣的表單。
- 產生程式碼：將設計好的畫面輸出，供其他網頁軟體使用。
表單元件
Web Form Designer一共提供了九種元件，依按鈕順序(左至右)說明如下：
- 標籤(Text Label)： 可輸入提示的文字。
還可以設定文字對齊方式，自動調整尺寸(Autosize)，並可加入超連結。
(鎖頭圖示按下後，該元件會被鎖定，無法編輯或移動) - 文字欄位(Text Edit)：單行文字輸入方塊
可以設定文字的初始值，文字的型態(文字或密碼)，驗證方式(字母加數字、純字母、純數字、E-mail格式)
如果勾選「This is a required filed」(這是必填欄位)，使用者沒填寫該欄位就會出現警告畫面(內建Javascript提示)，相當方便。
- 文字區塊(Text Area)：多行文字輸入方塊
可設定文字初始值，高度(rows)及寬度(characters)，還可設定3D效果。
- 按鈕(Button)：可加入各式的按鈕，並可選擇樣式及顏色。
按下「Advanced」按鈕後，會出現各種事件的動作欄位，可以在這邊填入對應的Javascript語法。
- 下拉式選單(Dropdown Menu)：下拉式選單中只有一個「Edit Values」的按鈕，按下後可以設定選單的內容。
- 多選清單(Select List)：與下拉式選單類似，多了允許多選(Allow multiple selection)跟高度(No. of rows)的欄位。
- 單選按鈕(Radio Button)：單選按鈕是以群組為單位，同一個群組的按鈕有相同的群組名稱(Group name)，並且只能選擇一個。下方的Value when selected的欄位就是該按鈕被選取時會設定的值，如：要設計選擇性別，就使用兩個按鈕，都將Group Name設為sex，value則是一個設「男」、一個設「女」即可。下方的Initial state項目如果勾選，該按鈕就會為預設值。
- 核取方塊(Check Box)：類似是非題，只要點選，就會設定成輸入的值。
- 造型方塊(Box Shape)：可繪製不同顏色、透明度的方塊，可用於裝飾或表單的重點提示。
如果在元件在按右鍵，會出現下方的選單。可以設定對齊格點(Align to Grid)，或一次將多個元件整批對齊，還可以將元件往上層(front)或下層(back)移動。
產成程式碼
按下「Create Code」的按鈕，會先出現設定畫面，包括表單名稱、驗證方式，及表單傳送的位置(如test.php)、方式(POST/GET)及編碼(純文字或含檔案)。
選擇網頁的路徑是用相對或絕對路徑。(預設為相對路徑)
選擇表單資料欄位是否經過排序。
最後一個步驟會出現表單的程式碼，可以直接透過瀏覽器來預覽，沒問題的話按下「Copy to clipboard」即可複製到剪貼簿。
最後將複製好的程式碼貼到你的網頁編輯軟體中的HTML原始碼(<body>跟</body>中間)就大功告成了！是不是很輕鬆呢?
貼到Dreamweaver後的成果，表單顯示相當正確，而且經過測試，中文字元也沒問題。
PS: 內建的表單驗證程式(javascript)提示文字為英文，必須從原始碼去下手修改，無法從軟體中修改。
設定畫面
按下軟體上方的「Settings」裡面的「Options」，有許多選項可設定，像是格點距離、字型大小、表單大小，也可加入<Object>標籤以配合Dreamweaver。
那麼隱藏欄位呢？
如果你需要設計隱藏欄位，只需要到上方的Edit選單，選擇Show Form Properties，畫面左方就會出現隱藏欄位的方塊，按下＋號即可新增。
如何調整元件的Tab順序？
在一個成功的表單裡，調整好Tab的順序是絕對需要的，如果使用者在填表時按下Tab鍵，結果發現游標亂跳，可能就氣得不想填了喔 
到上方的Edit選單，選擇Show Filed Tab Index，就會出現以下畫面，只要點選元件，然後按上下兩個按鈕就可以調整了，很方便吧！
結語
有了這套好用的軟體，相信以後你設計起互動網頁時一定更加順手，也可利用它建立自己的表單庫，方便日後套用。
留言列表
