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

HTMLのドロップダウンリストに選択肢（オプション）を追加する方法

HTMLでドロップダウンリストに選択肢を追加するには、<option>タグを使用します。<option>タグはフォーム内で使われ、<select>要素と組み合わせることで、プルダウンメニューに表示される各項目を定義できます。

さらに、<option>タグは以下の属性もサポートしています。

属性値説明
Disableddisabled入力コントロールを無効化します。ユーザーによる変更を受け付けなくなり、フォーカスも受け取れず、Tabキーによる移動時にもスキップされます。
Labeltext<optgroup>を使用する場合に、その項目に表示するラベルを定義します。
Selectedselectedページが読み込まれたときに、デフォルトで選択状態になる項目を指定します。
Valuetextサーバーへ送信されるオプションの値を指定します。

使用例

以下のコードを実行すると、HTMLにおける<option>要素の実際の動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML optionタグの例</title>
   </head>
   <body>
      <form action = "/cgi-bin/dropdown.cgi" method = "post">
         <select name = "dropdown">
            <option value = "HTML" selected>HTML</option>
            <option value = "Ruby">Ruby</option>
         </select>
         <input type = "submit" value = "送信" />
      </form>
   </body>
</html>

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

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

  2. HTML DOM selectオブジェクトとは？使い方・プロパティ・メソッドを解説

    HTML DOM selectオブジェクトとはHTML DOMのselectオブジェクトは、HTMLドキュメント内の<select>要素（ドロップダウンリスト）を表すオブジェクトです。JavaScriptを使ってプルダウンメニューを動的に生成したり、選択肢の追加・削除などを行う際に利用されます。ここでは、selectオブジェクトの基本的な作成方法から、主なプロパティやメソッド、実際のサンプルコードまで詳しく解説していきます。selectオブジェクトの作成方法（構文）selectオブジェクトを作成するには、以下のようにdocument.createElement()メソッドを使用しま