基本的原生表單控制元件

文字輸入欄位

文字 <input> 欄位是最基本的表單小部件。它們是讓使用者輸入任何型別資料的便捷方式，我們已經看到了一些簡單的示例。

所有基本文字控制元件都具有一些共同的行為：

• 它們可以標記為 readonly（使用者不能修改輸入值，但它仍與表單的其餘資料一起傳送）或 disabled（輸入值不能修改，也從不與表單的其餘資料一起傳送）。
• 它們可以有一個 placeholder；這是出現在文字輸入框內的文字，用於簡要描述該框的用途。
• 它們可以在 size（框的物理大小）和 maxlength（可以輸入到框中的最大字元數）上受到限制。
• 它們可以受益於拼寫檢查（使用 spellcheck 屬性）。

單行文字欄位

單行文字欄位是使用 <input> 元素建立的，其 type 屬性值設定為 text，或者完全省略 type 屬性（text 是預設值）。如果瀏覽器不識別您為 type 屬性指定的值（例如，如果您指定 type="color" 但瀏覽器不支援原生的顏色選擇器），則 text 值也是該屬性的備用值。

這是一個基本的單行文字欄位示例：

<input type="text" id="comment" name="comment" value="I'm a text field" />

單行文字欄位只有一個真正的限制：如果您輸入帶有換行符的文字，瀏覽器會在將資料傳送到伺服器之前刪除這些換行符。

下面的截圖顯示了文字輸入框在預設、聚焦和停用狀態下的樣子。大多數瀏覽器使用控制元件周圍的聚焦環來指示聚焦狀態，並使用灰色文字或褪色/半透明控制元件來指示停用狀態。

本文件中使用的螢幕截圖是在 macOS 上的 Chrome 瀏覽器中拍攝的。這些欄位/按鈕在不同瀏覽器之間可能存在細微差異，但基本的高亮顯示技術保持相似。

密碼欄位

最初的輸入型別之一是 password 文字欄位型別：

<input type="password" id="pwd" name="pwd" />

下面的截圖顯示了密碼輸入欄位，其中每個輸入字元都顯示為圓點。

password 值不會對輸入的文字新增任何特殊限制，但它會模糊輸入欄位中的值（例如，用點或星號），以便其他人無法輕易讀取。

請記住，這只是一個使用者介面功能；除非您安全地提交表單，否則它將以純文字形式傳送，這對安全性不利——惡意方可能會擷取您的資料並竊取密碼、信用卡詳細資訊或您提交的任何其他資訊。保護使用者免受此影響的最佳方法是透過安全連線（即，位於 https:// 地址）託管涉及表單的任何頁面，這樣資料在傳送之前就會加密。

瀏覽器認識到透過不安全連線傳送表單資料的安全隱患，併發出警告以阻止使用者使用不安全的表單。有關 Firefox 實施的更多資訊，請參閱 不安全密碼。

隱藏內容

另一個原始文字控制元件是 hidden 輸入型別。它用於建立一個對使用者不可見的表單控制元件，但在提交後仍與表單的其餘資料一起傳送到伺服器——例如，您可能希望向伺服器提交一個時間戳，說明訂單何時下達。由於它是隱藏的，使用者無法看到也無法有意編輯其值，它永遠不會獲得焦點，螢幕閱讀器也不會注意到它。

<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

如果您建立此類元素，則需要設定其 name 和 value 屬性。該值可以透過 JavaScript 動態設定。hidden 輸入型別不應具有關聯的標籤。

其他文字輸入型別，如搜尋、URL和電話，將在下一教程HTML5 輸入型別中介紹。

可選擇項：複選框和單選按鈕

可選擇項是您可以透過單擊它們或其相關標籤來更改狀態的控制元件。可選擇項有兩種：複選框和單選按鈕。兩者都使用 checked 屬性來指示小部件是否預設選中。

值得注意的是，這些小部件的行為並非完全與其他表單小部件相同。對於大多數表單小部件，一旦提交表單，所有帶有 name 屬性的小部件都會發送，即使沒有填寫值。在可選擇項的情況下，它們的值僅在被選中時才傳送。如果未選中，則不傳送任何內容，甚至不傳送它們的名稱。如果選中但沒有值，則名稱會與一個值為 on 的值一起傳送。

