HTML | 検索フォームのサンプルコード
基本的な検索フォームのHTMLサンプルコードと表示例を紹介しています。
検索フォームのサンプルコード
サンプルコードでは、検索フォームの場合、多くはURLにパラメータを付与するGET送信で行うため「method」属性は「get」にしてあります。
また、「type」属性は「text」でも問題ありませんが、HTML5より実装されている「search」を指定しています。
「placeholder」属性に値を指定する事で、入力前に例などを表示する事が可能です。
<form action="" method="get">
<input type="search" name="keyword" placeholder="検索キーワード">
<input type="submit" value="検索">
</form>以下は上記フォームのHTMLを実際に設置した結果になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
フォームのデザインに関しては、CSS関連のページにて多数紹介しています。
また、PHPでのデータ受け取り、JavaScriptでの操作についても、それぞれのカテゴリで紹介しています。