HTMLのoptionタグとは？初期値・selectedが効かない原因・value取得まで解説

この記事ではHTMLのoptionタグを使う方法について解説します！

optionタグは、お問い合わせフォームや申込みフォームなどで使う「選択肢」を作るためのタグです。selectタグと一緒に使うことが多いため、「selectタグとoptionタグは何が違うの？」「value属性には何を書けばいいの？」と迷う初心者の方も多いのではないでしょうか。

今回の記事では、

について解説していきます。

HTMLのoptionタグとは

optionタグは、selectタグの中でユーザーが選べる項目を1つずつ作るためのHTMLタグです。フォームでドロップダウンリストを作るとき、selectタグの中にoptionタグを並べて選択肢を用意します。

たとえば、学習したい言語を選ぶフォームは以下のように書きます。

<select name="language">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

この例では、HTML、CSS、JavaScriptの3つが選択肢として表示されます。ユーザーが選んだoptionのvalue属性が、フォーム送信時の値として扱われます。

selectタグが選択欄全体を作るタグで、optionタグはその中に入る選択肢を作るタグだと覚えるとわかりやすいです。

optionタグは基本的にselectタグの中で使います。optionタグだけを単独で書いても、ドロップダウンの選択肢としては機能しません。

HTMLのoptionタグを使用する目的・使い方

optionタグを使用する目的は、フォームの選択肢をわかりやすく用意し、選ばれた値を正しく送信できるようにすることです。

optionタグを使用する目的は大きく2つです。

ユーザーが選ぶ候補を作る

optionタグは、ユーザーに選んでもらう候補を作るために使用します。都道府県、職種、学習コース、問い合わせ種別など、決まった候補の中から選んでもらいたい場面で便利です。

<label for="course">学習したいコース</label>
<select id="course" name="course">
  <option value="html">HTMLコース</option>
  <option value="css">CSSコース</option>
  <option value="javascript">JavaScriptコース</option>
</select>

このように選択肢を用意しておくことで、ユーザーが自由入力で迷うことを減らせます。

フォーム送信時に扱う値を指定する

optionタグでは、画面に表示する文字と、システム側で扱う値を分けて指定できます。そのときに使うのがvalue属性です。

<select name="plan">
  <option value="basic">ベーシックプラン</option>
  <option value="standard">スタンダードプラン</option>
  <option value="premium">プレミアムプラン</option>
</select>

たとえば、ユーザーが「スタンダードプラン」を選んだ場合、送信される値はstandardになります。

optionタグでは、ユーザーに見せる文字とフォームで送信する値をvalue属性で分けられます。

初期値を設定・変更する方法（空白にする方法含む）

HTML optionの初期値を指定したい場合は、最初に選ばせたいoptionタグへselected属性を付けます。

<select name="level">
  <option value="beginner" selected>初心者</option>
  <option value="intermediate">中級者</option>
  <option value="advanced">上級者</option>
</select>

この例では、ページを開いた時点で「初心者」が選ばれた状態になります。

実務では、最初の選択肢として「選択してください」を表示し、まだ選ばれていない状態を作ることもよくあります。

<select name="prefecture" required>
  <option value="" selected>選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
  <option value="fukuoka">福岡県</option>
</select>

value=””にしておくことで、ユーザーがまだ選択していない状態を判定しやすくなります。

optionタグで空白の初期値を作りたい場合は、value=”” のoptionを先頭に置くのが基本です。

JavaScriptであとから初期値を変更したい場合は、selectタグのvalueを書き換えます。

<select id="course" name="course">
  <option value="">選択してください</option>
  <option value="html">HTMLコース</option>
  <option value="css">CSSコース</option>
</select>

const select = document.getElementById("course");
select.value = "css"; // CSSコースを選択状態にする
select.value = "";    // 空白の初期状態に戻す

このように、HTMLではselected属性、JavaScriptではselect要素のvalueを使うと、初期値や選択状態を変更できます。

