<input type="search">
<input> 元素的 search 型別是設計用於使用者輸入搜尋查詢的文字欄位。它們在功能上與 text 輸入框相同，但可能會被 使用者代理 以不同的方式進行樣式化。
試一試
<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" />
<button>Search</button>
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
值
value 屬性包含一個字串，表示搜尋欄位中包含的值。你可以使用 JavaScript 中的 HTMLInputElement.value 屬性來檢索它。
searchTerms = mySearch.value;
如果輸入框沒有設定驗證約束（詳見 驗證），則該值可以是任何文字字串或空字串（""）。
附加屬性
list
列表屬性的值是位於同一文件中的 <datalist> 元素的 id。<datalist> 為此輸入提供了一個預定義值列表，以供使用者建議。列表中與 type 不相容的任何值都不會包含在建議選項中。提供的值是建議，而不是要求：使用者可以從這個預定義列表中選擇，也可以提供不同的值。
maxlength
使用者可以在搜尋欄位中輸入的最大字串長度（以 UTF-16 程式碼單元 衡量）。這必須是 0 或更大的整數值。如果未指定 maxlength，或指定了無效值，則搜尋欄位沒有最大長度。此值還必須大於或等於 minlength 的值。
如果欄位中輸入的文字長度大於 maxlength UTF-16 程式碼單元，則輸入將無法透過 約束驗證。約束驗證僅在使用者更改值時應用。
minlength
使用者可以在搜尋欄位中輸入的最小字串長度（以 UTF-16 程式碼單元 衡量）。這必須是一個非負整數值，小於或等於 maxlength 指定的值。如果未指定 minlength，或指定了無效值，則搜尋輸入沒有最小長度。
如果欄位中輸入的文字長度少於 minlength UTF-16 程式碼單元，則搜尋欄位將無法透過 約束驗證。約束驗證僅在使用者更改值時應用。
pattern
當指定 pattern 屬性時，它是一個正則表示式，輸入框的 value 必須與該正則表示式匹配才能透過 約束驗證。它必須是有效的 JavaScript 正則表示式，如 RegExp 型別所使用，並記錄在我們的正則表示式指南中；在編譯正則表示式時指定 'u' 標誌，以便將模式視為 Unicode 碼點序列，而不是 ASCII。模式文本週圍不應指定正斜槓。
如果未指定或指定的模式無效，則不應用正則表示式，並且此屬性將完全被忽略。
注意： 使用 title 屬性來指定大多數瀏覽器將作為工具提示顯示的文字，以解釋匹配模式的要求。您還應該在附近包含其他解釋性文字。
有關詳細資訊和示例，請參閱 指定模式 部分。
placeholder
placeholder 屬性是一個字串，它向用戶提供一個簡短的提示，說明欄位中預期哪種資訊。它應該是一個詞或短語，演示預期的資料型別，而不是解釋性訊息。文字不能包含回車或換行符。
如果控制元件的內容具有單一方向性（從左到右或從右到左），但需要以相反的方向性呈現佔位符，您可以使用 Unicode 雙向演算法格式字元來覆蓋佔位符內的方向性；有關更多資訊，請參閱如何使用 Unicode 控制元件處理雙向文字。
注意： 如果可以，請避免使用 placeholder 屬性。它不如其他解釋表單的方式在語義上有用，並且可能導致您的內容出現意外的技術問題。有關更多資訊，請參閱<input> 標籤。
readonly
一個布林屬性，如果存在，則表示該欄位不能由使用者編輯。但是，其 value 仍然可以透過 JavaScript 程式碼直接設定 HTMLInputElement value 屬性來更改。
注意： 由於只讀欄位不能有值，因此 required 對同時指定了 readonly 屬性的輸入沒有影響。
size
size 屬性是一個數字值，表示輸入欄位應該有多寬（以字元為單位）。該值必須是一個大於零的數字，預設值為 20。由於字元寬度不同，這可能不完全精確，不應依賴於此；最終的輸入可能比指定的字元數更窄或更寬，具體取決於字元和正在使用的字型（font 設定）。
這不限制使用者可以在欄位中輸入的字元數。它只指定一次大約可以看到多少個字元。要對輸入資料的長度設定上限，請使用maxlength 屬性。
spellcheck
spellcheck 是一個全域性屬性，用於指示是否為元素啟用拼寫檢查。它可以用在任何可編輯內容上，但這裡我們考慮與在 <input> 元素上使用 spellcheck 相關的具體情況。spellcheck 的允許值是
false-
停用此元素的拼寫檢查。
true-
啟用此元素的拼寫檢查。
- "" (空字串) 或無值
-
遵循元素的拼寫檢查預設行為。這可能基於父元素的
spellcheck設定或其他因素。
如果輸入欄位未設定 readonly 屬性且未停用，則可以啟用拼寫檢查。
如果 使用者代理 的偏好設定覆蓋了該設定，則讀取 spellcheck 返回的值可能無法反映控制元件內拼寫檢查的實際狀態。
非標準屬性
以下非標準屬性可用於搜尋輸入欄位。儘可能避免使用它們。
incremental
布林屬性 incremental 是 WebKit 和 Blink 擴充套件（因此被 Safari、Opera、Chrome 等支援），如果存在，它會告知 使用者代理 將輸入作為即時搜尋處理。當用戶編輯欄位的值時，使用者代理會向代表搜尋框的 HTMLInputElement 物件傳送 search 事件。這允許你的程式碼在使用者編輯搜尋時即時更新搜尋結果。
如果未指定 incremental，則 search 事件僅在使用者明確發起搜尋時傳送（例如，在編輯欄位時按下 Enter 或 Return 鍵）。
search 事件是限速的，因此傳送頻率不會超過實現定義的間隔。
results
results 屬性（僅 Safari 支援）是一個數值，它允許你覆蓋在 <input> 元素的本地提供的先前搜尋查詢下拉選單中顯示的最大條目數。
該值必須是非負十進位制數。如果未提供，或提供了無效值，則使用瀏覽器的預設最大條目數。
使用搜索輸入
<input> 元素的 search 型別與 text 型別非常相似，只是它們專門用於處理搜尋詞。它們在行為上基本等效，但使用者代理預設可能會選擇以不同的方式對其進行樣式設定（當然，站點可以使用樣式表對其應用自定義樣式）。
基本示例
<form>
<div>
<input type="search" id="mySearch" name="q" />
<button>Search</button>
</div>
</form>
渲染效果如下：
q 是搜尋輸入最常見的 name，儘管它不是強制性的。提交時，傳送到伺服器的資料名稱/值對將是 q=searchTerm。
注意：你必須記住為輸入設定一個 name，否則將不會提交任何內容。
搜尋和文字型別之間的差異
主要的根本差異在於瀏覽器處理它們的方式。首先要注意的是，一些瀏覽器會顯示一個交叉圖示，如果需要，可以單擊該圖示立即刪除搜尋詞；在 Chrome 中，此操作也會在按下 Esc 鍵時觸發。以下螢幕截圖來自 Chrome
此外，現代瀏覽器也傾向於自動儲存之前在不同域中輸入的搜尋詞，當在該域的搜尋輸入中執行後續搜尋時，這些搜尋詞會作為自動完成選項出現。這有助於使用者隨著時間的推移進行相同或相似的搜尋查詢。此螢幕截圖來自 Firefox
此時，讓我們看一些可以應用於搜尋表單的有用技巧。
設定佔位符
你可以在搜尋輸入中提供一個有用的佔位符，使用 placeholder 屬性來提示要做什麼。請看以下示例
<form>
<div>
<input
type="search"
id="mySearch"
name="q"
placeholder="Search the site…" />
<button>Search</button>
</div>
</form>
你可以在下面看到佔位符的渲染效果
搜尋表單標籤和可訪問性
搜尋表單的一個問題是它們的可訪問性；一種常見的設計實踐是不為搜尋欄位提供標籤（儘管可能有一個放大鏡圖示或類似的東西），因為搜尋表單的目的對於有視力的使用者來說通常由於其位置而相當明顯（此示例顯示了一個典型模式）。
然而，這可能會給螢幕閱讀器使用者造成混淆，因為他們不會收到關於搜尋輸入是什麼的任何口頭提示。一個不會影響你的視覺設計的方法是使用 地標元素。
- 將整個搜尋功能封裝在一個
<search>元素中，這會建立一個地標區域，輔助技術可以宣佈並快速導航到該區域。如果你的<input>已經在一個<form>中，你也可以選擇向<form>元素新增role="search"，這也會使<form>成為一個搜尋地標。<search>元素使用原生 HTML 語義，而role="search"具有更廣泛的支援，如果你已經有一個<form>包裝器，它可能更簡潔。 - 如果這還不夠，你可以在
<input>本身使用aria-label屬性。這應該是一個描述性文字標籤，螢幕閱讀器會讀出；它用作<label>的非視覺等效項。
讓我們看一個例子
<search>
<form>
<div>
<input
type="search"
id="mySearch"
name="q"
placeholder="Search the site…"
aria-label="Search through site content" />
<button>Search</button>
</div>
</form>
</search>
你可以在下面看到它的渲染效果
與上一個示例相比沒有視覺差異，但螢幕閱讀器使用者可以獲得更多資訊。
注意：有關此類可訪問性功能的更多資訊，請參閱 路標/地標。
物理輸入元素大小
可以使用 size 屬性控制輸入框的物理大小。使用它，你可以指定輸入框一次可以顯示的字元數。例如，在此示例中，搜尋框的寬度為 30 個字元
<form>
<div>
<input
type="search"
id="mySearch"
name="q"
placeholder="Search the site…"
size="30" />
<button>Search</button>
</div>
</form>
結果是這個更寬的輸入框
驗證
<input> 元素的 search 型別具有與常規 text 輸入相同的驗證功能。你通常不太可能在搜尋框中使用驗證功能。在許多情況下，使用者應該被允許搜尋任何內容，但有一些情況需要考慮，例如針對已知格式的資料進行搜尋。
注意：HTML 表單驗證 不能 替代確保輸入資料格式正確的指令碼。有人可以很容易地調整 HTML，讓他們繞過驗證，或完全刪除它。也有可能有人完全繞過你的 HTML 並直接將資料提交到你的伺服器。如果你的伺服器端程式碼未能驗證接收到的資料，當格式不正確的資料（或資料過大、型別錯誤等）被輸入到你的資料庫時，可能會發生災難。
關於樣式的一個注意事項
有一些有用的偽類可用於樣式化有效/無效的表單元素：:valid 和 :invalid。在本節中，我們將使用以下 CSS，它將在包含有效值的輸入旁邊放置一個勾號（對勾），在包含無效值的輸入旁邊放置一個叉號。
input:invalid ~ span::after {
content: "✖";
padding-left: 5px;
position: absolute;
}
input:valid ~ span::after {
content: "✓";
padding-left: 5px;
position: absolute;
}
該技術還需要在表單元素之後放置一個 <span> 元素，作為圖示的容器。這是必要的，因為某些瀏覽器上的某些輸入型別不能很好地顯示直接放置在它們後面的圖示。
使輸入必填
你可以使用 required 屬性，作為在允許提交表單之前使輸入值成為必填項的簡單方法
<form>
<div>
<input
type="search"
id="mySearch"
name="q"
placeholder="Search the site…"
required />
<button>Search</button>
<span class="validity"></span>
</div>
</form>
渲染效果如下：
此外，如果你嘗試在沒有輸入搜尋詞的情況下提交表單，瀏覽器將顯示一條訊息。以下示例來自 Firefox
當你嘗試提交包含不同型別無效資料的表單時，將顯示不同的訊息；請參閱下面的示例。
輸入值長度
你可以使用 minlength 屬性指定輸入值的最小字元長度；同樣，使用 maxlength 設定輸入值的最大長度。
以下示例要求輸入值的長度為 4-8 個字元。
<form>
<div>
<label for="mySearch">Search for user</label>
<input
type="search"
id="mySearch"
name="q"
placeholder="User IDs are 4–8 characters in length"
required
size="30"
minlength="4"
maxlength="8" />
<button>Search</button>
<span class="validity"></span>
</div>
</form>
渲染效果如下：
如果你嘗試提交少於 4 個字元的表單，你將收到一條相應的錯誤訊息（不同瀏覽器之間有所不同）。如果你嘗試超過 8 個字元的長度，瀏覽器將不允許你這樣做。
指定模式
你可以使用 pattern 屬性指定一個正則表示式，輸入的值必須遵循該正則表示式才能被視為有效（有關速成課程，請參閱 針對正則表示式進行驗證）。
我們來看一個例子。假設我們想提供一個產品 ID 搜尋表單，並且所有 ID 都是由兩個字母后跟四個數字組成的程式碼。以下示例涵蓋了這一點
<form>
<div>
<label for="mySearch">Search for product by ID:</label>
<input
type="search"
id="mySearch"
name="q"
placeholder="two letters followed by four numbers"
required
size="30"
pattern="[A-z]{2}[0-9]{4}" />
<button>Search</button>
<span class="validity"></span>
</div>
</form>
渲染效果如下：
示例
你可以在我們的 website-aria-roles 示例（即時檢視）中看到一個用於上下文的搜尋表單的良好示例。
技術摘要
| 值 | 表示搜尋欄位中包含的值的字串。 | |
| 事件 |
change 和 input |
|
| 支援的通用屬性 |
autocomplete、list、maxlength、minlength、pattern、placeholder、required、size。 |
|
| IDL 屬性 | value |
|
| DOM 介面 | HTMLInputElement |
|
| 方法 |
select()、setRangeText()、setSelectionRange()。 |
|
| 隱式 ARIA 角色 | 沒有 list 屬性：searchbox |
帶有 list 屬性：combobox |
規範
| 規範 |
|---|
| HTML # 文字（type=text）狀態和搜尋（type=search）狀態 |
瀏覽器相容性
載入中…
另見
- HTML 表單
<input>及其所基於的HTMLInputElement介面<input type="text">