今回は【HTML】type属性searchの使い方、検索キーワードの入力欄を作成しよう!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はinput type=”search”について解説しております。
今回は、input type="search"
について詳しく解説していきます。
type=”search”では、「検索キーワードの入力欄」が作成できます。
input type="search"
で作成すると、検索キーワードの入力欄が作成されます。
左の図が、input type="text"
になり、通常の入力欄になります。
右の図が、input type="search"
になり、検索キーワードの入力欄になります。
見た目に変化はありません。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
type=”search”について
input type="search"
を指定すると、検索キーワードの入力欄を作成できます。
対応したブラウザでは検索用の入力欄が表示されます。
また、スマートフォンのブラウザなど、環境によっては入力キーボードが変化します。
書き方は以下のようになります。
<form method="post" action="URL" method="get">
<div>
<label for="search">検索する</label>
<input type="search" name="s" placeholder="キーワードを入力">
</div>
<input type="submit" value="検索する" />
</form>
postでは、「お問い合わせフォーム」や「会員フォーム」など、ユーザーの情報を送信する
フォームに適しています。
getでは、「サイト内検索、検索ワード」など、URLに対してデータを送信し、ページにリンクする
フォームに適しています。
placeholder属性(入力欄に薄く表示)について
placeholder属性とは、入力欄に文字や値を薄く表示します、入力例などを表示するときに指定します。
「キーワードを入力」など、キーワード関連を予測する文字を入れておくとユーザーが間違わずに入力してくれます。
placeholderで指定した文字や値は入力する際に、消えますので問題はありません。
<form method="post" action="URL" method="get">
<div>
<label for="search">検索する</label>
<input type="search" name="s" placeholder="キーワードを入力">
</div>
<input type="submit" value="検索する" />
</form>
name属性について
name="s"
とは「search」の略になります。検索結果後のアドレスバーに反映されます。
例) https://url/?s=〇〇〇〇になります。
他には「query(クエリ)」の頭文字qがよく使われます。
他の属性について
required属性とは、必須項目に設定します。
「検索フォーム」に関しては、「お問い合わせフォーム」とは違い個別で使う事がおおいです。
required属性(必須)は指定しなくても問題ありません。
maxlength属性とは、文字数の最大値を指定します。
maxlength="5"
と指定すると、5文字を超えることはありません。
5文字以上の「検索キーワード」を入力したい場合は入力できなくなるので注意が必要です。
minlength属性とは、文字数の最小値を指定します。
minlength="4"
と指定すると、4文字以上入力しないとエラーが表示されます。
4文字以下の「検索キーワード」を入力したい場合はエラーが表示されるので注意が必要です。
CSSでinput type=”search”を整える
今回はCSSの「属性セレクタ」を使い整えていきます。
書き方は以下のようになります
input[type="search"] {
/*--type="search"のinput要素にのみ適用されます--*/
}
<form method="post" action="URL" method="get">
<div>
<label for="search">検索する</label>
<input type="search" name="s" placeholder="キーワードを入力">
</div>
<input type="submit" value="検索する" />
</form>
input[type="search"] {
width: 200px; /*--幅--*/
padding: 10px; /*--余白--*/
font-size: 16px; /*--文字サイズ--*/
border: solid 2px #cccccc; /*--ボーダー線--*/
border-radius: 5px; /*--角丸--*/
}
/*--focus--*/
input[type="search"]:focus {
background-color: #febe3e; /*--背景色--*/
}
input[type="submit"] {
width: 20%;
font-size: 15px;
color: #fff;
display: inline-block;
padding: 15px 0px;
text-align: center;
background-color: #5c87a6;
border: 1px solid #5c87a6;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
transition: background-color 1s;
}
/*--hover--*/
input[type="submit"]:hover {
color: #5c87a6;
background-color: #ffffff;
border: 1px solid #5c87a6;
border-radius: 5px;
cursor: pointer;
transition: background-color 1s;
}
今回は、:focus
とは、テキストフィールドなどのフォーム部品がフォーカス状態になったときに、
スタイルが適用されます。
今回は、「背景色」が変わるようになっております。
また、ボタンは:hover
した際に、「背景色、文字色」が変わるようになっております。
関連記事
まとめ
今回はこれで以上です。
次回も「フォーム」について解説していきます。
- POINT
-
input type="search"
は、 検索キーワードの入力欄を作成します。 - placeholder属性とは、入力欄に文字や値を薄く表示します。
- CSSでスタイルを整える際には、「属性セレクタ、クラス名、id名」を使っても問題ありません。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事