24h購物| | PChome| 登入
2011-08-26 15:32:05| 人氣275| 回應0 | 上一篇 | 下一篇

HTML-表單(Form)

推薦 0 收藏 0 轉貼0 訂閱站台

  • ACTION:指明在WWW伺服器端程式所在的URL位址;如沒特別指明URL 則以FORM所在文件的URL為內定值。
  • METHOD:設定將FORM的資料項傳遞到WWW伺服器端的方法,分為"GET"及"POST"兩種,建議方法是用"POST"。
  • INPUT:就是讓我們輸入資料的標籤,它的格式如下;
    <INPUT TYPE="輸入欄位的種類" NAME="欄位名稱" VALUE="欄位初始值">
    而TYPE有以下幾種屬性:

    1. "TEXT":文數字輸入型態,這是內定值。

      • 範例
        <FORM>
        請輸入您的姓名:<INPUT NAME="name">
        </FORM>
      • 結果 請輸入您的姓名:

      • 若要限制輸入方框的長度可加上SIZE屬性; 若要限制輸入字元長度則可加上MAXLENGTH屬性。
      • 範例
        <FORM>
        請輸入您的姓名:<INPUT NAME="name" SIZE=16 MAXLENGTH=8> </FORM>
      • 結果 請輸入您的姓名:

    2. "PASSWORD":文數字輸入欄位,但是輸入的資料會用*顯示出來,可用來輸入密碼。

      • 範例
        <FORM>
        <INPUT TYPE="PASSWORD" NAME="password" SIZE=20 MAXLENGTH=8>
        </FORM>
      • 結果

    3. "SUBMIT":送出資料按鈕。

      • 範例
        <FORM>
        <INPUT TYPE="SUBMIT" VALUE="確定留言">
        </FORM>
      • 結果

      • 由於SUBMIT只用在確認資料輸出,因此可以不必加上NAME屬性, 而按鈕的大小則會依VALUE中文字的多寡自動調整。


    4. "RESET":清除填寫表格內容,也就是重新填寫之意。

      • 範例
        <FORM>
        請輸入您的姓名:
        <INPUT NAME="name" SIZE=16 MAXLENGTH=8>
        <INPUT TYPE="RESET" VALUE="重新輸入">
        </FORM>
      • 結果 請輸入您的姓名:

    5. "RADIO":單選,多選一。

      • 範例
        <FORM>
        請選擇您的身份:
        <INPUT NAME="profession" TYPE=radio VALUE="student">學生
        <INPUT NAME="profession" TYPE=radio VALUE="worker">上班族
        <INPUT NAME="profession" TYPE=radio VALUE="free">自由業
        </FORM>
      • 結果 請選擇您的身份:
        學生
        上班族
        自由業

    6. "CHECKBOX":多選。

      • 範例
        <FORM> 請選擇您的興趣:
        <INPUT NAME="interesting" TYPE=checkbox VALUE="movie">看電影
        <INPUT NAME="interesting" TYPE=checkbox VALUE="music">聽音樂
        <INPUT NAME="interesting" TYPE=checkbox VALUE="tv">看電視
        <INPUT NAME="interesting" TYPE=checkbox VALUE="climbing">看書</FORM>
      • 結果 請選擇您的興趣:
        看電影
        聽音樂
        看電視
        看書


  • 下拉式選單:可單選或複選,只差在有無MULTIPLE標籤。

    • 單選範例
      <FORM>
      您如何得知本網站?
      <SELECT NAME="reference">
      <OPTION>由YAHOO連結
      <OPTION>新聞郵件
      <OPTION>朋友介紹
      <OPTION>誤闖進來
      <OPTION>其它
      <SELECT>
      </FORM>
    • 單選結果 您如何得知本網站?


    • 其中第一個OPTION為內定的選項,我們可加上SELECTED 將某個OPTION變為預設選項。
    • 單選範例,加上SELECTED
      <FORM>
      您如何得知本網站?
      <SELECT NAME="reference">
      <OPTION>由YAHOO連結
      <OPTION>新聞郵件
      <OPTION>朋友介紹
      <OPTION SELECTED>誤闖進來
      <OPTION>其它
      <SELECT>
      </FORM>
    • 單選結果,加上SELECTED 您如何得知本網站?


    • 複選範例,加上MULTIPLE,可按[Ctrl]及滑鼠左鍵來選擇 一個以上項目。 <FORM>
      您的興趣?
      <SELECT NAME="reference" MULTIPLE>
      <OPTION>看電影
      <OPTION>聽音樂
      <OPTION>看電視
      <OPTION>看書
      </SELECT>
      </FORM>
    • 複選結果,加上MULTIPLE,可按[Ctrl]及滑鼠左鍵來選擇 一個以上項目。 您的興趣?


    • 其中第一個OPTION為內定的選項,我們可加上SELECTED 將某幾個OPTION變為預設選項。
    • 複選範例,加上MULTIPLE及SELECTED,可按[Ctrl]及滑鼠左鍵來選擇 一個以上項目。
      <FORM> 您的興趣?
      <SELECT NAME="reference" MULTIPLE>
      <OPTION>看電影
      <OPTION SELECTED>聽音樂
      <OPTION>看電視
      <OPTION SELECTED>看書
      </SELECT>
      </FORM>
    • 複選結果,加上MULTIPLE及SELECTED,可按[Ctrl]及滑鼠左鍵來選擇 一個以上項目。 您的興趣?


  • "TEXTAREA":文字輸入區,與"TEXT"不同的是,TEXTAREA可以有多列,分別以 ROWS來指定列數(高度),以COLS來指定欄數(寬度)。

    • 範例
      <FORM>
      請輸入您的留言:
      <TEXTAREA NAME="Comments" ROWS=4 COLS=60> </TEXTAREA>
      </FORM>
    • 結果 請輸入您的留言:



    • 我們也可加上預設的留言,記得是加在<TEXTAREA>和</TEXTAREA>之間。
    • 範例
      <FORM>
      請輸入您的留言: <TEXTAREA NAME="Comments" ROWS=4 COLS=60>我想問你們一件事</TEXTAREA>
      </FORM>
    • 結果 請輸入您的留言:
  •  

    http://www.9w2u.com/htmlbook.asp?book=2(參考來源)

    台長:

    您可能對以下文章有興趣

    人氣(275) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
    全站分類: 不分類 | 個人分類: HTML |
    此分類上一篇:HTML-Table用法

    是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
    * 請輸入識別碼:
    請輸入圖片中算式的結果(可能為0) 
    (有*為必填)
    TOP
    詳全文