<input type="search">

value 屬性包含一個字串，表示搜尋欄位中包含的值。您可以使用 JavaScript 中的 HTMLInputElement.value 屬性檢索此值。

searchTerms = mySearch.value;

如果沒有為輸入設定任何驗證約束（有關更多詳細資訊，請參見 驗證），則該值可以是任何文字字串或空字串（""）。

除了對所有 <input> 元素（無論其型別如何）起作用的屬性外，搜尋欄位輸入還支援以下屬性。

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

使用者可以輸入到搜尋欄位中的最大字串長度（以 UTF-16 程式碼單元計）。這必須是一個大於或等於 0 的整數值。如果沒有指定 maxlength 或指定的值無效，則搜尋欄位沒有最大長度。此值還必須大於或等於 minlength 的值。

如果輸入的文字長度超過 maxlength UTF-16 程式碼單元，則輸入將失敗 約束驗證。約束驗證僅在使用者更改值時應用。

使用者可以輸入到搜尋欄位中的最小字串長度（以 UTF-16 程式碼單元計）。這必須是一個非負整數值，小於或等於 maxlength 指定的值。如果沒有指定 minlength 或指定的值無效，則搜尋輸入沒有最小長度。

如果輸入的文字長度少於 minlength UTF-16 程式碼單元，則搜尋欄位將失敗 約束驗證。約束驗證僅在使用者更改值時應用。

pattern 屬性（如果指定）是一個正則表示式，輸入的 value 必須匹配該表示式才能透過 約束驗證。它必須是有效的 JavaScript 正則表示式，如 RegExp 型別中所用，以及我們在 正則表示式指南 中所述；在編譯正則表示式時會指定 'u' 標誌，因此模式將被視為 Unicode 程式碼點的序列，而不是 ASCII。模式文本週圍不應該指定正斜槓。

如果未指定或指定的值無效，則不應用任何正則表示式，並且完全忽略此屬性。

有關詳細資訊和示例，請參見 指定模式 部分。

placeholder 屬性是一個字串，它向用戶簡要提示該欄位中需要輸入何種資訊。它應該是一個詞語或短語，用於演示預期的資料型別，而不是解釋性的訊息。文字 *不能* 包含回車符或換行符。

如果控制元件的內容具有單向性 (LTR 或 RTL)，但需要以相反的方向呈現佔位符，可以使用 Unicode 雙向演算法格式化字元來覆蓋佔位符內的方向性；有關詳細資訊，請參閱 如何使用 Unicode 控制元件進行雙向文字。

一個布林屬性，如果存在，表示此欄位無法由使用者編輯。但是，它的 value 仍然可以透過 JavaScript 程式碼直接設定 HTMLInputElement value 屬性來更改。

size 屬性是一個數值，指示輸入欄位的寬度應為多少個字元。該值必須大於零，預設值為 20。由於字元寬度各不相同，因此這可能不是精確的，也不應該依賴於它；生成的輸入可能比指定的字元數窄或寬，具體取決於字元和字型 (font 使用中的設定)。

這 *不* 設定使用者可以輸入到欄位中的字元數限制。它只指定大約可以同時看到多少個字元。要設定輸入資料長度的上限，請使用 maxlength 屬性。

spellcheck 是一個全域性屬性，用於指示是否為元素啟用拼寫檢查。它可以在任何可編輯內容上使用，但這裡我們考慮與在 <input> 元素上使用 spellcheck 相關的具體內容。spellcheck 的允許值為

false

為該元素停用拼寫檢查。

true

為該元素啟用拼寫檢查。

"" (空字串) 或無值

遵循元素的預設拼寫檢查行為。這可能基於父級的 spellcheck 設定或其他因素。

如果輸入欄位沒有設定 readonly 屬性並且沒有被停用，則可以啟用拼寫檢查。

如果 使用者代理 的首選項覆蓋了設定，則讀取 spellcheck 返回的值可能無法反映控制元件中拼寫檢查的實際狀態。

以下非標準屬性可用於搜尋輸入欄位。一般來說，除非不得已，否則應避免使用它們。

作為 Safari 擴充套件，autocorrect 屬性是一個字串，指示在使用者編輯此欄位時是否啟用自動更正。允許的值為

