HTMLで検索機能を付けるには？入力フォームで見やすいサイトに！

こんにちは！最近週末は、子ども達とお笑い番組を観て大笑いしているchieitoです。笑いはストレスや悩みを発散してくれるので欠かせません！

さて早速本題に入りますが、「検索機能」が付いているWebサイトをよく目にしますよね。この検索機能、どのようにサイトに設置しているかご存知でしょうか？ブログやショッピングサイト、キュレーションサイトなどはこの検索機能があると、とても便利ですよね！

今回は、HTMLでの検索機能の作り方を詳しくご説明します。ぜひ参考にしてみて下さい。

HTMLで検索機能を付けるとこんなに便利に！

キュレーションサイトや個人ブログなどを読んでいるときに、過去の記事を検索したことがありますか？このような検索機能がないと、１ページ１ページ地道に探していかなければなりません。これってとても手間で面倒な作業ですよね。

出典：https://webukatu.com/wordpress/

このような検索機能が設置されていれば、キーワードを入力して読みたい記事や見たいページを素早くヒットさせることが可能です。またキーワード検索により、探していた内容だけでなくそれに近いページもヒットするので、プラスアルファの情報を得ることもできます。

情報量やページ数が多いWebサイトほど、この「検索機能」はなくてはならないものと言えるでしょう。コーディングが難しそうなイメージがありますが、HTMLを使用して比較的簡単に検索機能を設置することが可能です。まだこの検索機能をサイトに導入していない方は、ぜひこの記事を読みながら作成してみて下さい！

早速、HTMLを使って検索機能を追加してみよう！

では、早速HTMLを使ってWebサイトに検索機能を設置してみましょう。ここでは、HTMLのコードの書き方をご説明します。

Web全ての検索をする方法

サイトに設置されている検索機能には、GoogleやYahooなどWeb全体を対象に検索する場合と、閲覧しているサイト内のみでの検索など、検索する範囲を設定することが可能です。ここではまず、Web全体からキーワードを検索する方法をご紹介します。

①まずは、入力や送信フォームに使用する<form>タグを使用します。

この様に、「action」属性に検索サイトURLを、「method」属性には送信するときの転送方法（getもしくはpost）を記述しましょう。

このgetとpostには、以下のような違いがあります。

またaction属性の部分のURLを変更すれば、別の検索エンジンでの検索が可能です。

②次に、<input>ダグを使用して<form>タグの構成を作っていきます。

<input>タグには、

を記述していきます。

ここでは検索機能を作成するので、type（形式）は「search（検索）」「submit（実行ボタン）」です。

HTML内で上記のように記述していくと、

このような検索機能を作成することができます。２行目が入力フォーム、３行目が検索ボタンです。

サイト内だけで検索をする方法

使用しているサイト内だけでの検索をする場合は、<form>タグのaction属性をサイトURLに変更することで可能になります。

これにより、キュレーションマガジンやブログなどサイト内でキーワード検索ができる様になり便利です。ほとんどのサイトで、この様に閲覧しているサイト内での検索ができるように設定されています。

検索機能のサイズやカラーを指定する方法

入力フォームのサイズを変更したい、自分で作成した検索ボタンを使いたいという人も多いのではないでしょうか。その場合は、HTMLの<input>タグを利用してカスタマイズしていきましょう。

①検索ボタン部分に画像を使用する場合

検索ボタン部分を自分で作成したイラストやフリー画像などを使用する場合は、コードに画像URLを記述することで可能になります。

HTML内にこの様なコードを記述することで、

検索ボタンを自由にカスタマイズすることが可能です。

画像のサイズは、上記コードの「width」と「height」で整えましょう。

②テキストボックスのサイズを変更する

文字を入力するテキストボックスは「size属性」を使って変更することが可能です。

この様にHTML内でサイズを変更し、検索機能のバランスを整えてより使いやすいサイトにしましょう！

注意ポイントは？

上記で説明したように、検索機能はHTMLで<input>タグを使用して作成していきます。この<input>タグには様々な属性があるので、間違えないように記述していきましょう。

例えば、

これらはログインなどのパスワード入力には便利かもしれませんが、検索機能にはあまり必要ありません。検索機能に何が必要なのか、ユーザー目線や利便性を重要視して作成すると良いかもしれませんね！

また今回紹介した検索機能の方法は、HTMLのみで完結できるやり方です。もっとサイズや色などをカスタマイズしたいという場合は、CSSを使用してデザインしていきましょう。

まとめ

いかがでしたでしょうか！入力フォームなど動きがある要素は、プログラミング初心者では難しいイメージがありますよね。またCSSを使わなければ出来ないのでは？と思っている人も多いのではないでしょうか。しかしここで説明したように、意外と簡単にHTMLを使って検索機能を設置することが可能です。

この検索機能の有無は、サイトの使いやすさだけでなくユーザーの増加やリピーターの定着などにも影響を与えます。HTMLで検索フォームを作成し、より良いWebサイトに仕上げましょう！