【HTML】＜input＞タグの属性　value と placeholder を使い分けよう

プログラミングを勉強中のみなさん、こんにちは！

今回は、<input>タグの　value と placeholder を使い分けについて紹介します。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

それでは見ていきましょう。

コードの比較

See the Pen
valueとplaceholder by t.h (@tomtom15)
on CodePen.

value

上の画面がの１つ目のinputが 属性：value　です。
属性をvalueにすると入力エリアには初期値が入ります。

初期値以外の値を入力するには、初期値を削除しなければなりません。

placeholder

そして、二つ目のinputが 属性：placeholder　です。
placeholder　は入力するためのヒントのようなものを入力欄に表示することができます。

例えば、名前、メールアドレス、住所、などです。

「この入力エリアにはこれを入力するんだよ」
とわかるような形にできます。

初期値ではないので、表示された値を削除する必要はなく、上書きするような感覚で値を入力できます。

注意点

三つ目の input をご覧ください。

あまりないと思いますが、value と placeholderを両方記述した場合は、
valueが優先されます。

まとめ

valueは、初期値を前もって設定しておけば入力者の手間を省くことができます。

placeholderも、何を入力すればいいか瞬時に判断できますので、視覚的な効果があります。

どちらもケースバイケースで使い分けましょう。

＜input＞タグに関連する記事も紹介しておきます。