【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

 







この記事をSNSでシェアするには以下リンクから

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

ジュタカ

海外駐在員として、アジアで働いております。当ブログでは、「世界」をテーマに仕事や旅行情報を個人の体験談を交えながら発信しております。また、「タイ」と「ボクシング」が好きでこの分野の情報も多いです。

【趣味】ボクシング、旅行
【好きな国】タイ、香港・澳門

詳細プロフィールはこちらから