＜input＞タグの属性 value と placeholder

2024年4月4日

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

<input>タグのvalue と placeholderってどう違うの？

という疑問にお答えします。

結論から言うと

valueは文字が入る。

placeholderは文字は見えるけど実際には文字が入っていない。

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

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

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

コードの比較

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

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

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

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

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

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

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

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

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

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

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

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

独学で行き詰まっている人はテックアカデミー無料メンター相談もおすすめです。