2012年10月26日 星期五

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 分別有不同的值。
      班別
    • 下拉式選單:跟前一個範例類似,只是呈現的選單數量變成 2。
      班別(size=2)
    • 允許多選的選單,其主要的差異在於設定 multiple。
      班別(multiple)
    • 文字區塊
      您的留言
    • 密碼欄位
      請輸入你的代碼
    • form 與圖形的結合





沒有留言:

張貼留言