プログラミング

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

スポンサーリンク

tablet

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

今回は、<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>タグに関連する記事も紹介しておきます。

スポンサーリンク

-プログラミング
-, , , ,

© 2022 サカらいふ Powered by AFFINGER5