產成程式碼
按下「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,就會出現以下畫面,只要點選元件,然後按上下兩個按鈕就可以調整了,很方便吧!
結語
有了這套好用的軟體,相信以後你設計起互動網頁時一定更加順手,也可利用它建立自己的表單庫,方便日後套用。
請問一下,除了產生驗證的script外,
這個webformdesign跟使用dreamweaver
拖曳介面還有什麼差別嗎?
Web Form Designer 類似Visual Studio , Borland C++ Builder的界面,拉出來的元件都可以貼齊格點,方便排版,而轉出的HTML code裡面元件是用div標籤框住,位置是絕對座標,版面呈現會相當準確。
而DreamWeaver拉出的表單元件,並不會自動加入div標籤,所以位置是相對的,必須另行排版,不像Web Form Designer產生的表單元件那般準確。
希望這個解答你會滿意 🙂
PS: 其實光是自動驗證欄位的功能對我來說就相當好用了~
您好,我想請教一下,再軟體當中有提到 會需要一個test.php 才能發揮寄件表單的功能
這個 test.php 要如何產生呢? 盼望您能幫我解答疑惑 感激不盡
[…] 後來在「㊣軟體玩家」看到有篇文章介紹 WebFormDesigner 這套軟體時,頓時之間發覺在寫表單驗證程式就很容易上手。有興趣的人可以在「還在為了設計網頁的表單而苦惱嗎?快來試試看WebFormDesigner吧!」這篇文章中可以看到很詳細的教學。唯一的麻煩是驗證的提示文字要先用英文編寫,之後再去原始碼中修改成中文,不然會出現亂碼。但對於會寫網頁程式的人,應該不是很難。而且我只是取其中有關javascript語法的部份,其他的什麼絕對、相對位置倒是不太用到。 […]
他應該產生是都是絕對位置的屬性
Position:Absolute
好處是對齊很精準,但缺點是 對應不同大小螢幕縮放會比較死版