HTMLでoptionタグにselected属性を使い初期値を設定する方法を現役エンジニアが解説【初心者向け】

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>

実装結果

[PR] Webデザインで副業する学習方法を動画で公開中

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属性について解説しました。

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

執筆してくれたメンター

HTMLでoptionタグにselected属性を使って、初期値を設定する方法がよくわかりました！

ゆかりちゃんも分からないことがあったらどんどん質問してね！

分かりました。ありがとうございます！

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する