バックパッカーズバイブル: ~世界を旅する前に読んでおきたい52の話~ (ジュタカ出版) Kindle版

【inputタグ】placeholderとautofocusについて

placeholderとは何か?

placeholderはinputタグで使う属性です。
例えば、inputやtextareaに使います。

ブラウザで確認すると画像のように、フォームの中にグレーのテキストが表示されます。

文字を入力すると消えます。

使い方

inputタグに「placeholder」属性を入れそこに入れたいテキストを入れるだけです。

<input type=”name” name=”name” placeholder=”placeholder”>

placeholderの色を変えたい場合

初期値ですと色がやや濃い傾向にあるので、薄くしたい場合は、
inputタグに擬似要素を付けます。

input::placeholder {
color:指定の色;
}

IE:input:-ms-input-placeholder
Edge:input::-ms-input-placeholder

これでOKです。

参考サイト:https://qiita.com/yassh/items/4256f8ca3856cd4f86cc
参考サイト:https://udemy.benesse.co.jp/development/web/placeholder.html

autofocusとは何か?

autofocusとは、簡単に言えばそのページにアクセスした際に、
最初からフォームにカーソルが入っている状態になるinputの属性です。

これがあるとユーザーがいちいちマウスでフォームにカーソルをもってこなくても楽になりますね。

<input type=”text” name=”” autofocus>

参考サイト:https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autofocus

逆に無しだとどうか?

逆に無しだと以下のように自分でフォームにカーソルをもってこなくてはいけなくなります。

参考サイト:https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_submit

 







いつもシェアいただきありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


ABOUT US
アバター画像
JUTAKAノマドワーカー
約10年間の海外勤務を経て、海外・国内ノマドワーカーとして独立しました。日本をベースにタイ、カンボジア、ベトナム、インドネシア、フィリピンを拠点に活動しています。