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

HTMLフォームでドロップダウンリスト（セレクトボックス）を作成する方法【初心者向け解説】

HTMLでは、フォーム内にシンプルなドロップダウンリスト（セレクトボックス）を作成し、ユーザーからの入力を受け取ることができます。セレクトボックスは「ドロップダウンボックス」とも呼ばれ、複数の選択肢をリスト形式で表示し、ユーザーがその中から1つ（または複数）の項目を選択できるようにするUI要素です。

HTMLでドロップダウンリストを作成するには、<select>タグを使用します。実際の選択肢となる項目は、<option>タグで定義します。

<select>タグの主な属性

No.属性と説明
1name
コントロールに名前を付けます。この名前はサーバーに送信され、値を識別するために使用されます。
2size
スクロール可能なリストボックスとして表示したい場合に指定します。
3multiple
「multiple」を設定すると、ユーザーがメニューから複数の項目を選択できるようになります。

<option>タグの主な属性

No.属性と説明
1value
その選択肢が選ばれた際に送信される値を指定します。
2selected
ページ読み込み時に、その項目が初期状態で選択されていることを示します。
3label
選択肢にラベルを付けるための代替手段です。

実装例

以下のコードを実行すると、HTMLフォーム内に科目を選択するためのシンプルなドロップダウンリストが表示されます。

<!DOCTYPE html>
<html>
    <head>
        <title>Select Box Control</title>
    </head>
    <body>
        <p>以下は科目の一覧です。1つ選択してください：</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>

この例では、<select>タグにname="dropdown"を指定してフォームデータとして識別できるようにし、最初の選択肢「Computer Architecture」にはselected属性を付けて、ページ表示時に初期選択されるようにしています。

  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()メソッドを使用しま