7-2 璊裕?

一個表單可以包含許多不同的表單控制項（Form Controls），或稱為「表單元素」（Form Elements），這些表單元素各有不同的特性，以便從使用者獲取不同型態的資料。常用的表單元素有下列幾種：

  1. 文字（Text）控制項：這是表單最常用到的控制項，可以讓使用者填入文字，外觀如下：

    原始碼如下：

    <input type=text value="Roger Jang" id=myTextId>
  2. 文字區域（Textarea）控制項：此控制項可以讓使用者填入多列文字，外觀如下：

    原始碼如下：

    <textarea name="comments" cols=50 rows=3 id=myTextareaId>這個問卷很有趣...只能意會，不能言傳...</textarea>
  3. 按鈕（Button）控制項：此控制項是方形的按鈕，可讓使用者點選，外觀如下：

    原始碼如下：

    <input type=button value="test button" id=myButtonId>
  4. 核記方塊（Checkbox）控制項：此控制項是方形的核記方塊，可讓使用者點選，並顯示核記結果，外觀如下：

    線性代數 Web程式設計 數值方法

    原始碼如下：

    <input type=checkbox id=myCheckbox1>線性代數 <input type=checkbox id=myCheckbox2 checked>Web程式設計 <input type=checkbox id=myCheckbox3>數值方法
  5. 收音機核記鈕（Radio）控制項：此控制項是圓形的核記鈕，可讓使用者點選，並顯示核記結果。如果在同一個表單中，數個收音機核記鈕有相同的 name 屬性，則這些收音機核記鈕就有「互斥」的功能，適合用於選取互斥的選項，例如性別等，外觀如下：

    男 女

    原始碼如下：

    男<input type=radio name=gender> 女<input type=radio name=gender checked>
  6. 隱藏（Hidden）控制項：顧名思義，此控制項完全不會出現在網頁上面，其功能是在於傳送使用者不需知道的資訊，外觀如下：

    （看不到喔！）

    原始碼如下：

    <input type=hidden value="hidden value" id=myHiddenId>
  7. 密碼（Password）控制項：此控制項功能是讓使用者輸入密碼，因此呈現於網頁時，看不到輸入文字，外觀如下：

    原始碼如下：

    <input type=password value="test1234" id=myPasswordId>
  8. 單選（Select）控制項：此控制項可讓使用者經由下拉式選單，進行單選，外觀如下：

    原始碼如下：

    <p class=example align=center><select size=3 id=mySelectId> <option>藍球 <option selected>網球 <option>蝦球 <option>鉛球 </select>
  9. 複選（Select Multiple）控制項：此控制項可讓使用者經由下拉式選單，進行複選，外觀如下：

    若要加入多個選項，可以先按下 Ctrl 按鍵，再用滑鼠點選所需選項，也可以先按下 Shift 按鍵，再用滑鼠點選，可以一次選取多個選項。原始碼如下：

    <select size=3 multiple id=mySelectId2> <option selected>舊金山 <option>洛杉磯 <option selected>東京 <option>巴塞隆納 </select>
  10. 檔案（File）控制項：此控制項可讓使用者選取本機硬碟的檔案，通常用於檔案上傳，外觀如下：

    使用者可以點選「瀏覽...」按鈕來選取檔案，若再配合伺服器端的程式碼，就可以進行檔案上傳。原始碼如下：

    <input type=file id=myFileId>
  11. 重設（Reset）控制項：此控制項可讓重設表單，讓表單的選項或文字都變回預設值，外觀如下：

    原始碼如下：

    <input type=reset id=myResetId>
  12. 送出（Submit）控制項：此控制項可讓使用者將表單資訊送到伺服器，外觀如下：

    原始碼如下：

    <input type=submit id=mySubmitId>
每一個表單控制項，都有數十個性質，可讓我們設定這些控制項的外觀和特性，若要列出這些控制項的性質，可以參考下列本書光碟的範例：
  1. 文字（Text）控制項：formControlText01.htm
  2. 文字區域（Textarea）控制項：formControlTextarea01.htm
  3. 按鈕（Button）控制項：formControlButton01.htm
  4. 核記方塊（Checkbox）控制項：formControlCheckbox01.htm
  5. 收音機核記鈕（Radio）控制項：formControlRadio01.htm
  6. 隱藏（Hidden）控制項：formControlHidden01.htm
  7. 密碼（Password）控制項：formControlPassword01.htm
  8. 單選（Select）控制項：formControlSelectSingle01.htm
  9. 複選（Select Multiple）控制項：formControlSelectMultiple01.htm
  10. 檔案（File）控制項：formControlFile01.htm
  11. 重設（Reset）控制項：formControlReset01.htm
  12. 送出（Submit）控制項：formControlSubmit01.htm
由於篇幅有限，不在此列出上述所有範例的網頁原始碼。在此僅以一個範例來說明文字區域控制項的各種性質，範例如下：

Example（formControlTextarea01.htm）：

在上述範例中，我們說明幾個重要的性質：

上述範例的原始檔如下：

原始檔（formControlTextarea01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>表單元素 textarea 的性質列表</h2>
<hr>

<b>呈現方式</b>：
<textarea name="comments" cols=50 rows=3 id=myTextareaId>
這個問卷很有趣...
只能意會，不能言傳...
</textarea>
<script>
//obj=document.all["myTextareaId"];
obj=document.getElementById("myTextareaId");
</script>
<script src="utility.js"></script>
<p><b>原始碼</b>：
<script>sourcePrint(obj)</script>
<p><b>性質排序列表</b>：
<p><script>propertyPrint(obj, "obj")</script>

<hr>
</body>
</html>

JavaScript 程式設計與應用：用於網頁用戶端