A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/search below:

<search>: ä¸€èˆ¬æ¤œç´¢è¦ç´ - HTML | MDN

<search>: 一般検索要素

Baseline 2023

Newly available

<search> は HTML の要素で、文書やアプリケーションのうち、検索や絞り込み操作を行うことに関連する、フォームコントロールやその他のコンテンツの部分を表すコンテナーです。<search> 要素は意味的に、要素の内容の目的が検索や絞り込み機能であることを示します。検索や絞り込み機能は、ウェブサイトやアプリケーション、現在のウェブページや文書、あるいはインターネット全体やそのサブセクションを対象とする可能性があります。

属性

この要素はグローバル属性のみを持ちます。

使用上の注意

<search> 要素は検索結果を表示するためのものではありません。むしろ、検索やフィルタリングの結果はそのウェブページのメインコンテンツの一部として存在するべきです。とはいえ、検索や 絞り込み機能の中の「クイック検索」機能の一部である提案やリンクは、検索機能なので <search> 要素のコンテンツの中で入れ子にするのが適切です。

例 ヘッダーの検索フォーム

この例では、単純なサイト全体の検索を行うために、ウェブサイトヘッダー内の検索のコンテナーとして <search> を使用する例を示します。<search> は <form> の意味づけコンテナーであり、ユーザーが入力した検索クエリーをサーバーへ送信します。

HTML 結果 ウェブアプリの検索

この例は、ウェブアプリケーションで JavaScript によって動的に行うの検索機能を実装する際の DOM コンテンツの可能性を示しています。検索機能がすべて JavaScript で実装された場合、フォームが送信されなければ <form> 要素も送信 <button> も必要ありません。意味づけのために、<search> 要素が検索と絞り込み機能を含めるために使用されています。

HTML 
<search>
  <label>
    検索して絞り込み
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    完全一致のみ
  </label>

  <section>
    <h3>結果:</h3>
    <ul id="results">
      <!-- 検索結果コンテンツ -->
    </ul>
    <output id="no-results">
      <!-- 結果のない時のコンテンツ -->
    </output>
  </section>
</search>
結果

メモ: JavaScript を使用していないユーザーもいること、そして JavaScript が正常にダウンロードされ、解釈され、実行されるまでは、どのユーザーも JavaScript を実行していないことを忘れずにしてください。ユーザーが JavaScript を無効にしていても、確実にサイトのコンテンツにアクセスできるように保証してください。

複数の検索

この例は、2 つの検索機能を持つページを示しています。最初の検索はヘッダー上のグローバルサイト検索です。2 つ目はページのコンテキストに基づいた検索とフィルターで、この例では車の検索です。

HTML 
<body>
  <header>
    <h1>Car rental agency</h1>
    <search title="Website">...</search>
  </header>
  <main>
    <h2>Cars available for rent</h2>
    <search title="Cars">
      <h3>Filter results</h3>
      ...
    </search>
    <article>
      <!-- search result content -->
    </article>
  </main>
</body>
結果 技術的概要 仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4