[フロントエンドエンジニア]HTMLで使用するSELECTタグやinputタグなどで使用するplaceholderの話

placeholderの話

今回は、htmlでinputタグ、SELECTタグ、textareaタグなどでplaceholderを設定したい時に
どうやるのかっていうのを共有させていただきます。

SELECTタグの場合

SELECTタグにはいくつかやり方があるのですが、まずは一般的なよく見る書き方から紹介します。

パターン1

<select>
<option value=''>選択してください</option>
<option>テスト１</option>
<option>テスト2</option>
<option>テスト3</option>
</select>

こうすると以下の画像のようになります。(見やすいように2つ作りました)

こうすれば一応問題はないのですが
一つよくないことがあります。(場合によるかも)
この実装だと"選択してください"をまた押せることになるのでできれば避けた方が良さそうです。
では、どうすればいいか。次のパターン2で紹介します。

パターン2

"選択してください"を最初の時にだけ表示させ、選ぶと"選択してください"を選択できないようにしたいと思います。

<select style="">
  <option value="" style="display: none;">選択してください</option>
  <option value="">テスト1</option>
  <option value="">テスト2</option>
  <option value="">テスト3</option>
</select>

selectタグ内のoptionタグの一番最初にstyle属性でdisplay:none;を指定してあげると以下の画像のようにできます。

今回はoptionタグにstyle属性を設定したのですがcssの方でstyleを当てた方がいいかもしれません。

inputタグ、textareaタグ

次はinputタグ、textareaタグのplaceholderです。
こちらのplaceholderはそれぞれのタグにplaceholder属性を指定するだけですので簡潔にできます。

<input placeholder='これはテストです'>
<textarea placeholder='これはテストです'></textarea>

これだけで大丈夫です。
そうすると以下の画像のようになります。

以上になります。