9 walker studio-9w個人設計工作室
Google
.網頁設計接案業務
.加入GForce手機娛樂聯盟

.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載

.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡

 友站及其它連結
刑事警察局網際網路資訊站
591租屋網站
反毒害大聯盟
台灣認養地圖
KTzone日記, 論壇
::S.H.E 青春組織國際後援會::
基礎HTML教學
Hyper Markup Language

01 HTML簡介 10 分割畫面(Frameset)
02 HTML文件的基本架構及指令 11 超鏈結(Hyper Link)
03 製作第一份HTML文件 12 拋錨(Anchor)
04 網頁背景(Background) 13 表單(Form)
05 控制標題字元大小及字型指令 14 跑馬燈Internet Exploer專用
06 使用CSS控制字元屬性 15 文字編排
07 表格的運用(Table) 16 Meta 指令運用
08 清單(List) 17 標註指令列表
09 加入圖片
18 其他

13、 表單(Form)
常在別人的Home Page裡看到留言板嗎?怎麼樣才能讓我的Home Page裡也有留言板呢?沒錯,那就需要表單FORM了,FORM就是為了讓參觀者能夠與 WWW的伺服器做雙向交流而設計的,為了達到雙向交流的目的,除了在 我們的Home Page裡要設計一些填寫表格外,相對的在伺服器端就要有程式相對應,以下簡單的為FORM做個介紹;FORM的基本語法如下:

<FORM METHOD="SUBMIT_METHOD" ACTION="URL">

 FORM敘述區
</FORM>

最簡單的一個例子:

<form action="htmlbook.asp">
<input type="submit" value="到HTMLBook">
</form>

範例20輸出結果
  • 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>
    • 結果
      請輸入您的留言:




本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!

Power by 9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站