初期表示用のoptionに実際の値を入れてしまうと、未選択なのに値が送信される原因になります。

optionタグでよく使う属性

optionタグは短いタグですが、属性を使うことで初期選択や選択不可の状態を指定できます。ここでは、初心者がまず押さえておきたい属性を紹介します。

属性	役割
value	フォーム送信時に送られる値を指定する
selected	最初から選ばれている項目を指定する
disabled	選択できない項目にする
label	表示用の短いラベルを指定する

value属性

value属性は、フォーム送信時に実際に送られる値です。

<option value="web_design">Webデザイン</option>

表示される文字は「Webデザイン」ですが、フォーム送信時の値はweb_designになります。

実務では、value属性に日本語をそのまま入れるより、英数字の短い値を使うことが多いです。データベースやプログラム側で扱いやすく、あとから表示文言を変えても値を変えずに済むためです。たとえば、画面には「Webデザイン」と表示したい場合でも、value属性はweb_designのように管理すると、問い合わせデータの集計やJavaScriptでの条件分岐が安定します。

<option value="web_design">Webデザイン</option>
<option value="frontend">フロントエンド開発</option>

DB連携時の文字化けを防ぎ、管理を共通化するため、実務ではvalueに英数字を使うのが基本です。

表示名はユーザーに伝わる言葉、value属性はシステムで扱いやすい固定値として分けるのが実務では扱いやすいです。

selected属性

selected属性を付けると、ページを開いた時点でその選択肢が選ばれた状態になります。

<select name="level">
  <option value="beginner" selected>初心者</option>
  <option value="intermediate">中級者</option>
  <option value="advanced">上級者</option>
</select>

この例では、最初から「初心者」が選ばれています。

disabled属性

disabled属性を付けると、そのoptionを選べない状態にできます。

<select name="course">
  <option value="" disabled selected>コースを選択してください</option>
  <option value="html">HTMLコース</option>
  <option value="css">CSSコース</option>
</select>

このように、最初の案内文を表示しつつ、実際には選択肢として扱わせたくない場合に便利です。

「選択してください」のような案内文には、value=””、selected、disabledを組み合わせる書き方がよく使われます。

optionタグの selected 属性が効かないときのチェックポイント

HTML option selectedが効かないと感じる場合、selected属性そのものが使えないのではなく、記述ミスやJavaScript側の制御によって選択状態が上書きされていることが多いです。

selected属性は、ページを最初に表示したときの選択状態を指定するための属性です。ページ表示後に選択状態を変えたい場合は、JavaScriptでselectタグのvalueを変更します。

value属性の値が間違っていないか確認する

JavaScriptで初期値を指定している場合、select.valueに入れる値とoptionタグのvalue属性が一致していないと選択されません。

<select id="course">
  <option value="html">HTMLコース</option>
  <option value="css">CSSコース</option>
</select>

document.getElementById("course").value = "CSS";

この例では、optionのvalueはcssですが、JavaScriptではCSSと大文字で指定しています。value属性は文字列として比較されるため、完全に一致していないと反映されません。

document.getElementById("course").value = "css";

selected属性を複数付けていないか確認する

通常のselectタグでは、基本的に1つの選択肢だけが選ばれます。そのため、複数のoptionタグにselected属性を付けると、意図しない選択状態になることがあります。

<select name="level">
  <option value="beginner" selected>初心者</option>
  <option value="advanced" selected>上級者</option>
</select>

複数選択ではないselectタグでは、selected属性を付けるoptionは1つにしましょう。

JavaScriptで選択状態が上書きされていないか確認する

HTMLでselected属性を書いていても、ページ読み込み後にJavaScriptがselect.valueを変更していると、JavaScript側の指定が優先されます。

<select id="plan" name="plan">
  <option value="basic" selected>ベーシック</option>
  <option value="premium">プレミアム</option>
</select>

document.getElementById("plan").value = "premium";

