HTMLでoptionタグに初期値を設定する方法を解説！

HTMLでselectタグの中のoptionタグに初期値を設定したい時はよくあります。

まずselectタグの中のoptionタグがどのような挙動をするのか、分からない人のために簡単にサンプルコードを用いて解説します。

このようにselectタグで全体を囲み、optionタグの数だけ選択肢を増やすことができます。

またサーバーにデータとして送信する際、「selectタグのname属性=oprtionタグのvalue属性」となります。

もし今回男を選ぶと、「gender=male」となります。

では以下の項目で初期値を設定するにはどのようにすればいいのかについて解説します。

HTMLでoptionタグに初期値を設定する方法としては、初期値として扱いたいoptionタグの要素にselected属性を加えるです。

今回評価というタイトルで、初期値を「3」とします。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにもしselected属性をつけないと、「1」が初期値となるはずですが、selected属性が3のoption要素についているがために、初期値が「3」となっていることが分かります。

初期値に「性別」などのタイトルを入れて、その初期値は選択できないようにしたいという時があります。

今回は、「性別」のoption要素にhidden属性を加えます。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように初期値は選択できないことが分かります。

いかがでしたでしょうか？

selectタグの中のoptionタグに初期値を設定するだけで、ユーザー視点で一目で何の項目なのかということが分かり、ユーザビリティを向上させることができます。

ぜひ試してみてください。

【期間限定】全カリキュラム無料で提供中！

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！