<input>: HTML 輸入元素

試一試

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

<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 上傳控制元件中可選擇的檔案型別。請參閱 檔案 輸入型別。

alpha 實驗性

僅對 color 輸入型別有效，alpha 屬性為終端使用者提供了設定所選顏色不透明度的能力。

alt

僅對 image 按鈕有效，alt 屬性為影像提供替代文字，如果影像 src 缺失或未能載入，則顯示屬性值。請參閱 圖片 輸入型別。

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 上傳控制元件。請參閱 檔案 輸入型別。

checked

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

注意：與其他輸入控制元件不同，複選框和單選按鈕的值僅在它們當前處於 checked 狀態時才包含在提交的資料中。如果它們已選中，則會提交選中控制元件的名稱和值。

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

colorspace 實驗性

僅對 color 輸入型別有效，colorspace 屬性指定 type="color" 輸入使用的顏色空間。可能的列舉值為

• "limited-srgb"：顏色位於 sRGB 顏色空間中。這包括 rgb()、hsl()、hwb() 和 <hex-color> 值。顏色值限制為每個 r、g 和 b 分量 8 位。這是預設值。
• "display-p3"：Display P3 顏色空間，例如 color(display-p3 1.84 -0.19 0.72 / 0.6)

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 是顯示圖形提交按鈕的影像檔案的高度。請參閱 影像 輸入型別。

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 有效。

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

根據瀏覽器，使用者可能會看到建議的自定義調色盤、範圍上的刻度線，甚至是一個像 <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 型別所使用，並記錄在我們的正則表示式指南中。模式文本週圍不應指定正斜槓。編譯正則表示式時

1. 模式將隱式地用 ^(?: 和 )$ 包裹，這樣就要求匹配整個輸入值，即 ^(?:<pattern>)$。
2. 指定 'v' 標誌，以便將模式視為 Unicode 程式碼點序列，而不是 ASCII。

如果 pattern 屬性存在但未指定或無效，則不應用正則表示式，並且此屬性被完全忽略。如果 pattern 屬性有效且非空值與模式不匹配，則約束驗證將阻止表單提交。如果 multiple 存在，則編譯後的正則表示式將與每個逗號分隔的值進行匹配。

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

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

placeholder

對 text、search、url、tel、email、password 和 number 有效，placeholder 屬性向使用者提供了一個簡要提示，說明該欄位中預期何種資訊。它應該是一個單詞或短語，提供有關預期資料型別的提示，而不是解釋或提示。文字不得包含回車符或換行符。例如，如果一個欄位預期捕獲使用者的名字，其標籤是“名字”，則合適的佔位符可能是“例如，Mustafa”。

注意：如果可以避免，請勿使用 placeholder 屬性。如果需要標記 <input> 元素，請使用 <label> 元素。

popovertarget

將 <input type="button"> 元素轉換為彈出控制按鈕；將其控制的彈出元素的 ID 作為其值。有關更多詳細資訊，請參閱 彈出 API 登陸頁面。使用 popovertarget 屬性在彈出視窗及其呼叫按鈕之間建立關係還有兩個額外的有用效果

• 瀏覽器在彈出視窗和呼叫者之間建立隱式的 aria-details 和 aria-expanded 關係，並在顯示時將彈出視窗放置在鍵盤焦點導航順序中的邏輯位置。這使得彈出視窗對鍵盤和輔助技術 (AT) 使用者更易於訪問（另請參閱 彈出可訪問性功能）。
• 瀏覽器在兩者之間建立了一個隱式錨點引用，使得使用 CSS 錨點定位 來相對於其控制元件定位彈出視窗非常方便。有關更多詳細資訊，請參閱 彈出錨點定位。

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 屬性是一個數字，指定值必須遵循的粒度。只有與步長基數相距整數步數的值才有效。如果指定了 min，則步長基數為 min，否則為 value，如果兩者都未提供，則為 0（除了 week，其預設步長基數為 −259,200,000，表示 1970-W01 周的開始）。

如果未明確包含

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

該值必須是一個正數——整數或浮點數——或特殊值 any，這意味著沒有隱含的步長，並且允許任何值（排除其他約束，例如 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

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

title

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

type

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

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

value

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

width

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

非標準屬性

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

incremental 非標準

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