この場合、HTML上ではbasicにselectedが付いていますが、JavaScriptでpremiumに変更しているため、画面上ではプレミアムが選ばれます。

実務では、フォームの初期値をHTMLで管理するのか、JavaScriptで管理するのかを決めておくとトラブルを減らせます。

optionを追加する前にvalueを指定していないか確認する

JavaScriptでoptionタグをあとから追加する場合、選択肢が存在する前にselect.valueを指定しても、うまく反映されないことがあります。

const select = document.getElementById("course");
select.value = "css";

select.innerHTML = '<option value="html">HTML</option><option value="css">CSS</option>';

const select = document.getElementById("course");
select.innerHTML = '<option value="html">HTML</option><option value="css">CSS</option>';
select.value = "css";

選択肢を追加したあとにvalueを指定すると、意図したoptionを選択状態にできます。

実務で迷う！optionタグのselectedが「キャッシュ」のせいで効かない時の解決策

HTMLもJavaScriptも合っているのに、ブラウザをリロードしてもselected属性が効かないように見えることがあります。これは、selected属性の不具合ではなく、ブラウザが以前のフォーム入力状態を復元していることが原因の場合があります。

たとえば、以下のようにHTMLでは「選択してください」を初期表示にしているのに、リロード後も前回選んだ「CSSコース」が表示されることがあります。

<form autocomplete="off">
  <label for="course">学習コース</label>
  <select id="course" name="course" autocomplete="off">
    <option value="" selected>選択してください</option>
    <option value="html">HTMLコース</option>
    <option value="css">CSSコース</option>
  </select>
</form>

ブラウザの自動補完や入力状態の復元が原因の場合は、formタグやselectタグにautocomplete=”off”を付けると改善することがあります。

ただし、ブラウザや入力内容によってはautocomplete=”off”だけで完全に制御できない場合もあります。その場合は、ページ表示時にJavaScriptで明示的に初期値へ戻します。

window.addEventListener("pageshow", function () {
  document.getElementById("course").value = "";
});

pageshowイベントを使うと、通常の読み込みだけでなく、ブラウザの戻るボタンでページが復元された場合にも処理を実行しやすくなります。

「HTMLを直したのに表示が変わらない」ときは、コードミスだけでなく、ブラウザの入力復元・キャッシュ・WordPressのキャッシュプラグインも確認しましょう。

WordPressの制作現場では、HTMLの修正自体は反映されているのに、キャッシュプラグインやブラウザキャッシュの影響で古いフォーム表示が残って見えることがあります。この場合は、以下を順番に確認します。

また、ReactやVueなどのフレームワークを使っている場合は、optionタグ側のselected属性ではなく、selectタグ側の状態管理が優先されることがあります。

<select value={course} onChange={(e) => setCourse(e.target.value)}>
  <option value="">選択してください</option>
  <option value="html">HTMLコース</option>
  <option value="css">CSSコース</option>
</select>

Reactでは、optionタグへselectedを直接書くよりも、selectタグのvalueで選択状態を管理するのが一般的です。Vueでもv-modelで選択値を管理することが多いため、通常のHTMLと同じ感覚でselected属性だけを見ていると原因に気づきにくいことがあります。

より詳しく確認したい場合は、以下の公式ドキュメントも参考になります。

• MDN Web Docs autocomplete属性
• MDN Web Docs pageshowイベント
• React公式ドキュメント select

実務では「HTMLのselected属性」「ブラウザの入力復元」「JavaScriptやフレームワークの状態管理」のどれが選択状態を決めているのかを切り分けることが重要です。

optionタグを使う時の注意点

optionタグはフォームの中でも小さなタグですが、書き方を間違えると、ユーザーが選んだ内容を正しく受け取れない原因になります。

特にvalue属性、初期表示、表示名と送信値のズレには注意が必要です。

optionタグをselectタグの外に書かない

optionタグは、基本的にselectタグの中で使います。

