產成程式碼

按下「Create Code」的按鈕,會先出現設定畫面,包括表單名稱、驗證方式,及表單傳送的位置(如test.php)、方式(POST/GET)及編碼(純文字或含檔案)。

image

選擇網頁的路徑是用相對或絕對路徑。(預設為相對路徑)

image

選擇表單資料欄位是否經過排序。

image 

最後一個步驟會出現表單的程式碼,可以直接透過瀏覽器來預覽,沒問題的話按下「Copy to clipboard」即可複製到剪貼簿。

image

最後將複製好的程式碼貼到你的網頁編輯軟體中的HTML原始碼(<body>跟</body>中間)就大功告成了!是不是很輕鬆呢?

貼到Dreamweaver後的成果,表單顯示相當正確,而且經過測試,中文字元也沒問題。

image

PS: 內建的表單驗證程式(javascript)提示文字為英文,必須從原始碼去下手修改,無法從軟體中修改

設定畫面

按下軟體上方的「Settings」裡面的「Options」,有許多選項可設定,像是格點距離、字型大小、表單大小,也可加入<Object>標籤以配合Dreamweaver。

image

那麼隱藏欄位呢?

如果你需要設計隱藏欄位,只需要到上方的Edit選單,選擇Show Form Properties,畫面左方就會出現隱藏欄位的方塊,按下+號即可新增。

image

如何調整元件的Tab順序?

在一個成功的表單裡,調整好Tab的順序是絕對需要的,如果使用者在填表時按下Tab鍵,結果發現游標亂跳,可能就氣得不想填了喔 🙂
到上方的Edit選單,選擇Show Filed Tab Index,就會出現以下畫面,只要點選元件,然後按上下兩個按鈕就可以調整了,很方便吧!

image

結語

有了這套好用的軟體,相信以後你設計起互動網頁時一定更加順手,也可利用它建立自己的表單庫,方便日後套用。

5 意見

  1. Web Form Designer 類似Visual Studio , Borland C++ Builder的界面,拉出來的元件都可以貼齊格點,方便排版,而轉出的HTML code裡面元件是用div標籤框住,位置是絕對座標,版面呈現會相當準確。
    而DreamWeaver拉出的表單元件,並不會自動加入div標籤,所以位置是相對的,必須另行排版,不像Web Form Designer產生的表單元件那般準確。
    希望這個解答你會滿意 🙂
    PS: 其實光是自動驗證欄位的功能對我來說就相當好用了~

  2. 您好,我想請教一下,再軟體當中有提到 會需要一個test.php 才能發揮寄件表單的功能
    這個 test.php 要如何產生呢? 盼望您能幫我解答疑惑 感激不盡

  3. […] 後來在「㊣軟體玩家」看到有篇文章介紹 WebFormDesigner 這套軟體時,頓時之間發覺在寫表單驗證程式就很容易上手。有興趣的人可以在「還在為了設計網頁的表單而苦惱嗎?快來試試看WebFormDesigner吧!」這篇文章中可以看到很詳細的教學。唯一的麻煩是驗證的提示文字要先用英文編寫,之後再去原始碼中修改成中文,不然會出現亂碼。但對於會寫網頁程式的人,應該不是很難。而且我只是取其中有關javascript語法的部份,其他的什麼絕對、相對位置倒是不太用到。 […]

發表迴響