如果未指定 incremental，則 search 事件僅在使用者明確啟動搜尋時傳送（例如透過在編輯欄位時按下 Enter 或 Return 鍵）。

search 事件是限速的，因此傳送頻率不會超過實現定義的時間間隔。

orient 非標準

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

results 非標準

results 屬性——僅由 Safari 支援——是一個數值，允許您覆蓋在 <input> 元素原生提供的先前搜尋查詢下拉選單中顯示的最大條目數。

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

webkitdirectory 非標準

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

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

方法

HTMLInputElement 介面提供了以下方法，該介面表示 DOM 中的 <input> 元素。此外，還提供了父介面 HTMLElement、Element、Node 和 EventTarget 指定的方法。

checkValidity()

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

reportValidity()

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

select()

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

setCustomValidity()

設定當輸入元素值無效時顯示的自定義訊息。

setRangeText()

將輸入元素中指定字元範圍的內容設定為給定字串。提供 selectMode 引數以允許控制現有內容如何受影響。

setSelectionRange()

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

showPicker()

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

stepDown()

預設情況下，將數字輸入的值減一，或按指定單位數遞減。

stepUp()

將數字輸入的值增一或按指定單位數遞增。

CSS

輸入是替換元素，具有一些不適用於非表單元素的特性。有一些 CSS 選擇器可以根據其 UI 特性（也稱為 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 偽元素是輸入的 placeholder 文字。它可以使用有限的 CSS 屬性子集進行樣式設定。

::placeholder {
  color: blue;
}

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

caret-color

與文字輸入相關的元素的一個特定屬性是 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

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

此屬性通常用於建立表單欄位，這些欄位會根據其內容自動調整大小，並隨著輸入更多文字而增長。這適用於接受直接文字輸入的輸入型別（例如，text 和 url）、輸入型別 file 和 <textarea> 元素。

object-position 和 object-fit

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

樣式

有關如何在 HTML 中為元素新增顏色的更多資訊，請參閱

• 使用 CSS 將顏色應用於 HTML 元素.

另請參閱

• HTML 表單樣式
• HTML 表單高階樣式 和

附加功能

標籤

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

關聯標籤

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

僅僅在 <input> 元素旁邊放置純文字是不夠的。相反，可用性和可訪問性要求包含隱式或顯式 <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>

第一個示例無法訪問：提示和 <input> 元素之間不存在關係。

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

作為 Web 開發人員，重要的是我們永遠不要假設人們會知道我們所知道的一切。使用 Web 的人的多樣性——以及您的網站的訪問者的多樣性——幾乎可以保證，如果沒有清晰且正確呈現的標籤，您網站的一些訪問者在思維過程和/或情況方面會有所不同，從而導致他們以與您非常不同的方式解釋您的表單。

佔位符無法訪問

placeholder 屬性允許您指定當 <input> 元素的 content area 為空時顯示在該區域中的文字。佔位符絕不應是理解您的表單所必需的。它不是標籤，不應作為替代品使用，因為它不是。佔位符用於提供有關輸入值應如何顯示的提示，而不是解釋或提示。

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

客戶端驗證

除了使用 CSS 根據每個輸入的當前狀態（如上文UI 偽類部分所述）基於 :valid 或 :invalid 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 布林只讀屬性。有效性物件包括：

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

對於這些布林屬性中的每一個，true 值表示指定的驗證失敗原因屬實，但 valid 屬性除外，如果元素的值符合所有約束，則 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 頭指定的語言。或者，
• 如果未指定，則使用瀏覽器的區域設定。

無障礙

標籤

包含輸入時，新增標籤是無障礙性要求。這對於使用輔助技術的人來說是必需的，以便他們可以知道輸入的用途。此外，單擊或觸控標籤會使焦點位於標籤關聯的表單控制元件上。這提高了視力使用者（sighted users）的無障礙性和可用性，增加了使用者可以單擊或觸控以啟用表單控制元件的區域。這對於微小的單選按鈕和複選框尤其有用（甚至是必需的）。有關標籤的更多資訊，請參閱標籤。

以下是如何將 <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
• 快速測試：大觸控目標 - A11Y 專案

技術摘要

規範

瀏覽器相容性

另見

• CSS appearance 屬性
• 您的第一個 HTML 表單
• 如何構建 HTML 表單
• 原生表單小部件
• 傳送表單資料
• 表單約束驗證
• HTML 表單樣式