<input>：輸入（表單輸入）元素

<input> 的工作方式因其 type 屬性的值而異，因此不同型別在各自的參考頁面中進行了介紹。如果未指定此屬性，則採用預設型別 text。

可用的型別如下所示

<input type="button" name="button" value="Button" />

<input type="checkbox" name="checkbox"/>

<input type="color" name="color"/>

<input type="date" name="date"/>

<input type="datetime-local" name="datetime-local"/>

<input type="email" name="email"/>

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123">

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

<input type="number" name="number"/>

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

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

<input type="reset" name="reset"/>

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

<input> 元素之所以如此強大，是因為它的屬性；type 屬性（上面有示例描述）是最重要的屬性。由於每個 <input> 元素（無論型別如何）都基於 HTMLInputElement 介面，因此從技術上講，它們共享完全相同的屬性集。但是，實際上，大多數屬性僅對特定子集的輸入型別有效。此外，某些屬性影響輸入的方式取決於輸入型別，以不同的方式影響不同的輸入型別。

本節提供了一個表格，列出了所有屬性及其簡要描述。此表格之後是一個列表，更詳細地描述了每個屬性，以及它們與哪些輸入型別相關聯。大多數或所有輸入型別共有的屬性將在下面更詳細地定義。特定輸入型別獨有的屬性——或所有輸入型別共有的屬性，但在特定輸入型別上使用時具有特殊行為——將在這些型別的頁面上進行說明。

<input> 元素的屬性包括全域性 HTML 屬性，此外還有：

在標準屬性的描述之後，列出了一些其他非標準屬性。

accept

僅對 file 輸入型別有效，accept 屬性定義了在 file 上傳控制元件中可以選擇哪些檔案型別。請參閱 file 輸入型別。

alt

僅對 image 按鈕有效，alt 屬性為影像提供備用文字，如果影像 src 丟失或無法載入，則顯示屬性的值。請參閱 image 輸入型別。

autocapitalize

控制輸入文字是否自動大寫，以及如果自動大寫，則以何種方式大寫。有關更多資訊，請參閱 autocapitalize 全域性屬性頁面。

autocomplete

（**不是**布林屬性！）autocomplete 屬性將其值作為以空格分隔的字串，該字串描述輸入應提供哪種型別的自動完成功能（如果有）。自動完成的典型實現會調回在同一輸入欄位中輸入的先前值，但可能存在更復雜的自動完成形式。例如，瀏覽器可以與裝置的聯絡人列表整合以在電子郵件輸入欄位中自動完成 email 地址。有關允許的值，請參閱 autocomplete。

autocomplete 屬性在 hidden、text、search、url、tel、email、date、month、week、time、datetime-local、number、range、color 和 password 上有效。此屬性對不返回值或文字資料的輸入型別沒有影響，對除 checkbox、radio、file 或任何按鈕型別之外的所有輸入型別都有效。

有關其他資訊，包括有關密碼安全性和 autocomplete 在 hidden 上與其他輸入型別略有不同的資訊，請參閱 autocomplete 屬性。

autofocus

如果存在，則表示該輸入應在頁面載入完成時（或包含該元素的 <dialog> 已顯示時）自動獲得焦點的布林屬性。

注意：具有 autofocus 屬性的元素可能會在 DOMContentLoaded 事件觸發之前獲得焦點。

文件中最多隻能有一個元素具有 autofocus 屬性。如果放在多個元素上，則第一個具有該屬性的元素會獲得焦點。

autofocus 屬性不能用於型別為 hidden 的輸入，因為隱藏的輸入無法聚焦。

警告：自動聚焦表單控制元件可能會讓使用螢幕閱讀器技術的視障人士和認知障礙人士感到困惑。分配 autofocus 時，螢幕閱讀器會“傳送”其使用者到表單控制元件，而不會事先警告他們。

在應用 autofocus 屬性時，請仔細考慮輔助功能。自動聚焦控制元件可能會導致頁面在載入時滾動。焦點也可能導致某些觸控裝置上的動態鍵盤顯示。雖然螢幕閱讀器會宣佈接收焦點的表單控制元件的標籤，但螢幕閱讀器不會在標籤之前宣佈任何內容，並且小型裝置上的有視力使用者同樣會錯過先前內容建立的上下文。

capture

在 HTML 媒體捕獲規範中引入，僅對 file 輸入型別有效，capture 屬性定義了應使用哪種媒體（麥克風、影片或相機）來捕獲新檔案以在支援的情況下使用 file 上傳控制元件上傳。請參閱 file 輸入型別。

checked

