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
コメントを残す