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

HTMLでoptionタグに初期値を設定する方法を解説します。HTMLでoptionタグに初期値を設定することで、ここは何の項目なのかということが、ユーザー視点で一目で分かるようになります。また初期値を選ばせたくない場合について、その方法も解説します。

コンテンツ [表示]

  1. 1HTMLでoptionタグに初期値を設定したい
  2. 2HTMLでoptionタグに初期値を設定する方法
  3. 2.1selectタグで初期値を選択できないようにするには
  4. 3まとめ

HTMLでoptionタグに初期値を設定したい

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

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

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

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

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

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

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

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

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

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

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

selectタグで初期値を選択できないようにするには

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

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

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

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

まとめ

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

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

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

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

Qumeru

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

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

関連記事

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

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

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

目次