對 radio 和 checkbox 型別都有效，checked 是一個布林屬性。如果在 radio 型別上存在，則表示該單選按鈕是同一名稱單選按鈕組中當前選中的一個。如果在 checkbox 型別上存在，則表示該複選框在預設情況下已選中（頁面載入時）。它不指示此複選框當前是否已選中：如果複選框的狀態發生更改，則此內容屬性不會反映更改。（只有 HTMLInputElement 的 checked IDL 屬性 會更新。）

注意：與其他輸入控制元件不同，複選框和單選按鈕的值僅在當前 checked 時包含在提交的資料中。如果是，則會提交選中控制元件的名稱和值(s)。

例如，如果一個名為 fruit 的複選框的 value 為 cherry，並且該複選框已選中，則提交的表單資料將包含 fruit=cherry。如果複選框未啟用，則它根本不會在表單資料中列出。複選框和單選按鈕的預設 value 為 on。

dirname

對 hidden、text、search、url、tel 和 email 輸入型別有效，dirname 屬性支援提交元素的方向性。包含時，表單控制元件將提交兩個名稱/值對：第一個是 name 和 value，第二個是 dirname 屬性的值作為名稱，值為瀏覽器設定的 ltr 或 rtl。

html

<form action="page.html" method="post">
  <label>
    Fruit:
    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit-dir=ltr -->

提交上面的表單時，輸入將導致傳送 fruit=cherry 的 name/value 對和 fruit-dir=ltr 的 dirname/方向對。有關更多資訊，請參閱 dirname 屬性。

disabled

如果存在，則表示使用者不應該能夠與輸入互動的布林屬性。停用的輸入通常以較暗的顏色或其他某種形式的指示來呈現，表示該欄位不可用。

具體來說，停用的輸入不會接收 click 事件，並且停用的輸入不會與表單一起提交。

注意：雖然規範不要求，但 Firefox 預設情況下會 保留 <input> 在頁面載入之間的動態停用狀態。使用 autocomplete 屬性來控制此功能。

form

指定輸入關聯的 <form> 元素（即其表單所有者）的字串。如果存在，此字串的值必須與同一文件中 <form> 元素的 id 匹配。如果未指定此屬性，則 <input> 元素將與最近的包含表單（如果有）關聯。

form 屬性允許您將輸入放置在文件中的任何位置，但將其包含在文件中其他位置的表單中。

注意：一個輸入只能與一個表單關聯。

formaction

僅對 image 和 submit 輸入型別有效。有關更多資訊，請參閱 submit 輸入型別。

formenctype

僅對 image 和 submit 輸入型別有效。有關更多資訊，請參閱 submit 輸入型別。

formmethod

僅對 image 和 submit 輸入型別有效。有關更多資訊，請參閱 submit 輸入型別。

formnovalidate

僅對 image 和 submit 輸入型別有效。有關更多資訊，請參閱 submit 輸入型別。

formtarget

僅對 image 和 submit 輸入型別有效。有關更多資訊，請參閱 submit 輸入型別。

height

僅對 image 輸入按鈕有效，height 是要顯示的影像檔案的高度，以表示圖形提交按鈕。請參閱 image 輸入型別。

id

對所有元素（包括所有輸入型別）都有效的全域性屬性，它定義了一個唯一識別符號 (ID)，該識別符號在整個文件中必須唯一。其目的是在連結時識別元素。該值用作 <label> 的 for 屬性的值，以將標籤與表單控制元件連結。請參閱 <label>。

inputmode

對所有元素都有效的全域性值，它為瀏覽器提供有關在編輯此元素或其內容時使用的虛擬鍵盤配置型別的提示。值包括 none、text、tel、url、email、numeric、decimal 和 search。

list

賦予 list 屬性的值應為位於同一文件中的 <datalist> 元素的 id。<datalist> 提供了一個預定義值列表，以建議使用者為此輸入使用。列表中與 type 不相容的任何值都不會包含在建議的選項中。提供的值是建議，而不是要求：使用者可以選擇此預定義列表或提供其他值。

它在 text、search、url、tel、email、date、month、week、time、datetime-local、number、range 和 color 上有效。

根據規範，hidden、password、checkbox、radio、file 或任何按鈕型別都不支援 list 屬性。

根據瀏覽器，使用者可能會看到建議的自定義調色盤、沿範圍的刻度標記，甚至像 <select> 一樣開啟的輸入，但允許使用未列出的值。檢視 其他輸入型別的瀏覽器相容性表。

請參閱 <datalist> 元素。

max

