還在為了設計網頁的表單而苦惱嗎?快來試試看WebFormDesigner吧!

5
17,822 人次

如果你是網頁設計的相關工作者,相信常常會為了設計一個又一個麻煩的表單(form)而煩惱吧。Web Form Designer這套免費的軟體可以幫你解決這個困擾,它提供了類似Visual Studio的整合開發環境,可以直接拖曳出各式表單的元素,相當地直覺、方便,還具有內建的Javascript語法,輕鬆幫你檢查欄位是否填寫。設計好的表單,可以存成文字檔或複製到剪貼簿,直接跟DreamWeaver、FrontPage或Namo WebEditor等網頁設計軟體結合。有了Web Form Designer,讓設計表單不再是你的惡夢!

image

有設計過互動式網頁/網站的人應該都知道,表單是絕對少不了的東西,像登入表單、問卷調查、個人資料…等等,每次設計起來總是又繁瑣、又浪費時間。現在就讓這套免費的軟體–Web Form Designer為你代勞吧!你可以先藉著它幫你設計好一整套的表單,需要用到的時候只要呼叫出來修改一下,就可以馬上套用到你的網頁之中,省時又省力喔!

版本:1.2.1 (Freeware)
官方網站:http://www.webformdesigner.com/
下載點:http://www.webformdesigner.com/download.html (1036KB)

主畫面介紹

本軟體畫面分為幾個部份:

  • 表單元件:內建九種設計表單會用到的元件,先點選要用的元件,然後在表單設計畫面點一下滑鼠左鍵即可出現。
  • 元件屬性:可設定各個元件的屬性,包括元件名稱、尺寸、位置、字型、顏色…等。
  • 表單設計畫面:為所視即所得(WYSIWYG)的設計畫面,直接將元件放置於畫面中,就會在網頁裡出現一樣的表單。
  • 產生程式碼:將設計好的畫面輸出,供其他網頁軟體使用。

image

表單元件

Web Form Designer一共提供了九種元件,依按鈕順序(左至右)說明如下:

image

  1. 標籤(Text Label): 可輸入提示的文字。
    還可以設定文字對齊方式,自動調整尺寸(Autosize),並可加入超連結
    image
    (鎖頭圖示按下後,該元件會被鎖定,無法編輯或移動)
  2. 文字欄位(Text Edit):單行文字輸入方塊
    可以設定文字的初始值,文字的型態(文字或密碼),驗證方式(字母加數字、純字母、純數字、E-mail格式)
    如果勾選「This is a required filed」(這是必填欄位),使用者沒填寫該欄位就會出現警告畫面(內建Javascript提示),相當方便。
     image
  3. 文字區塊(Text Area):多行文字輸入方塊
    可設定文字初始值,高度(rows)及寬度(characters),還可設定3D效果。
    image
  4. 按鈕(Button):可加入各式的按鈕,並可選擇樣式及顏色。
     image
    按下「Advanced」按鈕後,會出現各種事件的動作欄位,可以在這邊填入對應的Javascript語法。
    image
  5. 下拉式選單(Dropdown Menu):下拉式選單中只有一個「Edit Values」的按鈕,按下後可以設定選單的內容。
    image
  6. 多選清單(Select List):與下拉式選單類似,多了允許多選(Allow multiple selection)跟高度(No. of rows)的欄位。
    image
  7. 單選按鈕(Radio Button):單選按鈕是以群組為單位,同一個群組的按鈕有相同的群組名稱(Group name),並且只能選擇一個。下方的Value when selected的欄位就是該按鈕被選取時會設定的值,如:要設計選擇性別,就使用兩個按鈕,都將Group Name設為sex,value則是一個設「男」、一個設「女」即可。下方的Initial state項目如果勾選,該按鈕就會為預設值。
    image
  8. 核取方塊(Check Box):類似是非題,只要點選,就會設定成輸入的值。
    image
  9. 造型方塊(Box Shape):可繪製不同顏色、透明度的方塊,可用於裝飾或表單的重點提示。
    image

 

如果在元件在按右鍵,會出現下方的選單。可以設定對齊格點(Align to Grid),或一次將多個元件整批對齊,還可以將元件往上層(front)或下層(back)移動。

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語法的部份,其他的什麼絕對、相對位置倒是不太用到。 […]

發表迴響