はじめに
selectタグに「選択してください」などのプレースホルダーを表示させたいことがあるとか思います。
本記事では、optionタグに属性値と呼ばれる情報を設定していきます。たったこれだけで、簡単にプレースホルダーを実装できます。
デモ
下記は本記事で作成する、プレースホルダーを設定したセレクトボックスのデモです。
1. プレースホルダーにするoptionタグを追加
<select> <option value="red">赤色</option> <option value="blue">青色</option> <option value="green">緑色</option> </select>
例として上のHTMLのような、赤色・青色・緑色から好きな色を選択してもらうselectタグがあるとします。
まず、プレースホルダーとして利用するoptionタグを、selectタグに追加します。
このoptionタグで「選択してください」と表示させることにします。
<select> <option value="">選択してください</option> <option value="red">赤色</option> <option value="blue">青色</option> <option value="green">緑色</option> </select>
下の画像は、上記HTMLを実際にブラウザ上で表示したものです。
2.属性値のselectedを設定する
次に、プレースホルダーとして利用するoptionタグに、selectedという属性値を追加します。
追加する場所はvalue属性の前後どちらでも構いません。半角スペースを空けて、selectedと追記してください。
<select> <option value="" selected>選択してください</option> <option value="red">赤色</option> <option value="blue">青色</option> <option value="green">緑色</option> </select>
selected属性がつけられたoptionタグは、ページが読み込まれた時に選択された状態になります。
ページをリロードしてみることで、selected属性が設定されたoptionタグ（例では「選択してください」）が初期値として表示されていることが確認できると思います。
3.属性値のdisabledを設定する
このままだと、プレースホルダーとして利用したいoptionタグが選択可能なままなので、選択を制限するdisabled属性を追加します。
selected属性同様、半角スペースを空けてdisabledと追記してください。
<select> <option value="" disabled selected>選択してください</option> <option value="red">赤色</option> <option value="blue">青色</option> <option value="green">緑色</option> </select>
disabled属性がつけられたoptionタグは、ユーザーが選択できない状態になります。