對 date、month、week、time、datetime-local、number 和 range 有效，它定義了允許值範圍內的最大值。如果輸入到元素中的 value 超過此值，則元素將無法透過 約束驗證。如果 max 屬性的值不是數字，則該元素沒有最大值。

有一個特殊情況：如果資料型別是週期性的（例如日期或時間），則 max 的值可能低於 min 的值，這表示範圍可能會環繞；例如，這允許您指定從晚上 10 點到凌晨 4 點的時間範圍。

maxlength

對 text、search、url、tel、email 和 password 有效，它定義了使用者可以輸入到欄位中的最大字串長度（以 UTF-16 程式碼單元為單位）。這必須是 0 或更高的整數值。如果未指定 maxlength 或指定了無效值，則欄位沒有最大長度。此值還必須大於或等於 minlength 的值。

如果輸入到欄位中的文字長度超過 maxlength UTF-16 程式碼單元，則輸入將無法透過 約束驗證。預設情況下，瀏覽器會阻止使用者輸入超過 maxlength 屬性允許的字元數。僅當用戶更改值時才會應用約束驗證。有關更多資訊，請參閱 客戶端驗證。

min

對 date、month、week、time、datetime-local、number 和 range 有效，它定義了允許值範圍內的最小負值。如果輸入到元素中的 value 小於此值，則元素將無法透過 約束驗證。如果 min 屬性的值不是數字，則該元素沒有最小值。

此值必須小於或等於max屬性的值。如果min屬性存在但未指定或無效，則不會應用任何min值。如果min屬性有效且非空值小於min屬性允許的最小值，則約束驗證將阻止表單提交。有關更多資訊，請參閱客戶端驗證。

有一個特殊情況：如果資料型別是週期性的（例如日期或時間），則 max 的值可能低於 min 的值，這表示範圍可能會環繞；例如，這允許您指定從晚上 10 點到凌晨 4 點的時間範圍。

minlength

適用於text、search、url、tel、email和password，它定義了使用者可以在輸入欄位中輸入的最小字串長度（以UTF-16程式碼單元計）。這必須是一個非負整數，且小於或等於maxlength指定的值。如果沒有指定minlength，或指定了無效值，則輸入沒有最小長度。

如果輸入到欄位中的文字長度少於minlength個UTF-16程式碼單元，則輸入將導致約束驗證失敗，從而阻止表單提交。只有當用戶更改值時才會應用約束驗證。有關更多資訊，請參閱客戶端驗證。

multiple

如果設定了布林型multiple屬性，則表示使用者可以在電子郵件視窗小部件中輸入以逗號分隔的電子郵件地址，或者可以使用file輸入選擇多個檔案。請參閱電子郵件和檔案輸入型別。

name

一個字串，用於指定輸入控制元件的名稱。當表單資料提交時，此名稱將與控制元件的值一起提交。

將name視為必填屬性（即使它不是）。如果輸入沒有指定name，或name為空，則輸入的值不會隨表單一起提交！（停用的控制元件、未選中的單選按鈕、未選中的複選框和重置按鈕也不會發送）。

有兩種特殊情況

1. _charset_：如果用作型別為hidden的<input>元素的名稱，則輸入的value將由使用者代理自動設定為用於提交表單的字元編碼。
2. isindex：出於歷史原因，不允許使用名稱isindex。

name屬性為單選按鈕建立了一個獨特的行為。

同一命名組中的單選按鈕一次只能選中一個。選擇該組中的任何單選按鈕都會自動取消選擇該組中當前選中的任何單選按鈕。如果提交表單，則該選中的單選按鈕的值將與名稱一起傳送。

當在同一命名組的單選按鈕序列中進行Tab鍵切換時，如果選中了一個按鈕，則該按鈕將獲得焦點。如果它們在原始碼中沒有分組在一起，如果該組中的一個按鈕被選中，則從遇到該組中的第一個按鈕開始進行Tab鍵切換，跳過所有未選中的按鈕。換句話說，如果選中了一個按鈕，則Tab鍵切換會跳過該組中未選中的單選按鈕。如果沒有選中任何按鈕，則當到達同一名稱組中的第一個按鈕時，單選按鈕組將獲得焦點。

一旦該組中的一個單選按鈕獲得焦點，使用箭頭鍵將導航到所有具有相同名稱的單選按鈕，即使這些單選按鈕在原始碼中沒有分組在一起。

當輸入元素被賦予一個name時，該名稱將成為擁有表單元素的HTMLFormElement.elements屬性的一個屬性。如果您有一個name設定為guest的輸入和另一個name設定為hat-size的輸入，則可以使用以下程式碼

