バックパッカーズバイブル: ~世界を旅する前に読んでおきたい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運営者
タイ(バンコク・パタヤ)旅行&海外旅行&アジア生活が生きがい。18歳に初海外で濠洲→2007年ムエタイで初訪タイ→卒業旅行で3週間米国に初一人旅→ベンチャーに数年勤務→退職→世界一周1年32カ国→帰国→アジアに駐在員→現地会社経営※現在。アラサー。現在38カ国訪問。電子書籍随時。引退後はパタヤ移住が目標。