"search" 型の<input> 要素は、ユーザーが検索クエリを入力するために設計されたテキスト入力欄です。 text 入力欄と機能的には同じですが、ユーザーエージェントは別なスタイルを適用するかもしれません。

検索フィールドに含まれる値を表す DOMString
イベント change 及び input
対応している共通属性 autocomplete, list, maxlength, minlength, pattern, placeholder, required, size
IDL 属性 value
メソッド select(), setRangeText(), setSelectionRange()

value 属性は、テキスト入力欄に入力された現在のテキストの値が入っている DOMString です。 JavaScript では HTMLInputElement.value プロパティを使ってこれを受け取ることができます。

searchTerms = mySearch.value;

入力欄に検証の制約がない場合 (詳しくは検証を参照)、値は任意の文字列又は空文字列 ("") になることがあります。

検索入力欄の使用

search 型の <input> 要素は、 text 型ととても似ていますが、検索用語を扱うことに特化している点が異なります。どちらも基本的には同じ動作をしますが、ユーザーエージェントによっては既定で異なるスタイルを選択するかもしれません (そしてもちろん、サイトは独自のスタイルを適用することができます)。

基本的な例

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

これは次のように表示されます。

q は検索入力に与えられる最も一般的な name ですが、そうすることが必須ではありません。送信すると、サーバーに送信されるデータの名前と値の組は q=searchterm となります。

入力欄に name を設定することを忘れないでください。そうしないと送信されません。

search 型と text 型の違い

主な違いはブラウザーによる扱い方です。特筆するべき最初のことは、ブラウザーによっては×印を表示して、クリックすると簡単に検索語を削除できることです。次のスクリーンショットは Chrome のものです。

加えて、最近のブラウザーは以前ドメイン内で入力された検索用語を自動的に格納し、そのドメインの検索入力欄で従属的な検索が行われたときに、自動補完オプションに上がってくるようにする傾向があります。これは同じ又は似た検索を繰り返して行う傾向があるユーザーにとって便利です。次のスクリーンショットは Firefox のものです。

この点について、検索フォームに適用することができる有用なテクニックを見てみましょう。

プレイスホルダーの設定

placeholder 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。

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

プレイスホルダーの表示方法を以下で確認できます。

検索フォームのラベルとアクセシビリティ

検索フォームの一つの問題はアクセシビリティです。一般的なデザインの慣例では、検索フィールドにラベルがなく (虫眼鏡のアイコンや同類のものはあります)、検索フォームの目的はふつう、よく見えるユーザーにとっては配置から明らかです (この例ではよくあるパターンを示しています)。

しかし、これは、検索入力が何であるかを言葉で示していないため、読み上げソフトの利用者に混乱を引き起こす可能性があります。 ビジュアルデザインに影響を与えないこの方法の1つは、 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>

プレイスホルダーがどう表示されるかを以下で確認できます。

前回の例から見かけ上の違いはありませんが、読み上げソフトのユーザーは追加情報を得る方法があります。

メモ: このようなアクセシビリティ機能の詳細ついては、 Signposts/Landmarks をご覧ください。

物理的な入力要素の寸法

入力ボックスの物理的な寸法は、 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 入力欄と同じ検証機能が利用できます。一般に検索ボックスに検証機能を使うことはあまりないでしょう。多くの場合、ユーザーは何でも入力できますが、既存の形式のデータに対して検索を行う場合など、考慮するべきケースも多少あります。

メモ: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。

スタイルにおけるメモ

ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な疑似クラスが利用できます。 :valid 及び :invalid です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。

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 の例です。

form field with attached message that says Please fill out this field

入力欄の中に無効な異なるデータ型を持つフォームを送信しようとすれば、下記の例のように、異なるメッセージが表示されるでしょう。

入力値の長さ

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>

This renders like so:

4文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。8文字を超えて入力しようとしても、ブラウザーが許しません。

パターンの指定

pattern 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは正規表現による検証をご覧ください)。

例を見てみましょう。製品 ID の検索フォームを提供し、 ID はすべてが2文字の英字に続いて4桁の番号です。以下の例でそれに対応します。

<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 の例ので使用した検索フォーム (ライブで見る) が良い例です。

仕様書

仕様書 状態 備考
HTML Living Standard
<input type="search"> の定義
現行の標準 初回定義
HTML 5.1
<input type="search"> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,