js

let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];

當此程式碼執行後，guestName將是guest欄位的HTMLInputElement，而hatSize將是hat-size欄位的物件。

警告：避免為表單元素提供與表單的內建屬性相對應的name，因為您將用對相應輸入的引用覆蓋預定義的屬性或方法。

pattern

適用於text、search、url、tel、email和password，pattern屬性定義了一個正則表示式，輸入的value必須匹配該正則表示式才能透過約束驗證。它必須是一個有效的JavaScript正則表示式，如RegExp型別所使用，以及我們在正則表示式指南中所記錄的那樣；編譯正則表示式時會指定'u'標誌，以便將模式視為Unicode程式碼點的序列，而不是ASCII。模式文本週圍不應指定正斜槓。

如果pattern屬性存在但未指定或無效，則不會應用任何正則表示式，並且此屬性將完全被忽略。如果pattern屬性有效且非空值與模式不匹配，則約束驗證將阻止表單提交。

注意：如果使用pattern屬性，請透過在附近包含解釋性文字來告知使用者預期的格式。您還可以包含一個title屬性來解釋匹配模式的要求；大多數瀏覽器會將此標題顯示為工具提示。可見的解釋對於可訪問性是必需的。工具提示是一種增強功能。

有關更多資訊，請參閱客戶端驗證。

placeholder

適用於text、search、url、tel、email、password和number，placeholder屬性為使用者提供了一個簡短的提示，說明在欄位中期望哪種資訊。它應該是一個單詞或短語，提示預期的資料型別，而不是解釋或提示。文字不得包含回車符或換行符。例如，如果一個欄位預期捕獲使用者的姓氏，並且其標籤為“姓氏”，則合適的佔位符可能是“例如，張三”。

注意：placeholder屬性在語義上不如其他解釋表單的方法有用，並且可能導致內容出現意外的技術問題。有關更多資訊，請參閱標籤。

popovertarget

將<input type="button">元素轉換為彈出視窗控制元件按鈕；將要控制的彈出視窗元素的ID作為其值。有關更多詳細資訊，請參閱彈出視窗API登入頁面。

popovertargetaction

指定在由控制元件<input type="button">控制的彈出視窗元素上執行的操作。可能的值為

"hide"

該按鈕將隱藏顯示的彈出視窗。如果嘗試隱藏已隱藏的彈出視窗，則不會執行任何操作。

"show"

該按鈕將顯示隱藏的彈出視窗。如果嘗試顯示已顯示的彈出視窗，則不會執行任何操作。

"toggle"

該按鈕將在顯示和隱藏之間切換彈出視窗。如果彈出視窗隱藏，則會顯示；如果彈出視窗顯示，則會隱藏。如果省略了popovertargetaction，則"toggle"是控制元件按鈕將執行的預設操作。

readonly

一個布林型屬性，如果存在，則表示使用者不應該能夠編輯輸入的值。readonly屬性受text、search、url、tel、email、date、month、week、time、datetime-local、number和password輸入型別支援。

有關更多資訊，請參閱HTML屬性：readonly。

required

required是一個布林型屬性，如果存在，則表示使用者必須在提交擁有表單之前為輸入指定一個值。required屬性受text、search、url、tel、email、date、month、week、time、datetime-local、number、password、checkbox、radio和file輸入支援。

有關更多資訊，請參閱客戶端驗證和HTML屬性：required。

size

適用於email、password、tel、url和text，size屬性指定顯示輸入的多少內容。基本上與使用CSS width屬性設定相同的結果，但有一些特殊之處。值的實際單位取決於輸入型別。對於password和text，它是字元數（或em單位），預設值為20，對於其他型別，它是畫素（或px單位）。CSS width優先於size屬性。

src

僅適用於image輸入按鈕，src是指定要顯示的影像檔案的URL的字串，以表示圖形提交按鈕。請參閱影像輸入型別。

step

適用於date、month、week、time、datetime-local、number和range，step屬性是一個數字，指定值必須遵循的粒度。

如果未明確包含

• step對於number和range預設為1。
• 每個日期/時間輸入型別都有一個適合該型別的預設step值；請參閱各個輸入頁面：date、datetime-local、month、time和week。

該值必須是一個正數——整數或浮點數——或特殊值any，這意味著沒有隱含的步進，並且允許任何值（除了其他約束，如min和max）。

如果未明確設定any，則number、日期/時間輸入型別和range輸入型別的有效值等於步進的基礎——min值和步進值的增量，直到max值（如果指定）。