on

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

off

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

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

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

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

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

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

型別為 search 的 <input> 元素與型別為 text 的元素非常相似，只是它們專門用於處理搜尋詞。它們在行為上基本等效，但使用者代理可能會選擇預設以不同的方式對它們進行樣式化（當然，網站可以使用樣式表對它們應用自定義樣式）。

<form>
  <div>
    <input type="search" id="mySearch" name="q" />
    <button>Search</button>
  </div>
</form>

呈現如下

q 是賦予搜尋輸入的最常見的 name，雖然它不是強制性的。提交時，傳送到伺服器的資料名稱/值對將為 q=searchterm。

主要的根本差異在於瀏覽器處理它們的方式。首先要注意的是，一些瀏覽器顯示一個十字圖示，可以點選它以立即刪除搜尋詞（如果需要），在 Chrome 中，按下 escape 鍵也會觸發此操作。下面的截圖來自 Chrome

此外，現代瀏覽器還傾向於自動儲存先前在不同域中輸入的搜尋詞，然後在同一域中的搜尋輸入中執行後續搜尋時，這些搜尋詞會作為自動完成選項出現。這有助於那些傾向於在一段時間內對相同或類似的搜尋查詢進行搜尋的使用者。此截圖來自 Firefox

現在，讓我們看看一些可以應用於搜尋表單的有用技術。

可以使用 placeholder 屬性在搜尋輸入框內提供一個有用的佔位符，它可以提示使用者如何使用該輸入框。請看下面的例子

<form>
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…" />
    <button>Search</button>
  </div>
</form>

你可以看到下面是如何呈現佔位符的

搜尋表單的一個問題是其可訪問性；一個常見的做法是不為搜尋欄位提供標籤（雖然可能有一個放大鏡圖示或類似圖示），因為搜尋表單的用途通常對有視力的人來說相當明顯，因為其位置 (此示例展示了一個典型模式)。

然而，這可能會讓螢幕閱讀器使用者感到困惑，因為他們不會收到任何關於搜尋輸入框的語音提示。一種不會影響你的視覺設計的方法是使用 WAI-ARIA 功能

• 在 <form> 元素上設定 role 屬性的值為 search 會導致螢幕閱讀器宣佈該表單是一個搜尋表單。
• 如果這還不夠，可以在 <input> 本身使用 aria-label 屬性。這應該是一個描述性的文字標籤，螢幕閱讀器會讀出它；它用作 <label> 的非視覺等效項。

讓我們看一個例子

<form role="search">
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…"
      aria-label="Search through site content" />
    <button>Search</button>
  </div>
</form>

你可以看到下面是如何呈現它的

與之前的例子相比，沒有任何視覺差異，但螢幕閱讀器使用者有更多資訊可供使用。

可以使用 size 屬性控制輸入框的物理大小。使用它，可以指定輸入框可以同時顯示的字元數。例如，在這個例子中，搜尋框的寬度為 30 個字元

<form>
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…"
      size="30" />
    <button>Search</button>
  </div>
</form>

結果是這個更寬的輸入框

型別為 search 的 <input> 元素可以使用與普通 text 輸入相同的驗證功能。通常情況下，你不太可能希望為搜尋框使用驗證功能。在很多情況下，使用者應該被允許搜尋任何內容，但需要考慮一些情況，例如針對已知格式資料的搜尋。

有一些有用的偽類可用於對有效/無效表單元素進行樣式化：: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>

input {
  margin-right: 10px;
}

input:invalid ~ span::after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span::after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
}

呈現如下

此外，如果你嘗試在沒有輸入搜尋詞的情況下提交表單，瀏覽器會顯示一條訊息。以下示例來自 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>

input {
  margin-right: 10px;
}

input:invalid ~ span::after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span::after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
}

呈現如下

如果你嘗試在輸入少於 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>

input {
  margin-right: 10px;
}

input:invalid ~ span::after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span::after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
}

呈現如下

你可以在我們的 website-aria-roles 示例中看到一個在上下文中使用的搜尋表單的良好示例 (線上檢視)。

• HTML 表單
• <input> 及其基礎的 HTMLInputElement 介面
• <input type="text">
• CSS 屬性的相容性