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

初心者向けにHTMLでoptionタグにselected属性を使って初期値を設定する方法について解説しています。optionは選択肢を生成するタグです。optionタグの基本の使い方、selected属性による初期値の設定方法をソースコードと実際の画面の両方で確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLでoptionタグにselected属性を使って初期値を設定する方法について解説します。

 

また、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

optionタグにselected属性を使って初期値を設定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

selectタグとoptionタグの関係

<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>

実行結果

ユーザーによって選択された値は、<select>タグのname属性と<option>タグのvalue属性がセットで送信されます。

上記のコードの場合、ユーザーは

number=1 or 2 or 3 or 4 or 5

という情報を選択して送信することが可能です。

 

selected属性で初期値を選択する方法

Webページを読み込んだ際に、下記例のように<select>タグで作成された選択式メニューの一番上の<option>タグの値が選択されている状態となります。

例:<select>タグで初期の一番上の「1」と「あ」が選択された状態

そして、selected属性を使用することによって、初期の選択値を自由に設定することが可能です。

selected属性は初期選択値にしたい<option>タグに設定します。

下記の例では3を初期の選択値として設定しています。

例:<selected>タグで初期値として「3」が選択された状態

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>

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

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" selecteed>E</option>
</select>

実行結果

上画像の状態で、送信ボタンをクリックすると、
<select>タグのname属性と<option>タグのvalue属性がセットとなり、下記の情報を送信することが可能です。

number = 3
kana = い
alpha = E

今回は、選択式メニューを設置するための<select>タグと選択値を設定するための<option>タグ、初期値設定のためのselected属性について解説しました。

 

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー
会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。
ラジオとバナナが好き。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。