例如，如果您有<input type="number" min="10" step="2">，則任何大於或等於10的偶數都是有效的。如果省略，<input type="number">，則任何整數都是有效的，但浮點數（如4.2）無效，因為step預設為1。要使4.2有效，step必須設定為any、0.1、0.2，或者min值必須以.2結尾，例如<input type="number" min="-5.2">

注意：當用戶輸入的資料不符合步進配置時，該值在約束驗證中被視為無效，並將匹配:invalid偽類。

有關更多資訊，請參閱客戶端驗證。

tabindex

全域性屬性，對所有元素（包括所有輸入型別）有效，一個整數屬性，指示元素是否可以獲取輸入焦點（是否可聚焦），以及它是否應該參與順序鍵盤導航。由於除型別為hidden的輸入外的所有輸入型別都是可聚焦的，因此不應在表單控制元件上使用此屬性，因為這樣做需要管理文件中所有元素的焦點順序，如果操作不當，則存在損害可用性和可訪問性的風險。

title

全域性屬性，對所有元素（包括所有輸入型別）有效，包含一個文字，表示與其所屬元素相關的建議資訊。此類資訊通常（但並非必須）可以作為工具提示呈現給使用者。標題不應作為表單控制元件目的的主要解釋。相反，請使用for屬性設定為表單控制元件的id屬性的<label>元素。請參閱下面的標籤。

type

一個字串，指定要渲染的控制元件型別。例如，要建立複選框，則使用checkbox值。如果省略（或指定了未知值），則使用輸入型別text，建立一個純文字輸入欄位。

允許的值列在上面的輸入型別中。

value

輸入控制元件的值。當在HTML中指定時，這是初始值，從那時起，可以使用JavaScript訪問相應的HTMLInputElement物件的value屬性隨時更改或檢索它。value屬性始終是可選的，但對於checkbox、radio和hidden應視為必需的。

width

僅適用於image輸入按鈕，width是要顯示的影像檔案的寬度，以表示圖形提交按鈕。請參閱影像輸入型別。

以下非標準屬性在某些瀏覽器上也可用。一般來說，除非不得已，否則應避免使用它們。

autocorrect 非標準

（僅限Safari）。一個字串，指示在使用者編輯此欄位時是否啟用自動更正。允許的值為

on

啟用拼寫錯誤的自動更正，以及處理任何配置的文字替換。

off

停用自動更正和文字替換。

incremental 非標準

布林型屬性incremental是WebKit和Blink擴充套件（因此受Safari、Opera、Chrome等支援），如果存在，則告訴使用者代理將輸入處理為即時搜尋。當用戶編輯欄位的值時，使用者代理會將search事件傳送到表示搜尋框的HTMLInputElement物件。這允許您的程式碼在使用者編輯搜尋時即時更新搜尋結果。

如果未指定incremental，則只有當用戶明確啟動搜尋（例如，在編輯欄位時按下Enter或Return鍵）時，才會傳送search事件。

search事件受速率限制，因此不會比實現定義的間隔更頻繁地傳送。

orient 非標準

類似於影響`<progress>` 和 `<meter>` 元素的非標準 CSS 屬性 `-moz-orient`，`orient` 屬性定義了範圍滑塊的方向。其值包括 `horizontal`，表示範圍水平渲染，以及 `vertical`，表示範圍垂直渲染。有關建立垂直表單控制元件的現代方法，請參閱 建立垂直表單控制元件。

results 非標準

`results` 屬性（僅 Safari 支援）是一個數值，允許您覆蓋在 `` 元素的原生下拉選單中顯示的先前搜尋查詢條目最大數量。

該值必須是非負十進位制數。如果未提供或提供無效值，則使用瀏覽器的預設最大條目數。

webkitdirectory 非標準

如果存在，布林型 `webkitdirectory` 屬性表示在檔案選擇器介面中，使用者只能選擇目錄。有關其他詳細資訊和示例，請參閱 HTMLInputElement.webkitdirectory。

雖然最初僅在基於 WebKit 的瀏覽器中實現，但 `webkitdirectory` 也可以在 Microsoft Edge 以及 Firefox 50 及更高版本中使用。但是，即使它具有相對廣泛的支援，它仍然是非標準的，除非沒有其他選擇，否則不應使用它。

以下方法由 `HTMLInputElement` 介面提供，該介面表示 DOM 中的 `` 元素。父介面 `HTMLElement`、`Element`、`Node` 和 `EventTarget` 指定的方法也可使用。

checkValidity()

如果元素的值透過有效性檢查，則返回 `true`；否則，返回 `false` 並在元素上觸發 `invalid` 事件。

