htmlで検索フォームを作成する。

htmlでフォームを作るってみます。

ECサイトとかだと検索BOXって絶対必要なものなのでここに作り方まとめます。ただ今回は、実際に検索を実行させることはしません。ただ単純にhtmlとcssで検索フォームを作成するだけです。

作りたいもの。

こんな感じの検索box.

formタグの属性

まずフォームを作成するにはformタグ、inputタグを使用する必要があります。

<form action="https://qiita.com" method="GET">
   <!-- ここには<input>タグを入れる -->
</form>

・ action → 入力されたデータをどこのURLに送信するかを指定する。

・ method → GETとPOSTが一般的。GETはサーバーに「やあサーバ、このリソースをくれよ。」と指示。POSTはサーバーに「やあサーバ、このデータを見て適切な結果を返してよ。」 と指示するもの。（参考:MDN） ちなみに、検索formは入力した値に対してその検索結果をサーバーから取得したいのでGETです。

inputタグの属性

<form action="https://qiita.com" method="GET">
   <input class="form-text" type="seach" placeholder="検索 …">
</form>

・ class → cssを適用させるためにclass名をつける。

・ type → このinputは何に使用されるのかを選ぶ。今回はseachに使用するのでsearch（参考:HTMLクイックリファレンス）

・ placeholder → input box内に表示させる文字列。

CSSでスタイリング

最後にCSSで整えれば出来上がり。

.form-text{
    font-size: 16px;
    padding: 10.130px;
    width: 191px;
}

完成！