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

HTMLフォームのドロップダウンリストで初期値を選択済みにする方法

HTMLを使えば、フォーム上でユーザーの入力を受け取るためのシンプルなドロップダウンリストを簡単に作成できます。セレクトボックス(ドロップダウンボックスとも呼ばれます)は、複数の選択肢をドロップダウンリストの形式で一覧表示できる便利な要素です。

さらに、HTMLフォームのドロップダウンリストでは、あらかじめ特定の値を選択済みの状態(初期選択)にしておくことも可能です。方法はとても簡単で、初期選択したい項目の<option>タグにselected属性を追加するだけです。

HTMLフォームのドロップダウンリストで初期値を選択済みにする方法

サンプルコード

以下のコードを実行して、HTMLフォームのドロップダウンリストで値を事前選択する動作を実際に確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>Select Box Control</title>
   </head>
   <body>
      <p> Select any one:</p>
      <form>
         <select name = "dropdown">
            <option value = "Java" selected>Java</option>
            <option value = "Discrete Mathematics">Discrete Mathematics</option>
         </select>
      </form>
   </body>
</html>

動作のポイント

この例では、「Java」の<option>タグにselected属性が指定されているため、ページを開いた時点で「Java」が選択された状態で表示されます。ユーザーはそのままフォームを送信することもできますし、必要に応じて「離散数学」など別の選択肢へ変更することも可能です。

なお、selected属性を指定しない場合、ブラウザは通常リストの先頭の項目をデフォルトで表示します。特定の項目を意図的に初期選択したい場合に、この属性が役立ちます。

  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値