selected属性(セレクテッドアトリビュート)とは | 意味や読み方など丁寧でわかりやすい用語解説

「selected属性」は、HTMLの<option>要素に指定されるブール属性である。この属性の主な役割は、<select>要素で構成されるドロップダウンリストや選択リストにおいて、ページが読み込まれた際に特定の選択肢を初期状態で選択済みにすることにある。ユーザーが明示的に選択を変更しない限り、selected属性が設定されたオプションがデフォルトの選択肢として表示され、フォームが送信される際にその値がサーバーに送られる。ウェブフォームにおけるユーザー体験の向上や、動的なコンテンツ生成において重要な役割を果たす。例えば、ユーザーの前回選択を記憶してフォームに反映させる場合や、特定の項目を初期値として推奨したい場合に利用される。

selected属性は、<option>要素に単独で記述される。具体的な構文は<option value="値" selected>表示テキスト</option>のように、属性値を持たないブール属性として扱われる。HTML5からは値の指定は不要であり、属性名が存在するだけで有効となる。この属性が記述された<option>要素は、ブラウザがページをレンダリングする際に、その<select>要素内の他のオプションよりも優先して初期の選択状態となる。

この属性の機能は、主にフォームの初期状態を制御することにある。例えば、ユーザーが登録フォームで居住国を選択する際、日本に住むユーザーには「日本」が最初から選択されている状態を提供するといった場合に利用できる。これは、ユーザーが毎回手動で選択する手間を省き、入力の効率性を高めることに寄与する。特に、データベースから取得した既存のデータを編集するフォームでは、ユーザーが以前入力した内容を反映させるためにselected属性が頻繁に用いられる。

フォームが送信される際、ユーザーが明示的に他のオプションを選択しなかった場合、selected属性が設定されていた<option>要素のvalue属性に指定された値が、その<select>要素の名前（name属性の値）とペアになってフォームデータとしてサーバーに送信される。もしvalue属性が指定されていない場合は、<option>要素の表示テキストが値として送信される。

JavaScriptを用いて、このselected属性の状態を動的に変更することも可能である。例えば、ユーザーの入力に応じてドロップダウンリストの選択肢を切り替えたり、特定の条件に基づいて初期選択を変更したりする場面で利用される。JavaScriptでは、DOM（Document Object Model）を介して<option>要素のselectedプロパティを直接操作するのが一般的である。例えば、document.getElementById("myOption").selected = true; と記述することで、指定したIDを持つオプションを選択済みの状態にできる。同様に、falseを設定することで選択状態を解除できる。

ここで重要な注意点として、HTMLのソースコードに記述されたselected属性は、あくまでページが読み込まれた際の初期状態を定義するものであり、JavaScriptで選択状態を変更してもHTMLソース上のselected属性が自動的に追加されたり削除されたりするわけではない。JavaScriptで取得できるoption.selectedプロパティは、現在の実行時における選択状態を示しており、これはユーザーの操作やJavaScriptによる変更によって動的に変化する。HTMLソース上のselected属性の状態をプログラム的に変更したい場合は、setAttribute('selected', 'selected')やremoveAttribute('selected')を用いる必要があるが、通常はoption.selectedプロパティを直接操作する方が簡潔で推奨される。

一つの<select>要素内で複数の<option>要素にselected属性を指定した場合の挙動は、ブラウザによって異なる可能性があるため、避けるべきである。一般的には、HTMLの記述順で最も後に出てくる<option>要素が最終的に選択された状態となることが多いが、これは標準で厳密に定義された挙動ではない。予測可能な動作を保証するためには、一つの<select>要素内では、multiple属性が指定されていない限り、selected属性は一つだけ設定するようにすべきである。multiple属性が<select>要素に指定されている場合は、複数の<option>要素を選択できるため、複数のselected属性を記述することで初期状態で複数の項目を選択状態にすることが可能となる。

アクセシビリティの観点からも、selected属性の利用は重要である。スクリーンリーダーなどの支援技術を利用するユーザーにとって、フォームの初期状態が明確であることは、内容の理解と操作のしやすさに直結する。適切な初期値が設定されていれば、ユーザーは選択肢を探す手間を省き、より効率的にフォームを操作できる。

実用例としては、ウェブサイトの言語設定ドロップダウンで、ユーザーのブラウザ設定に応じた言語オプションをselected属性で初期選択させたり、オンラインショッピングサイトで配送先住所の都道府県選択リストに、ユーザーが前回選択した都道府県を初期値として設定したりする場面が挙げられる。これにより、ユーザーは何度も同じ情報を入力する手間が省け、ウェブアプリケーションの使いやすさが向上する。selected属性は、単なる見た目の初期値設定に留まらず、ウェブアプリケーションの動的な挙動やユーザー体験を設計する上で基礎となる重要なHTML属性の一つである。