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

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

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

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

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

クリックできる目次

特徴

<input>タグにおける属性でよく使うのが、
value と placeholder です。

valueには初期値が入ります。

<input type="text" value="〇〇〇" >

コードはこのような感じです。

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

placeholderは、入力するためのヒントのようなものを入力欄に表示することができます。

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

この入力欄にはこれを入力するんだよ、とわかるような形にできます。

<input type="text" placeholder="〇〇〇" >

コードはこのような感じです。

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

あまりないと思いますが、下のようにvalue と placeholderを両方記述した場合。

<input type="text" value="〇〇〇" placeholder="XXX" >

この場合、valueが優先されます。

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

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

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

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