基礎原生表單控制元件

文字<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輸入型別不應具有關聯的標籤。

其他文字輸入型別，如search、url和tel，將在下一教程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>

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

儘管名稱如此，單選按鈕實際上並不是一個按鈕；讓我們繼續前進，看看真正的按鈕！有三種輸入型別可以生成按鈕

提交

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

重置

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

按鈕

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

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

<input type="submit" value="Submit this form" />
<input type="reset" value="Reset this form" />
<input type="button" value="Do Nothing without JavaScript" />

<button type="submit">Submit this form</button>
<button type="reset">Reset this form</button>
<button type="button">Do Nothing without JavaScript</button>

<div class="buttondemo">
  <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>
</div>

button,
input {
  display: none;
}
.buttondemo button,
.buttondemo input {
  all: revert;
}

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

<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>元素完全相同，只是當用戶單擊它時，它的行為類似於提交按鈕。

使用type屬性設定為image值的<input>元素來建立影像按鈕。此元素支援與<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>型別：檔案輸入型別。表單能夠將檔案傳送到伺服器（此特定操作也在傳送表單資料文章中詳細介紹）。檔案選擇器小部件可用於選擇要傳送的一個或多個檔案。

要建立檔案選擇器小部件，請使用type屬性設定為file的<input>元素。可以使用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屬性的更現代的值。

• 上一頁
• 概述：網頁表單構建塊
• 下一頁

• 如何構建自定義表單控制元件
• 透過 JavaScript 傳送表單
• 表單小部件的屬性相容性表