こんな人に読んで欲しい!
・検索バーを作ってみたい人
こんにちは、「なゆた」です!
今日は、HTMLでの検索バーの作り方についてを書きます。
皆さんは、「検索バーはどうやって作るの?」とか思ったことはありませんか?
これも、HTMLなら出来ちゃうんです!
なので、今回はHTMLでの検索バーの作り方をお教えします!
《主な使用タグ》
form・・・フォーム全体を示すタグ。フォームとは、Web ページ上で入力するコントロール等の事を言う。
input・・・form 要素内で使用する部品(コントロール)を生成する。ボタンやテキスト入力フィールド等入力するためのオブジェクトを作成する。空要素のため、閉じタグは不要。
①まず、<form>タグと、その中に2つの絶対的な属性を入力します。
![](https://nayuta-win.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-11.15.08.png)
②次に、<p>タグと<input>タグ、そしてその中に以下の絶対的な属性を入力します。(sizeとmaxlengthに関しては自由です。)
![](https://nayuta-win.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-11.18.23.png)
③2つのボタン作成に入ります。<input>タグを2回入力し、その中にそれぞれ以下の絶対的な属性を入れます。
![](https://nayuta-win.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-11.22.32.png)
![](https://nayuta-win.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-11.23.51.png)
④最後に、</form>タグで締めて完成です!
![](https://nayuta-win.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-11.24.47.png)
完成例がこちらです!
![](https://nayuta-win.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-11.28.38.png)
いかがでしたか?意外とカンタンです。ここに何かを検索すれば、すぐに結果にジャンプしますよ!
以上です、ありがとうございました!
コメント