為了最大化可用性/可訪問性，建議您將每個相關的專案列表放在一個 <fieldset> 中，並使用 <legend> 提供列表的整體描述。每個單獨的 <label>/<input> 元素對都應包含在其自己的列表項（或類似結構）中。關聯的 <label> 通常放置在單選按鈕或複選框之前或之後，而單選按鈕或複選框組的說明通常是 <legend> 的內容。請參閱上面連結的示例以獲取結構示例。

複選框

複選框是使用 <input> 元素建立的，其 type 屬性設定為 checkbox 值。

<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />

相關的複選框專案應使用相同的 name 屬性。包含 checked 屬性會使複選框在頁面載入時自動選中。單擊複選框或其關聯的標籤會切換複選框的開/關狀態。

<fieldset>
  <legend>Choose all the vegetables you like to eat</legend>
  <ul>
    <li>
      <label for="carrots">Carrots</label>
      <input
        type="checkbox"
        id="carrots"
        name="vegetable"
        value="carrots"
        checked />
    </li>
    <li>
      <label for="peas">Peas</label>
      <input type="checkbox" id="peas" name="vegetable" value="peas" />
    </li>
    <li>
      <label for="cabbage">Cabbage</label>
      <input type="checkbox" id="cabbage" name="vegetable" value="cabbage" />
    </li>
  </ul>
</fieldset>

以下截圖顯示了複選框在預設、聚焦和停用狀態下的樣子。預設和停用狀態下的複選框顯示為選中，而聚焦狀態下的複選框未選中，其周圍有一個聚焦環。

由於複選框的開-關特性，複選框被認為是切換按鈕，許多開發人員和設計師在預設複選框樣式的基礎上進行擴充套件，建立了看起來像切換開關的按鈕。您可以在此處檢視一個實際示例（另請參閱原始碼）。

單選按鈕

單選按鈕是使用 <input> 元素建立的，其 type 屬性設定為 radio 值。

<input type="radio" id="soup" name="meal" value="soup" checked />

多個單選按鈕可以繫結在一起。如果它們共享相同的 name 屬性值，則它們將被視為同一組按鈕。在一個給定組中，一次只能選中一個按鈕；這意味著當其中一個被選中時，所有其他按鈕都會自動取消選中。當表單傳送時，只發送被選中的單選按鈕的值。如果沒有一個被選中，則整個單選按鈕池被視為處於未知狀態，不傳送任何值。一旦同一組中有一個單選按鈕被選中，使用者將無法在不重置表單的情況下取消選中所有按鈕。

<fieldset>
  <legend>What is your favorite meal?</legend>
  <ul>
    <li>
      <label for="soup">Soup</label>
      <input type="radio" id="soup" name="meal" value="soup" checked />
    </li>
    <li>
      <label for="curry">Curry</label>
      <input type="radio" id="curry" name="meal" value="curry" />
    </li>
    <li>
      <label for="pizza">Pizza</label>
      <input type="radio" id="pizza" name="meal" value="pizza" />
    </li>
  </ul>
</fieldset>

以下截圖顯示了處於選中狀態的預設和停用單選按鈕，以及處於未選中狀態的聚焦單選按鈕。

實際按鈕

單選按鈕實際上並不是一個按鈕，儘管它的名字如此；讓我們繼續看看實際的按鈕！有三種輸入型別會產生按鈕：

submit

將表單資料傳送到伺服器。對於 <button> 元素，省略 type 屬性（或 type 的無效值）將導致一個提交按鈕。

reset

將所有表單小部件重置為其預設值。

button

沒有自動效果但可以使用 JavaScript 程式碼自定義的按鈕。

然後我們還有 <button> 元素本身。它可以接受 type 屬性值 submit、reset 或 button，以模仿上述三種 <input> 型別的行為。兩者之間的主要區別在於，實際的 <button> 元素更容易設定樣式。

