1. 基本架構:
  2. <form method="get/post" enctype="data type" action="URL">
          <六個主要控制標籤><!--如下說明-->
    </form> <!--表單結束標籤-->
    form 表單開始宣告
    method=傳遞方式(get/post)
    enctype=資料處理指格式
    URL=定程式存放的所在目錄位置及檔名

  3. 標籤 method 屬性:
  4. get:
    使用 get 時,會先解碼附於URL後再傳至指定伺服器處理,資料有長度限制
    (一般用於搜索引擎)。
    post:
    採用 post 時,可將資料本身成對的可變名稱值,傳入伺服器處理,資料無長度限制
    (我們大部份會使用此方法)。

  5. 標籤 enctype 屬性:
  6. 一般都不加此標籤(選項),屬性值用來指出資料的格式是否需要經過編碼,
    屬性為 "application/x-www-form-urlencoded"
    使用於mailto時(用於寄信),屬性值為 "text/plain"
    使用於 type="file" 時(用於上傳檔案),屬性值為 "multipart/form-data"

  7. 標籤 action 屬性:
  8. "URL":
    指定CGI、ASP、PHP等程式存放的超連結所在目錄位置及檔名(可使用相對或絕對路徑)。

  1. 六個主要控制標籤及屬性:
  2. (如果記不住,沒關係;用英文字意來聯想他的功能)
    1. 輸入表單:input
    2. 共有22個屬性:(參考範例)
      <input type="." name="."、 value="."、
      size="."、 maxlenght="." 、checked="."
      、readonly="."、 disabled="."、 accesskey=".">  

    3. 選擇表單:select
    4. <select>..option..</select>
      下拉式選擇表單,用於設定窗型欄位,每個選項以<option>來宣告他 。

    5. 文字填寫區域:textarea
    6. <textarea name="text" cols="長度" rows="高"> 可寫文字,不用value
      cols="長(寬)度"單位字元、rows="高"單位列。

    7. 圖片按鈕:button
    8. <button type="submit" name="傳送"><img src="accept.gif">
      <button type="reset" name="重寫"><img src="cancel.gif">
      <button type="button" name="" value="不寄了,離開 " onClick="window.close()">
      <img src="naccept.gif">
      </button>

    9. 使用 mailto
    10. <form method="post" action="mailto:hc6675@hcvs.kh.edu.tw" enctype="text/plain">
          郵件信箱E-Mail <input type=text name="email" size="30" maxlength="50">
          <textarea cols="60" rows="5" name="yourmessage">
      </textarea>
      </form>
  1. 網頁表單標籤,讓您的網頁可以輸入並藉CGI等程式輸出資料,產生互動關係。
  2. 現在我們用幾個實例來逐一介紹這幾組標籤(請用檢視=>原始碼查看;並請NS比較差異處)。
    1. <input type="9種型態">type & name為必須要欄位,其餘視狀況需要選用。
    2. <select>..option..</select>選擇欄位表單
    3. <textarea 屬性及值>..文字輸入區..</textarea>需較多空間來填寫意見或建議事項時用
    4. 【實用表單】參考別人如何製作表單
  3. 其他注意事項:
    1. 本課程內,已開始引用一些JavaScript程式語言,建議您用檢視=>原始碼觀看,自己先練習看看。
    2. 關於 JavaScript 程式語言,您可以參考 本網站之另一 JavaScript 教學區
    3. 表單製作標籤,看起來很多,建議您不用去背他,只要知道他的使用時機與道理,以後用套的就行。
    4. 【表單製作】很重要,下階段我們要學CGI等基本程式,這些都會用上,有空請多加熟悉內容。
    5. 網頁想互動起來,很多地方都要借助表單來運作,好戲即將上場,敬請期待。
    6. 請避免 錯誤的表單 巢狀包覆。
  4. 本次作業:
    1. 請依據您自己網站需求,參考這些範例或別人網站用法,完成一個寄信表單。
    2. 然後做個 Linking 命名為 mail.htm ,上傳到您的主機目錄內。
    3. 來信告訴我 ,表單已完成並上傳完畢,我會上去看看您的結果。
    4. 不管您做的結果如何?您只要盡力去作,不能說作不出來,無資料給我哦。
    5. 如果您作的不錯,請繼續下去;反之,我也會告訴您何處要改進。
    6. 如果您看不懂或有疑問,也記得來信告知狀況,我會協助您完成這些課程。
    7. 常用HTML語法到此告一段落,接下去我們要學一些比較特殊或好用的語法
    8. 本課程結束後會有一個小測試哦,請利用時間加緊練習吧!