<option value="html">HTML</option>
<option value="css">CSS</option>

このようにoptionタグだけを書いても、選択欄として正しく機能しません。

<select name="language">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

selectタグで囲むことで、ドロップダウンリストとして使えるようになります。

表示名とvalueのズレに注意する

optionタグでは、画面に表示する文字とvalue属性の値が異なる場合があります。ここがズレると、ユーザーが選んだ内容と送信データが一致しなくなります。

<option value="basic">プレミアムプラン</option>

この例では、表示は「プレミアムプラン」なのに、送信される値はbasicになってしまいます。

<option value="premium">プレミアムプラン</option>

表示名とvalue属性の内容が対応しているか、公開前に確認しましょう。

【応用】JavaScriptで選択されたoptionのvalueを取得する方法

フォームを作っていると、ユーザーが選んだoptionのvalueをJavaScriptで取得したい場面があります。たとえば、選んだコースによって説明文を変える、料金を表示する、送信前に入力内容を確認する、といった場合です。

JavaScriptで選択されたoptionのvalueを取得するには、select要素のvalueプロパティを使います。

select.valueで選択中の値を取得する

以下は、選択されたoptionのvalueを取得する基本例です。

<label for="course">学習コース</label>
<select id="course" name="course">
  <option value="">選択してください</option>
  <option value="html">HTMLコース</option>
  <option value="css">CSSコース</option>
  <option value="javascript">JavaScriptコース</option>
</select>

const select = document.getElementById("course");
const selectedValue = select.value;

console.log(selectedValue);

たとえば、ユーザーが「CSSコース」を選んでいる場合、selectedValueにはcssが入ります。

選択が変わったタイミングでvalueを取得する

ユーザーが選択肢を変更したタイミングでvalueを取得したい場合は、changeイベントを使います。

const select = document.getElementById("course");

select.addEventListener("change", function () {
  console.log(select.value);
});

このコードでは、ユーザーが選択肢を変えるたびに、現在選ばれているoptionのvalueがコンソールに表示されます。

選択されたoptionの表示テキストを取得する

valueではなく、画面に表示されている文字を取得したい場合は、selectedIndexとoptionsを使います。

const select = document.getElementById("course");
const selectedText = select.options[select.selectedIndex].textContent;

console.log(selectedText);

CSSコースが選ばれている場合、selectedTextには「CSSコース」という表示テキストが入ります。

複数選択のvalueを取得する

multiple属性を付けたselectタグでは、複数のoptionが選ばれることがあります。その場合はselectedOptionsを使います。

<select id="skills" name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

const select = document.getElementById("skills");
const values = Array.from(select.selectedOptions).map(function (option) {
  return option.value;
});

console.log(values);

複数選択の場合、select.valueだけでは最初に選ばれている値しか扱えないことがあります。複数の値を取得したい場合はselectedOptionsを使いましょう。

まとめ

optionタグは、selectタグの中で選択肢を1つずつ作るためのHTMLタグです。ドロップダウンリストを作るときに使われ、ユーザーが選んだ項目をフォーム送信できるようにします。

optionタグでは、表示名だけでなくvalue属性の値も重要です。ユーザーに見せる文字と、システムで扱う値がズレないように注意しましょう。

また、selected属性で初期選択を指定したり、disabled属性で選択できない項目を作ったりできます。「選択してください」のような初期表示を作る場合は、value=””を使って未選択状態を扱いやすくするのがポイントです。selected属性が効かない場合は、valueの記述ミスやJavaScriptによる上書きも確認しましょう。

JavaScriptで選択中の値を取得したい場合は、select要素のvalueプロパティを使います。フォームの入力内容に応じて表示を変えたい場合や、送信前に値を確認したい場合に便利です。

optionタグは小さなタグですが、フォームの入力品質を左右する重要な要素です。正しく使い方を理解して、ユーザーが迷わず入力できるフォームを作っていきましょう。