HTMLでoptionタグにselected属性を使い初期値を設定する方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLでoptionタグにselected属性を使って初期値を設定する方法について解説しています。optionは選択肢を生成するタグです。optionタグの基本の使い方、selected属性による初期値の設定方法をソースコードと実際の画面の両方で確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでoptionタグにselected属性を使って初期値を設定する方法について解説します。
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
目次
- selectタグとoptionタグの関係
- selected属性で初期値を選択する方法
- optionタグとselected属性を使って選択式メニューを作ってみよう
- 執筆してくれたメンター
- HTMLを学習中の方へ
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
optionタグにselected属性を使って初期値を設定する方法について詳しく説明していくね！
お願いします！
selectタグとoptionタグの関係
selectタグとは、セレクトボックスを表示するタグです。
optionタグとは、selectタグ内で使用することで、選択肢の1つを作成可能です。
<select>タグと<option>タグで、入力フォームなどで使用される選択式メニューを設置できます。
<select>タグで項目(フォーム)を作成し、選択する値(選択肢)は<option>タグで作成できます。
2つのタグを活用したHTMLは以下の通りです。
HTML
<select name="number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>
実行結果
解説
ユーザーによって、例えば1を選択する操作がされるとき、次のコードが実行されます。
<select name="number"> <option value="1">1</option>
選択された値は、<select>タグのname属性と<option>タグのvalue属性がセットで送信されます。
今回の場合、ユーザーはnumberが1という情報を選択して送信することが可能です。
selected属性で初期値を選択する方法
Webページを読み込んだ際に、下記例のように、<select>タグで作成された選択式メニューの一番上の<option>タグの値が、選択されている状態となります。
例：<select>タグで初期の一番上の「1」と「あ」が選択された状態
HTML
<select name="number"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> </select>
解説
selected属性を使用することによって、初期の選択値を自由に設定することが可能です。
selected属性は初期選択値にしたい<option>タグに設定します。
今回は次のコードで、3を初期の選択値として設定しています。
<option value="3" selected>3</option>
実装結果
optionタグとselected属性を使って選択式メニューを作ってみよう
1〜5、あ〜お、A〜Eから1つ値を選択させるような選択式メニューを作成してみましょう。
初期選択値は3、い、Eになるようにします。
以下はoptionタグとselected属性を使用したコードの例です。
HTML
<select name="number"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> </select> <select name="kana"> <option value="あ">あ</option> <option value="い" selected>い</option> <option value="う">う</option> <option value="え">え</option> <option value="お">お</option> </select> <select name="alpha"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E" selected>E</option> </select>
実行結果
解説
上画像の状態で送信ボタンをクリックすると、<select>タグのname属性と<option>タグのvalue属性がセットとなり、下記の情報を送信することが可能です。
number ＝ 3 kana ＝ い alpha ＝ E
初期状態でこれらの指定がされているのは、次のコードでselectedが実装されているためです。
<option value="3" selected>3</option>
<option value="い" selected>い</option>
<option value="E" selected>E</option>
今回は、選択式メニューを設置するための<select>タグと選択値を設定するための<option>タグ、初期値設定のためのselected属性について解説しました。
執筆してくれたメンター
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。WordPressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
HTMLでoptionタグにselected属性を使って、初期値を設定する方法がよくわかりました！
ゆかりちゃんも分からないことがあったらどんどん質問してね！
分かりました。ありがとうございます！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