<p>Using &lt;input></p>
<p>
  <input type="submit" value="Submit this form" />
  <input type="reset" value="Reset this form" />
  <input type="button" value="Do Nothing without JavaScript" />
</p>
<p>Using &lt;button></p>
<p>
  <button type="submit">Submit this form</button>
  <button type="reset">Reset this form</button>
  <button type="button">Do Nothing without JavaScript</button>
</p>

下面您可以找到每種按鈕 <input> 型別的示例，以及等效的 <button> 型別。

submit

<button type="submit">This is a <strong>submit button</strong></button>

<input type="submit" value="This is a submit button" />

reset

<button type="reset">This is a <strong>reset button</strong></button>

<input type="reset" value="This is a reset button" />

anonymous

<button type="button">This is an <strong>anonymous button</strong></button>

<input type="button" value="This is an anonymous button" />

無論您使用 <button> 元素還是 <input> 元素，按鈕的行為都始終相同。但是，從示例中可以看出，<button> 元素允許您在其內容中使用 HTML，這些內容插入在開頭和結尾的 <button> 標籤之間。另一方面，<input> 元素是空元素；它們顯示的內容插入在 value 屬性內，因此只接受純文字作為內容。

以下截圖顯示了按鈕在預設、聚焦和停用狀態下的樣子。在聚焦狀態下，按鈕周圍有一個聚焦環，而在停用狀態下，按鈕顯示為灰色。

影像按鈕

影像按鈕控制元件的渲染方式與 <img> 元素完全相同，但當用戶點選它時，它的行為類似於提交按鈕。

影像按鈕是使用 <input> 元素建立的，其 type 屬性設定為 image 值。此元素支援與 <img> 元素完全相同的屬性集，以及其他表單按鈕支援的所有屬性。

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

如果影像按鈕用於提交表單，此控制元件不提交其值——相反，它會提交點選影像的 X 和 Y 座標（座標是相對於影像的，這意味著影像的左上角代表座標 (0, 0)）。座標以兩個鍵/值對的形式傳送：

• X 值鍵是 name 屬性的值後跟字串 ".x"。
• Y 值鍵是 name 屬性的值後跟字串 ".y"。

例如，當您在座標 (123, 456) 處點選影像並使用 get 方法提交時，您會看到這些值附加到 URL 中，如下所示：

http://foo.com?pos.x=123&pos.y=456

這是一種非常方便的構建“熱圖”的方法。這些值如何傳送和檢索在傳送表單資料文章中詳細介紹。

檔案選擇器

還有一種早期的 HTML <input> 型別：檔案輸入型別。表單能夠將檔案傳送到伺服器（此特定操作也在傳送表單資料一文中詳細介紹）。檔案選擇器小部件可用於選擇一個或多個要傳送的檔案。

要建立檔案選擇器小部件，您可以使用 <input> 元素，其 type 屬性設定為 file。接受的檔案型別可以使用 accept 屬性進行限制。此外，如果您想讓使用者選擇多個檔案，可以透過新增 multiple 屬性來實現。

示例

在此示例中，建立了一個檔案選擇器，請求圖形影像檔案。在這種情況下，允許使用者選擇多個檔案。

<input type="file" name="file" id="file" accept="image/*" multiple />

在某些移動裝置上，檔案選擇器可以透過在 accept 屬性中新增捕獲資訊來直接訪問裝置相機和麥克風捕獲的照片、影片和音訊，如下所示：

<input type="file" accept="image/*;capture=camera" />
<input type="file" accept="video/*;capture=camcorder" />
<input type="file" accept="audio/*;capture=microphone" />

下面的截圖顯示了檔案選擇器小部件在未選擇檔案時的預設、聚焦和停用狀態。

通用屬性

許多用於定義表單控制元件的元素都有一些自己的特定屬性。然而，有一組屬性是所有表單元素通用的。您已經遇到過其中一些，但下面列出了這些通用屬性，供您參考：

總結

本文介紹了較舊的輸入型別——HTML 早期引入的原始集合，所有瀏覽器都很好地支援它們。在下一節中，我們將介紹 type 屬性的更現代的值。

• 上一頁
• 概述：Web 表單
• 下一頁