を使った検索入力欄の作り方を解説。基本構文、フォームのサンプルコード、placeholderやrequiredなど便利な属性まで初心者向けに紹介します。">
HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのsearch入力タイプの使い方をわかりやすく解説

HTMLで検索用の入力欄を作成するには、<input type="search"> を使用します。これは検索フィールド専用の入力タイプで、見た目は通常のテキストフィールドとほぼ変わりませんが、「検索欄である」という意味（セマンティクス）をブラウザや支援技術に伝えることができます。

この入力タイプを使うことで、サイト内検索などの検索バーを簡単に実装できます。多くのブラウザでは、入力内容を消去できる「×」ボタンが自動的に表示されるのも特徴です。

HTMLのsearch入力タイプの使い方をわかりやすく解説

基本構文

<input type="search" name="search">

使用例

以下のコードを実行すると、HTMLにおける検索入力タイプの使い方を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML input search</title>
   </head>

   <body>
      <form action = "" method = "get">
         Search<br>
         <input type = "search" name = "search"><br>
         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

便利な属性

検索入力タイプは、他のテキスト系入力と同様にさまざまな属性と組み合わせて使えます。

  • placeholder：入力欄に薄いグレーのヒントテキストを表示します（例：「キーワードを入力」）。
  • name：フォーム送信時のパラメータ名を指定します。
  • required：入力を必須にし、空のまま送信できないようにします。

例えば、プレースホルダーを付けた場合は次のように記述します。

<input type="search" name="q" placeholder="キーワードを入力" required>

type="text" でも同様の見た目にはできますが、type="search" を使うことで意味が明確になり、SEOやアクセシビリティの面でも有利になります。検索機能を実装する際は、ぜひ search 入力タイプを活用しましょう。

  1. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep

  2. HTML DOM Input Searchタイププロパティの使い方とサンプルコード

    HTML DOMのInput Searchタイププロパティは、type=searchが指定されたinput要素に関連付けられているプロパティです。このプロパティは、検索用input要素に対して常に文字列「search」を返します。構文Searchタイププロパティの構文は以下のとおりです。searchObject.typeサンプルコードそれでは、Input Searchタイププロパティの使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>Search type property</h1> <