HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML入門】option要素のselected属性で初期選択を設定する方法

<option>要素のselected属性を付けると、ページが読み込まれた時点でその選択肢があらかじめ選択された状態になります。これにより、ドロップダウンリストの初期表示でも、指定したオプションが選択済みとして表示されます。

構文

<option selected>

selected属性は値を持たないブール属性のため、「selected」と記述するだけで機能します。なお、複数の<option>にselected属性を指定した場合は、最初に現れたものだけが有効になる点に注意しましょう。

実装例

それでは、<option>要素のselected属性を実際に実装した例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>学歴</h1>
<h2>大学院(修士課程)</h2>
<select>
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech" selected>M.TECH</option>
    <option value="msc">M.Sc</option>
</select>
</body>
</html>

出力結果

【HTML入門】option要素のselected属性で初期選択を設定する方法

コードの解説

上記の例では、ドロップダウンリストを作成するために<select>要素を使用しています。

<select>
<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech" selected>M.TECH</option>
<option value="msc">M.Sc</option>
</select>

<select>要素の中には、<option>要素を使って複数の選択肢(MCA、M.COM、M.TECH、M.Sc)が設定されています。

さらに、次のようにselected属性を指定することで、ページ読み込み時に初期表示される既定の選択肢を「M.TECH」に設定しています。

<option value="mtech" selected>M.TECH</option>

このように、selected属性を活用すれば、ユーザーが最も選ぶ可能性の高い項目や、よく使われる標準的な値をあらかじめ選択済みにしておくことができます。フォームの入力負担を軽減し、ユーザビリティを向上させるためにも、ぜひ活用してみてください。

  1. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目

  2. HTMLのopen属性とは？details要素の使い方とサンプルコード解説

    HTMLのopen属性は、details要素の内容をHTMLドキュメント上で最初から表示状態（開いた状態）にするためのブール属性です。この属性を指定すると、ユーザーがsummary要素をクリックしなくても、ページ読み込み時にdetails要素内のコンテンツが展開された状態で表示されます。 構文 open属性の基本的な構文は以下のとおりです。 <details open></details> open属性はブール属性のため、値を指定せずに属性名だけで記述できます。属性を省略した場合、details要素は初期状態で閉じられ、ユーザーがsummary要素をクリックしたときに初