記事

<search>〜</search>

search（サーチ）要素は検索に関連する入力コントロールやコンテンツをまとめます。

search 要素は、検索、あるいはフィルタリングなどの操作を実行するための入力コントロールや関連コンテンツのまとまりを表します。例えば、Webサイトに設置する「サイト内検索」のフォームなどが該当します。

search要素で使用できる属性

グローバル属性

すべてのHTML要素で使用できる属性になります。

使用例

<search>
  <form action="./search" method="get">
    <fieldset>
      <legend>サイト内検索</legend>
      <label for="query">検索キーワード</label>
      <input id="query" name="q" type="search" placeholder="検索キーワードを入力" required>
      <button type="submit">検索</button>
    </fieldset>
  </form>
</search>

表示

JavaScript のみで検索機能を実装する場合は下記のようなマークアップ

使用例

<search>
  <label for="query">検索キーワード</label>
  <input id="query" type="search" placeholder="検索キーワードを入力">
  <button>検索</button>
</search>

表示

＊search要素については、あわせて、form要素の使用例も参照してください。