reportValidity()

如果元素的值透過有效性檢查，則返回 `true`；否則，返回 `false`，在元素上觸發 `invalid` 事件，並且（如果事件未取消）向用戶報告問題。

select()

如果元素的內容可選擇，則選擇 `` 元素的整個內容。對於沒有可選擇文字內容的元素（例如視覺顏色選擇器或日曆日期輸入），此方法不執行任何操作。

setCustomValidity()

設定自定義訊息，如果輸入元素的值無效，則顯示該訊息。

setRangeText()

將輸入元素中指定字元範圍的內容設定為給定的字串。可以使用 `selectMode` 引數來控制如何影響現有內容。

setSelectionRange()

選擇文字輸入元素中指定的字元範圍。對於未呈現為文字輸入欄位的輸入，不執行任何操作。

showPicker()

顯示輸入元素的瀏覽器選擇器，該選擇器通常在選擇元素時顯示，但由按鈕按下或其他使用者互動觸發。

stepDown()

預設情況下，將數字輸入的值減少一個單位，或者減少指定數量的單位。

stepUp()

將數字輸入的值增加一個單位或增加指定數量的單位。

輸入作為替換元素，具有一些不適用於非表單元素的功能。有一些 CSS 選擇器可以根據其 UI 功能（也稱為 UI 偽類）專門定位表單控制元件。輸入元素還可以使用屬性選擇器按型別進行定位。還有一些屬性特別有用。

偽類示例

我們可以根據複選框是否選中來設定複選框標籤的樣式。在此示例中，我們正在設定緊跟在選中輸入後面的 `<label>` 的 `color` 和 `font-weight` 樣式。如果 `input` 未選中，我們沒有應用任何樣式。

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">Toggle the checkbox on and off</label>

input:checked + label {
  color: red;
  font-weight: bold;
}

可以使用 `屬性選擇器` 根據其 `type` 定位不同型別的表單控制元件。CSS 屬性選擇器根據屬性的存在或給定屬性的值來匹配元素。

/* matches a password input */
input[type="password"] {
}

/* matches a form control whose valid values are limited to a range of values*/
input[min][max] {
}

/* matches a form control with a pattern attribute */
input[pattern] {
}

預設情況下，佔位符文字的外觀是半透明或淺灰色。`::placeholder` 偽元素是輸入的 `placeholder 文字`。它可以用有限的 CSS 屬性子集進行樣式設定。

::placeholder {
  color: blue;
}

在使用 `::placeholder` 作為選擇器的規則中，只能使用適用於 `::first-line` 偽元素的 CSS 屬性子集。

`appearance` 屬性允許根據作業系統的主題顯示（幾乎）任何元素作為平臺原生樣式，並使用 `none` 值刪除任何平臺原生樣式。

