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

【HTML】ページ読み込み時に選択肢を初期選択する方法｜selected属性の使い方

selected属性で初期選択を指定する

HTMLでページが読み込まれた時点で特定の選択肢を選択済みの状態にしたい場合は、<select>要素内の該当する<option>要素にselected属性を指定します。

通常、ドロップダウンリストでは先頭の項目が自動的に選択されて表示されますが、selected属性を使うことで、任意の項目をデフォルト値として設定できます。selected属性は論理属性のため、値を書かずに「selected」と記述するだけで有効になります。

以下のコードを実行して、実際の動作を確認してみましょう。

コード例

<!DOCTYPE html>
<html>
   <head>
      <title>HTML selected attribute</title>
   </head>
   <body>
      <p>Here's the list of subjects. Select any one:</p>
      <form>
         <select name = "dropdown">
            <option value = "Computer Architecture" selected>Computer Architecture</option>
            <option value = "Java">Java</option>
            <option value = "Discrete Mathematics">Discrete Mathematics</option>
         </select>
      </form>
   </body>
</html>

実行結果のポイント

このコードをブラウザで開くと、科目を選ぶドロップダウンリストが表示され、「Computer Architecture」の項目があらかじめ選択された状態になっていることが確認できます。ユーザーはそのまま送信しても良いですし、他の項目に変更することも可能です。

注意点

multiple属性を指定しない単一選択型の<select>要素では、selected属性は基本的に1つの<option>にだけ付与してください。複数の項目へ同時に指定すると、ブラウザによってどの項目が採用されるかが不定になるため、意図しない動作を招く恐れがあります。

  1. HTMLの<title>要素の正しい使い方とSEO対策のポイント

    この記事では、HTMLの<title>要素の基本的な使い方から、SEOにおける重要性までをわかりやすく解説します。 HTMLの<title>要素は、ウェブサイトのページタイトルを表す要素です。 ページタイトルの確認方法 閲覧中のウェブサイトのページタイトルを確認したい場合は、ブラウザのタブにマウスカーソルを合わせて数秒間静止してみましょう。完全なページタイトルがポップアップ表示されます。 以下はYouTubeで実際に試した例です。 <title>要素の書き方 <title>要素を作成するには、開始タグと終了タグを使い、その間にタイトルとなるテキ

  2. HTMLのdatalistタグの使い方！入力候補リストを作成する方法

    datalistタグとは？HTMLの<datalist>タグは、<input>要素に対して選択肢（候補リスト）を定義するためのタグです。テキストフィールドにユーザーが入力を始めると、あらかじめ用意された候補がドロップダウン形式で表示されるため、入力の手間を減らし、入力ミスを防ぐことができます。<datalist>タグを使用する際のポイントは以下の2点です。・<input>要素側にlist属性を指定し、その値と<datalist>要素のid属性を一致させる・選択肢は<datalist>〜</datalist>の中