プログラミングを勉強中のみなさん、こんにちは!
今回は、<input>
タグの value と placeholder を使い分けについて紹介します。
初心者向けのメモ書きとして執筆しておりますので、あしからず。
それでは見ていきましょう。
特徴
<input>
タグにおける属性でよく使うのが、
value と placeholder です。
value
valueには初期値が入ります。
<input type="text" value="〇〇〇" >
コードはこのような感じです。
入力欄に初期値が入り、初期値以外の値を入力するには、初期値を削除しなければなりません。
placeholder
placeholderは、入力するためのヒントのようなものを入力欄に表示することができます。
例えば、名前、メールアドレス、住所、などです。
この入力欄にはこれを入力するんだよ、とわかるような形にできます。
<input type="text" placeholder="〇〇〇" >
コードはこのような感じです。
初期値では無いので、表示された値を削除する必要はなく、上書きするような感覚で値を入力できます。
注意点
あまりないと思いますが、下のようにvalue と placeholderを両方記述した場合。
<input type="text" value="〇〇〇" placeholder="XXX" >
この場合、valueが優先されます。
まとめ
valueは、必須でない入力欄に、初期値を前もって設定しておけば入力者の手間を省くことができます。
placeholderも、何を入力すればいいか瞬時に判断できますので、視覚的な効果があります。
どちらもケースバイケースで使い分けましょう。
<input>タグに関連する記事も紹介しておきます。 続きを見る
【CSS】<input> はインライン要素です max-widthは効きません