→滑鼠事件
  ←上一頁
  →回網頁語法選單
  →回首頁

表單設計
〔表單結構〕
  FORM的按鍵，基本條件必須有一個指向的網址(Active)，
  還有一個送出資料的按鍵。
  <Form>
    <input type=button value=確定>
  </Form>
  打了上面的三行語法，就可以見到網頁內出現一個叫「確定」的
  按鍵，但是光有這樣的按鍵是無法做任何事的，因為沒有交待這
  個按鍵去執行什麼動作，必須有Action=幹什麼去的指示：

  <Form action=http://kiss99.net method=get>
    <input type=submit value=按此到Kiss99>
  </Form>

  上個例子用了Button(按鍵)的Type型態，
  而下一例子用了Submit(送出)的型態，兩者的差別下文詳解。

  現在先說明這個例子中的Action=http://kiss99.net的語法含意，
  這是指定這個FORM執行時指向http://kiss99.net這個網址，
  所以只要按送出(Submit)，就會轉向被指定的網址。

  method=get是傳送的方式；傳送FORM有兩種方式，一種是Get，
  另一種是Post。還有一種特殊的ENCTYPE，詳見CGI課程。

  Get是直接送出字串資料給伺服器，Post則除了字串資料外，
  還包含資料串的長度、型態、HEAD…等。

  如果不是要送出一些資料而只是要做轉向的按鍵，則只須使用get
  方式來送出就行了。

〔Type型態〕
  input type(資料輸入型態)除了剛看到的Button(按鍵)、Submit(傳送)
  以外，還有 Text (文字列)、textarea(資料欄位)、Radio(選擇鈕)、
  Checkbox(勾選框)、Reset(重置)、Password(密碼)…

  下列是這些Type的型態：
  <input type=text name=名字> 文字輸入欄
 

  <input type=password name=密碼> 密碼輸入欄
 

  <input type=radio name=性別 value=男> 單一選鈕
  male female 這是Radio排他選項

  <input type=checkbox name=課程 value=數學> 複式選項方格
  數學 英文 這是CheckBox複式選項

  <textarea rows=列數 cols=行數 name=文章></textarea> 多行輸入
 

  <select name=城市> 下拉式單一選單
    <option>台北
    <option>高雄
  </select>
 

  <select size=3 name=選單> 捲動欄單一選單
    <option>選項一
    <option>選項二
  </select>
 

  <select size=3 name=選單 multiple> 捲動欄複式選單
    <option>選項一
    <option>選項二
    <option>選項三
    <option>選項四
  </select>
 

  <input type=hidden name=sex value=male>
  這是隱藏的Type，不顯示出來，但會送出sex=male給伺服器處理

  <input type=reset value=清除重來>
  這是清除重來的按鍵

〔Value〕
  Value是指這份表單要送出的內容，如果使用者沒輸入Value，
  則以預設的Value送出資料串給伺服器處理。
  <input type=text> 沒有預設Value
 

  <input type=text value=名字> 預設Value
 
  僅管有預設的Value，但只要使用者輸入文字取代預設內容，
  則送出使用者輸入的資料串給伺服器處理。

〔Name〕
  每個選項都必須給一個獨立的名稱，供伺服器判斷資料串內容：
  姓名：<input type=text name=username>
  地址：<input type=text name=useraddr>
  性別：<input type=radio name=sex value=male checked>男
  　　　<input type=radio name=sex value=female>女
  姓名：
  地址：
  性別：男   女
〔Size〕
  size：欄位寬度，適用text、password、select(指暴露的選項數)
  如果沒有設定Size，預設值為20(個英文字寬)
  rows：欄高，適用textarea
  cols：欄寬，適用textarea
〔預選〕
  checked：預選，適用Radio(只能單選一項)、CheckBox(可以複選)
  selected：預選，適用select；如果有Multiple可複選
〔限制輸入資料長度〕
  maxlength=100：限制輸入100個英文字長度，等於50個中文字
〔資料串〕
  這裡介紹Method=Get的方式
  請看下面的例子：
  <FORM Action=html13.htm method=get>
    <input type=hidden name=test value=01>
    姓名：<input type=text name=username>
    地址：<input type=text name=useraddr>
    性別：<input type=radio name=sex value=male checked>男
    　　　<input type=radio name=sex value=female>女
    <input type=submit value=確定>
    <input type=reset value=清除重來>
  </Form>
  姓名：
  地址：
  性別：男   女
 
  當按確定送出後，瀏灠器會送出：
  html13.htm?test=01&username=%C0n&useraddr=Taiwan&sex=male
  的一長串資料給伺服器。
  在 " ? " 後面的就是資料串了。
  瀏灠器依表單設計順序送出所有的Name=Value資料串給伺服器。
  每個Name=Value間以 " & " 接序。
  username=%C0n就是"username=鴨"的EnCode(編碼)。
  當伺服器接到資料串的碼後，就會「解碼(DeCode)」還原。
〔複合表單的編排〕
  以下是錯誤的例子：
  <FORM>
    <FORM>
      …
    </FORM>
  </FORM>

  FORM表單內不可以有其它的FORM表單，正確的方式如下：
  <FORM>
    …
  </FORM>
  <FORM>
    …
  </FORM>

  對於瀏灠器來說，FORM的排版形同<p>：
  要讓兩個FORM結構不會有斷行的排列，就必須使用表格(Table)：
  <table>
    <tr>
        <FORM>
      <td>
          …
      </td>
        </FORM>
        <FORM>
      <td>
          …
      </td>
        </FORM>
    </tr>
  </table>