<input type="search">

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

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

searchTerms = mySearch.value;

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

型に関係なくすべての <input> 要素を操作する属性に加え、 search 型の入力欄は次の属性にも対応しています。

{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}

ユーザーが検索フィールドに入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 maxlength が指定されていないか、無効な値が指定されていると、検索フィールドには最大文字数が設定されません。この値は minlength の値以上である必要もあります。

フィールドに入力されたテキストの長さが UTF-16 コード単位で maxlength の長さを超えていると、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

ユーザーが検索フィールドに入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 maxlength で指定された値以下である必要があります。 minlength が指定されていないか、無効な値が指定されていると、検索フィールドには最小文字数が設定されません。

入力欄のテキスト値の長さが UTF-16 コード単位で minlength の長さよりも短いと、その検索フィールドは制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

pattern 属性は、指定する場合は正規表現であり、入力欄の value が制約検証に合格するためにはこれと一致しなければなりません。これは RegExp 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに 'u' フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。

詳細や例についてはパターンの指定を参照してください。

{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}

{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}

{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}

{{page("/ja/docs/Web/HTML/Element/input/text", "spellcheck-include")}}

以下の標準外の属性が検索入力フィールドで利用できます。一般的な規則として、できれば使用することを避けてください。

Safari 拡張である autocorrect 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。

on

構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。

off

自動修正やテキストの置き換えを無効にします。

Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に Enter キーや Return キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの Enter キーにどのようなラベルを使用するかを決定するために使用されます。

許可されている値は go, done, next, search, send です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。

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

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

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

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

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

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

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

入力ボックスの物理的な寸法は、 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 を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (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 の例です。

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

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:

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

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 Forms
• <input> および HTMLInputElement インターフェイスに基づいています。
• <input type="text">
• CSS プロパティの互換性