表單製作


阿瑟 發表



在申請東西時,相信大家都填寫過Web表單。這次阿得要告訴您怎麼自己做表單,不過要注意的一點是…表單本身是沒有作用的,您必須要配合網頁程式或是Script語言來運用。

STEP1:【前言】
在申請東西時,相信大家都填寫過Web表單。這次阿得要告訴您怎麼自己做表單,不過要注意的一點是...表單本身是沒有作用的,您必須要配合網頁程式或是Script語言來運用。

STEP2:【表單元件介紹】
範例 說明
這個很簡單,是一個文字輸入方塊
這是常常見到的密碼輸入方塊
酷必教學
酷必評鑑
這是單一選取方塊,按按看就知道了..您只能選其一,比較討厭的地方就是這種選取方塊一旦選取就不能夠消除
酷必教學
酷必評鑑
這是勾取方塊,按按看就知道了..這個可以選取多項而且可以取消選取..阿得最喜歡這種..有質感!!
這種選單常常用到,一次只能選擇一個項目
其實這個和上面的選單一樣,只是改變的面貌...
也是一樣的選單...只是這次可以選取多個項目(拖曳即可)
這是上傳檔案時會用到的檔案選取功能
最普通的按鈕
按下可以送出表單(在這邊阿得把範例的送出功能拿掉了)
按下以後您會看到上面所有選取的東西都會被清除
炫吧,這種漂亮的按鈕只有Internet Explorer才能用
還有一個很酷的功能就是把圖片拿來當作按鈕!!


STEP3:【語法教學】
這是一個簡單的表單
<form>
輸入一段文字:<input type="text" size=15>
</form>



這段語法輸出的樣子...

輸入一段文字:

這段語法需要注意的一點就是,要使用表單必須要有<form></form>包著所有的表單元件。

以下是所有表單元件的語法:
內定值的意思就是表單一開始中間的數值

範例 語法
<input type="text" size=15 value="內定數值">
內定值像是範例中的hello,你在引號中打的就會出現,通常我們都不會輸入內定值
size就是此元件的長度,name是該元件的識別名稱(這個在Javascript或是ASP中會有實際應用)
<input type="password" size=15 value="內定數值">
酷必教學
酷必評鑑
<input type="radio" name=hello>
酷必教學
酷必評鑑
<input type="checkbox" name=hello>
<select>
<option>出現的文字</option> </select>
出現的文字可以隨意輸入,像是上面阿得就輸入了酷必教學和酷必評鑑
option標籤您可以隨意增加或是減少...
<select size=3>
<option>出現的文字</option> </select>
size您可以自己改,size大於1就會變成這個樣子
<select size=3 multiple>
<option>出現的文字</option> </select>
加上multiple就可以選取多個項目了
<input type="file">
哈哈,看似專業的玩意其實就這麼簡單..
<input type="button" value="內定值">
這個普通按鈕一定要打內定值,不打的話您的按鈕就是空的了
<input type="submit" value="內定值">
送出按鈕的內定值可以不打但是阿得建議還是打一下
<input type="reset" value="內定值">
清除按鈕的內定值可以不打但是阿得建議還是打一下
<button>這邊可以用HTML寫<input type="button" value="內定值"></button>
這種看起來很酷的按鈕阿得不建議使用,如果要使用的話一定要像這裡一樣後面加上一個普通的按鈕否則IE以外的瀏覽器都看不到了
中間的直接用img src=....就可以插入圖片,這個按鈕裡面甚至可以有另一份網頁,呵呵...很有趣的功能
<input type="image" src="圖片路徑" border=0>
像是圖片一樣,打入圖片路徑就ok了,border=0 打了以後才不會有醜醜的藍色邊框


STEP4:【結語】
差不多這樣囉,大家可以玩玩看,實際要用到表單可能要等到學Javascript或是ASP之類的語言才會真的用到。

最後更新日期: 11/10/2001 10:15:50 PM