HTML Living Standard/search
search 要素
[編集]<search> 要素は、HTML Living Standardで新たに導入された要素で、ユーザーがウェブページ内で情報を検索するための機能を提供します。この要素は、検索フィールドや検索ボタンなどの検索インターフェースを作成するために使用されます。ユーザーが検索クエリを入力し、その結果を表示することが可能になります。
定義
[編集]<search> 要素は、検索機能を持つインターフェースを文書内に作成するためのコンテナとして使われます。これは、一般的に検索フィールド（テキスト入力）や検索ボタンを含み、ユーザーが指定した条件で情報をフィルタリングまたは検索する際に使用されます。検索機能自体の実装は、JavaScriptやサーバーサイド処理を通じて行われますが、<search> 要素はそのユーザーインターフェース部分を構築します。
使用方法
[編集]<search> 要素は、検索機能を提供するためのフォーム要素を包み込むために使用します。通常、この要素内には、検索の入力フィールド（<input type="search">）や、検索を実行するためのボタンなどが含まれます。
以下に基本的な構文を示します。
<search> <form> <label for="searchInput">検索：</label> <input type="search" id="searchInput" placeholder="検索語句を入力"> <button type="submit">検索</button> </form> </search>
このコードは、ユーザーがテキストを入力し、「検索」ボタンを押すことで検索を実行できるシンプルな検索インターフェースを提供します。
属性
[編集]<search> 要素自体には特別な属性はありませんが、通常この要素内に配置されるフォーム要素（<input>, <button>）には属性があります。例えば、<input> 要素ではtype="search"を指定することで検索用の入力フィールドを作成できます。
例
[編集]以下は、<search> 要素を使ってページ内検索インターフェースを作成する例です。
<search> <form> <label for="searchInput">ページ内検索:</label> <input type="search" id="searchInput" placeholder="キーワードを入力"> <button type="submit">検索</button> </form> </search>
このフォームでは、<input> 要素のtype="search"属性により、入力フィールドが検索専用のスタイルになります。<button> 要素は検索を送信するボタンを提供します。
使用例
[編集]<search> 要素を使って、ウェブサイト内で特定の内容を検索するインターフェースを作成する場合、以下のようなコードを使用します。
<search> <form> <label for="siteSearch">サイト内検索:</label> <input type="search" id="siteSearch" placeholder="サイトを検索"> <button type="submit">検索</button> </form> </search>
この例では、サイト内検索を実行するフォームを作成しています。ユーザーが検索語句を入力し、検索ボタンをクリックすることで、その結果が表示されます。
スタイル
[編集]<search> 要素は通常、他の要素と同じようにCSSでスタイルできますが、一般的にはフォーム内で使用されるスタイルが適用されます。以下は、CSSを使った簡単なスタイルの例です。
<style> search { display: block; margin: 20px 0; } input[type="search"] { width: 200px; padding: 5px; margin-right: 10px; } button { padding: 5px 10px; } </style>
このスタイルは、検索インターフェースを少し広めに表示し、入力フィールドにパディングとマージンを追加して使いやすくしています。