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

HTMLのselected属性とは？使い方とサンプルコードを解説

HTMLのselected属性は、Webページが読み込まれた時点で、ドロップダウンリスト内の特定の選択肢（option）をあらかじめ選択済みの状態にしておくための属性です。フォームでデフォルト値を設定したい場合に非常に便利です。

構文

selected属性の基本的な構文は以下のとおりです。

<option selected></option>

selected属性はブール型の属性のため、値を指定せずに記述できます。実際にどのように動作するのか、具体例を見ていきましょう。

サンプルコード

次の例では、「好きな科目を選んでください」という選択リストの中で、「生物」が初期状態から選択されるように設定しています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML selected デモ</h1>
<p>好きな科目を選んでください：</p>
<select>
<option value="Physics">物理</option>
<option value="Chemistry">化学</option>
<option value="Biology" selected>生物</option>
</select>
</body>
</html>

実行結果

上記のコードを実行すると、選択リストが表示され、「生物」が最初から選択された状態になっていることが確認できます。これは、該当するoption要素にselected属性が付与されているためです。

HTMLのselected属性とは？使い方とサンプルコードを解説

ポイントまとめ

  • selected属性は、<select>要素内の<option>要素にのみ使用できます。
  • 複数のoptionにselectedを付けた場合、多くのブラウザでは最後のものが優先されます（multiple属性がある場合は複数選択されます）。
  • ユーザーが別の項目を選択すれば、初期選択は上書きされます。
  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以