<select>で、「ご選択」のテキストを最上部に表示した方が、親切だったり誘導だったりするので、配置していましたが、required※必須だと、未選択でスルーしても、「ご選択」を選択した事になってしまい※必須が無意味です・・・
フォームで、見本テキストのように案内テキストをグレーアウト（リプレイス）で表示するのは、placeholder=' ' が仕様です。
<input placeholder='ここにテキスト'>
<textarea placeholder='ここにテキスト'></textarea>
でも、<select>では無理です・・・ HTMLだけで設定すると、
← 「ご選択」自体すらOP項目になっちゃいます・・・
ところがこれ、CSSで実現できるんですね！
← 「ご選択」自体は、OP項目に出ません！
しかも、 value=''の値が０になるので、※必須が有効になるのです。
<option value='' disabled selected style='display:none;'>
これが実現できるなんて、この方法は思いつきませんでしたｗ
<select>
<option value='' disabled selected style='display:none;'>・ご選択</option>
<option>あああ</option>
<option>ABCDEFGHI</option>
<option>12345</option>
</select>SELECTED属性も付与できますし、フォーム用.cssで、デフォ利用すると便利でしょう。
selectでdisabledなんて使わないから、select option:first-child[disabled]{ display: none;}で良いでしょうね。
ただ、フォームの目的に関しては、
※必須や記入/選択の項目を多く設定/設置してしまうと、選択肢に該当しないユーザーを強制する事になるので、送信率が減ります・・・
なので、
<option value='未選択'>・ご選択</option> のように曖昧にしておりました。[その他]の項目でも親切でした。
この目的としては、フォームでの第一声「ファーストコンタクト」を頂く事が、利便性よりもマーケティングとして優先事項/重要だったりしますので、※必須や記入/選択の項目は、慎重に設置しましょう。
コメント