您可以使用 `div {appearance: radio;}` 使 `

特定於文字輸入相關元素的屬性是 CSS `caret-color` 屬性，它允許您設定用於繪製文字輸入插入點的顏色。

HTML

<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32" />

CSS

input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    "sans-serif";
}

結果

`field-sizing` 屬性允許您控制表單輸入的大小調整行為（即，預設情況下，它們具有預設的首選大小）。此屬性允許您覆蓋預設行為，使表單控制元件能夠調整大小以適應其內容。

此屬性通常用於建立表單欄位，這些欄位會根據其內容進行收縮包裝，並在輸入更多文字時增長。這適用於接受直接文字輸入的輸入型別（例如，`text` 和 `url`），輸入型別 `file` 以及 `<textarea>` 元素。

在某些情況下（通常涉及非文字輸入和專門的介面），`` 元素是一個 `替換元素`。在這種情況下，可以使用 CSS `object-position` 和 `object-fit` 屬性調整元素大小及其在框架內位置。

有關向 HTML 元素新增顏色的更多資訊，請參閱

• 使用 CSS 為 HTML 元素應用顏色.

另請參閱

• 設定 HTML 表單樣式
• HTML 表單的高階樣式 和
• 表單控制元件的 `CSS 屬性相容性表`。

標籤需要將輔助文字與 `` 關聯。`<label>` 元素提供有關表單欄位的解釋資訊，這始終是合適的（除了您可能遇到的任何佈局問題之外）。使用 `` 來解釋應在 `` 或 `<textarea>` 中輸入的內容絕不是壞主意。

關聯標籤

`` 和 `` 元素的語義配對對於螢幕閱讀器等輔助技術很有用。透過使用 `` 的 `for` 屬性將它們配對，您可以以一種方式將標籤繫結到輸入，使螢幕閱讀器能夠更精確地向用戶描述輸入。

僅僅在 `` 元素旁邊放置純文字是不夠的。相反，可用性和可訪問性需要包含隱式或顯式的 `<label>`。

<!-- inaccessible -->
<p>Enter your name: <input id="name" type="text" size="30" /></p>

<!-- implicit label -->
<p>
  <label>Enter your name: <input id="name" type="text" size="30" /></label>
</p>

<!-- explicit label -->
<p>
  <label for="name">Enter your name: </label>
  <input id="name" type="text" size="30" />
</p>

第一個示例不可訪問：提示與 `` 元素之間不存在關係。

除了可訪問名稱之外，標籤還為滑鼠和觸控式螢幕使用者提供了更大的“點選”區域以進行點選或觸控。透過將 `` 與 `` 配對，點選其中任何一個都會使 `` 成為焦點。如果您使用純文字為輸入“設定標籤”，則不會發生這種情況。使提示成為輸入啟用區域的一部分對於有運動控制障礙的人們很有幫助。

作為 Web 開發人員，我們必須始終記住，我們不能假設每個人都知道我們知道的所有事情。使用 Web 的人群的多樣性（以及您的網站）實際上保證了您網站的一些訪客在思維過程和/或環境方面存在一些差異，如果沒有清晰且正確呈現的標籤，這會導致他們對錶單的理解與您大不相同。

佔位符不可訪問

`placeholder` 屬性允許您指定在 `` 元素為空時顯示在其內容區域本身內的文字。佔位符永遠不應該成為理解表單的必要條件。它不是標籤，也不應該用作替代品，因為它不是。佔位符用於提示輸入值應是什麼樣子，而不是解釋或提示。

佔位符不僅無法被螢幕閱讀器訪問，而且一旦使用者在表單控制元件中輸入任何文字，或者如果表單控制元件已具有值，則佔位符會消失。具有自動頁面翻譯功能的瀏覽器在翻譯時可能會跳過屬性，這意味著 `placeholder` 可能不會被翻譯。

除了使用 CSS 根據每個輸入的當前狀態基於 `:valid` 或 `:invalid` UI 狀態為輸入設定樣式外，如上文 `UI 偽類` 部分所述，瀏覽器還提供了在（嘗試）表單提交時的客戶端驗證。在表單提交時，如果存在任何表單控制元件無法透過約束驗證，則支援的瀏覽器將在第一個無效的表單控制元件上顯示錯誤訊息；顯示基於錯誤型別的預設訊息，或您設定的訊息。

某些輸入型別和其他屬性會限制給定輸入的有效值。例如，<input type="number" min="2" max="10" step="2">表示只有數字 2、4、6、8 或 10 是有效的。可能會發生多種錯誤，包括如果值小於 2 則出現 rangeUnderflow 錯誤，如果大於 10 則出現 rangeOverflow 錯誤，如果值在 2 到 10 之間但不是偶數（不符合step屬性的要求），則出現 stepMismatch 錯誤，或者如果值不是數字，則出現 typeMismatch 錯誤。

對於其可能值域是週期性的輸入型別（即，在最大可能值處，值會環繞回到開頭而不是結束），max 和 min 屬性的值可以反轉，這表示允許的值範圍從 min 開始，環繞到最小可能值，然後繼續直到達到 max。這在日期和時間方面特別有用，例如當您希望允許範圍從晚上 8 點到早上 8 點時。

<input type="time" min="20:00" max="08:00" name="overnight" />

特定的屬性及其值會導致特定的錯誤 ValidityState

如果表單控制元件沒有 required 屬性，則沒有值或空字串無效。即使存在以上屬性（required 除外），空字串也不會導致錯誤。

我們可以限制我們接受的值，支援的瀏覽器將本地驗證這些表單值，並在表單提交時出現錯誤時提醒使用者。

除了上表中描述的錯誤之外，validityState 介面還包含 badInput、valid 和 customError 布林只讀屬性。Validity 物件包括

• validityState.valueMissing
• validityState.typeMismatch
• validityState.patternMismatch
• validityState.tooLong
• validityState.tooShort
• validityState.rangeUnderflow
• validityState.rangeOverflow
• validityState.stepMismatch
• validityState.badInput
• validityState.valid
• validityState.customError

對於這些布林屬性中的每一個，值為 true 表示指定的驗證失敗原因可能是正確的，valid 屬性除外，如果元素的值符合所有約束條件，則該屬性為 true。

如果發生錯誤，支援的瀏覽器將同時提醒使用者並阻止表單提交。需要注意的是：如果自定義錯誤設定為真值（除空字串或 null 之外的任何內容），則將阻止表單提交。如果沒有自定義錯誤訊息，並且其他任何屬性都沒有返回 true，則 valid 將為 true，並且可以提交表單。

function validate(input) {
  let validityState_object = input.validity;
  if (validityState_object.valueMissing) {
    input.setCustomValidity("A value is required");
  } else if (validityState_object.rangeUnderflow) {
    input.setCustomValidity("Your value is too low");
  } else if (validityState_object.rangeOverflow) {
    input.setCustomValidity("Your value is too high");
  } else {
    input.setCustomValidity("");
  }
}

最後一行，將自定義有效性訊息設定為空字串至關重要。如果使用者犯了錯誤，並且設定了有效性，則它將無法提交，即使所有值都有效，直到訊息為 null 為止。

自定義驗證錯誤示例

如果您希望在欄位驗證失敗時顯示自定義錯誤訊息，則需要使用 <input>（以及相關）元素上可用的 約束驗證 API。請看以下表單

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Submit</button>
</form>

如果您嘗試提交表單且未填寫任何有效值或值與 pattern 不匹配，則基本的 HTML 表單驗證功能將導致生成預設錯誤訊息。

如果您想改為顯示自定義錯誤訊息，可以使用以下 JavaScript 程式碼

const nameInput = document.querySelector("input");

nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});

nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity("Enter your username!");
  } else {
    nameInput.setCustomValidity(
      "Usernames can only contain upper and lowercase letters. Try again!",
    );
  }
});

該示例的呈現效果如下

簡而言之

• 每次輸入元素的值發生更改時，我們都會透過 input 事件處理程式執行 checkValidity() 方法來檢查輸入元素的有效狀態。
• 如果值無效，則會引發 invalid 事件，並執行 invalid 事件處理程式函式。在此函式內部，我們使用 if () 塊確定值無效是因為它為空還是因為它與模式不匹配，並設定自定義有效性錯誤訊息。
• 因此，如果在按下提交按鈕時輸入值無效，則將顯示自定義錯誤訊息之一。
• 如果有效，它將按預期提交。為此，必須取消自定義有效性，方法是使用空字串值呼叫 setCustomValidity()。因此，我們每次引發 input 事件時都會執行此操作。如果您不這樣做，並且之前已設定了自定義有效性，則即使輸入當前包含有效值，在提交時輸入也會註冊為無效。

某些 <input> 型別的允許輸入取決於區域設定。在某些區域設定中，1,000.00 是有效數字，而在其他區域設定中，輸入此數字的有效方式是 1.000,00。

Firefox 使用以下啟發式方法來確定用於驗證使用者輸入的區域設定（至少對於 type="number" 而言）

• 嘗試元素或其任何父元素上 lang/xml:lang 屬性指定的語言。
• 嘗試任何 Content-Language HTTP 標頭指定的語言。或者，
• 如果未指定，則使用瀏覽器的區域設定。

在包含輸入時，需要在旁邊新增標籤，這是輔助功能的要求。這是為了讓使用輔助技術的使用者能夠知道輸入的用途。此外，單擊或觸控標籤會將焦點賦予標籤關聯的表單控制元件。這提高了有視力使用者的可訪問性和可用性，增加了使用者可以單擊或觸控以啟用表單控制元件的區域。這在單選按鈕和複選框方面尤其有用（甚至必要），因為它們很小。有關標籤的更多資訊，請參閱 標籤。

以下是如何在上述樣式中將 <label> 與 <input> 元素關聯的示例。您需要為 <input> 提供一個 id 屬性。然後，<label> 需要一個 for 屬性，其值與輸入的 id 相同。

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />

表單輸入等互動式元素應提供足夠大的區域，以便於啟用它們。這有助於各種人群，包括有運動控制問題的人以及使用非精確輸入形式（如手寫筆或手指）的人。建議最小互動尺寸為 44×44 CSS 畫素。

• 瞭解成功標準 2.5.5：目標尺寸 | W3C 瞭解 WCAG 2.1
• 目標尺寸和 2.5.5 | Adrian Roselli
• 快速測試：大型觸控目標 - The A11Y Project

• 表單約束驗證
• 您的第一個 HTML 表單
• 如何構建 HTML 表單
• 原生表單小部件
• 傳送表單資料
• 表單資料驗證
• 如何構建自定義表單小部件
• 舊版瀏覽器中的 HTML 表單
• 設定 HTML 表單樣式
• HTML 表單的高階樣式
• CSS 屬性相容性表
• 建立垂直表單控制元件