HTML 表格範例

Form Pages

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

---

在這個簡單的網頁中，我們介紹互動式網頁中最重要的 HTML 元件之一 -- form。 雖然在範例中，我們利用了簡單的 shell 以及 Perl 程式來當作後端的處理程式， 其 URL 可以用來呼叫各種語言寫成的後端程式 -- 例如，php、JSP、Java servlets 等。

1. GET/POST 與文字欄位
   • HTML form 的基本格式，藉由 mailto 的觸發來執行程式。
     告訴我你是誰：
   • 沒有 submit 的按鈕，但是可以藉由 "Enter" 來觸發後端的程式。由於使用 GET，"Enter" 後請注意網址欄的內容 -- ? 以及 data= 等資料。
     請輸入一段文字 (GET):
   • 在這個範例，還是請注意網址欄的內容，請留意兩個欄位的資料 -- data1 和 data2 -- 之間的分隔符號。另外，也可以試試看 reset 的功能！
     Shell 版
     請輸入第一段文字 (GET):
     請輸入第二段文字 (GET):
   • Perl 版
     請輸入第一段文字 (GET):
     請輸入第二段文字 (GET):
   • 這個範例不再使用 GET，而改以 POST 的方式進行，還是請注意網址欄的內容。 。從這個範例的執行，可以觀察出 GET 和 POST 在網址欄內容的差異。
     Shell 版
     請輸入一段文字 (POST):
   • Perl 版
     請輸入第一段文字 (POST):
     請輸入第二段文字 (POST):  
   
   
   
   
   
2. 各式各樣的 form 元件在這一段我們呈現了各式各樣 HTML form 的元件，請檢視其原始碼以瞭解用法。另外， 我們只著重於 form 元件的用法，如果需要用來呼叫後端的程式，請結合 之前介紹的用法即可。
   
   
   • 多選一：radio button。由於是多選一，請留意每一個 radio button 所 設定的名稱（name）值必須相同。
     班別 二技三A 二技三B
   • 可複選：checkbox
     專長 (可複選) 分散式處理 資料庫系統 電子商務
   • 下拉式選單：select 和 option。元件名稱定義在 select，而被選的選單 option 分別有不同的值。
     班別 二技三A 二技三B 二技四A 二技四B
   • 下拉式選單：跟前一個範例類似，只是呈現的選單數量變成 2。
     班別(size=2) 二技三A 二技三B 二技四A 二技四B
   • 允許多選的選單，其主要的差異在於設定 multiple。
     班別(multiple) 二技三A 二技三B 二技四A 二技四B
   • 文字區塊
     您的留言
     請留言!!
   • 密碼欄位
     請輸入你的代碼
     
   • form 與圖形的結合
   
   

---