<input type="search">

概要

<input type="search"> は検索クエリ入力用のフィールドを作成します。ブラウザによってはクリアボタンが自動表示されます。

対応ブラウザ

基本構文

<form action="/search" method="get">
  <label for="q">検索:</label>
  <input type="search" id="q" name="q"
    placeholder="キーワードを入力" autofocus>
  <button type="submit">検索</button>
</form>

実務での使いどころ

• <input type="search"> の活用

  検索入力タイプ。検索フィールド専用のinput要素。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — <input type="search">
• Can I use — <input type="search">