Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】option要素の使い方

option要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

optionオブジェクトは、HTMLのフォーム要素において、ユーザーが選択できる単一の項目を表すオブジェクトです。主に<select>要素の子要素として使用され、ドロップダウンリストや選択ボックス内で表示される選択肢を提供します。また、<optgroup>要素内で選択肢をグループ化したり、<datalist>要素内で入力候補を提示する際にも利用されます。

この要素のコンテンツは、ユーザーインターフェースに表示される選択肢のテキストとなります。例えば、「リンゴ」と表示される選択肢を作成する場合、<option>リンゴ</option>のように記述します。フォームが送信される際、選択されたoption要素のvalue属性に指定された値がサーバーに送られます。value属性が省略された場合は、要素のコンテンツ(テキスト)が値として送信されます。

初期状態で特定の選択肢が選ばれた状態にするには、ブール属性であるselected属性を使用します。また、disabled属性を付与することで、ユーザーがその選択肢を選べないように無効化することも可能です。label属性は、表示されるテキストと異なる短いラベルを定義したい場合に使用できますが、通常は要素の内容がそのまま表示テキストとして用いられます。

このように、optionオブジェクトは、Webフォームを通じてユーザーが多様な選択を行うための基本的なビルディングブロックとして機能します。

公式リファレンス: <option>: The HTML Option element

構文(syntax)

1<option value="value_for_server">Displayed Option Text</option>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