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

HTMLで選択可能なリストを作成する方法｜selectタグの使い方と属性一覧

HTMLで選択可能なリスト（ドロップダウンリスト）を作成するには、<select>タグを使用します。<select>タグは、フォーム内でセレクトボックスを定義するための要素であり、ユーザーに複数の選択肢からひとつ（または複数）を選ばせたい場合に活用されます。

selectタグで使える主な属性

<select>タグは、以下の属性をサポートしています。用途に応じて組み合わせて使用しましょう。

属性値説明
autofocusautofocusページが読み込まれたときに、ドロップダウンリストへ自動的にフォーカスを当てます。
disableddisabled入力コントロールを無効化します。ユーザーによる変更を受け付けなくなり、フォーカスも受け取らず、Tabキーでの移動時にもスキップされます。
formform_id関連付けるフォームを1つ以上指定します。
multiplemultiple設定すると、一度に複数の項目を選択できるようになります。
name名前入力コントロールに名前を割り当てます。送信時にはこの名前と値のペアがサーバーへ渡されます。
requiredrequiredフォーム送信前に値の選択を必須とします。未選択のままでは送信できません。
size数値ドロップダウンリストに表示される項目数を定義します。

サンプルコード

以下のコードを実行すると、HTMLで選択可能なリストを作成できます。「selected」属性を付けた項目が初期状態で選択された状態になります。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML select Tag</title>
    </head>
    <body>
        <form action = "/cgi-bin/dropdown.cgi" method = "post">
            <select name = "dropdown">
                <option value = "Data Structures" selected>Data Structures</option>
                <option value = "Data Mining">Data Mining</option>
            </select>
            <input type = "submit" value = "Submit" />
        </form>
    </body>
</html>

コードのポイント

  • <select>タグ：選択リスト全体を定義します。name属性でコントロール名を指定します。
  • <option>タグ：リストの各選択肢を定義します。value属性には送信される値を記述します。
  • selected属性：初期表示時に選択済みにしたい項目に付与します。
  • submitボタン：フォームの内容をaction属性で指定したURLへPOST送信します。

このように<select>タグと<option>タグを組み合わせることで、簡単にプルダウンメニューを実装できます。複数選択を許可したい場合は「multiple」属性、入力必須にしたい場合は「required」属性を追加すると、より実用的なフォームになります。

  1. HTML DOM Olオブジェクトとは？プロパティと使い方を徹底解説

    HTML DOMのOlオブジェクトは、HTMLにおける<ol>（順序付きリスト）要素を表します。JavaScriptを使えば、順序付きリストの開始番号や番号の種類などを動的に操作できます。 Ol要素の作成方法 JavaScriptで<ol>要素を新しく作成するには、document.createElement()メソッドを使用します。 var olObject = document.createElement(OL) ここで作成した「olObject」は、以下のプロパティを持っています。 プロパティ説明 reversedリストの順序を降順にするか、昇順（デフォル

  2. Excelでドロップダウンリストを作成する方法【基本から応用まで徹底解説】

    Excelでドロップダウンリスト（プルダウンメニュー）を活用すると、スプレッドシートへのデータ入力にかかる時間を大幅に短縮できます。入力ミスの防止にも役立つため、業務効率化の定番テクニックとして広く使われています。 ドロップダウンリストの作成方法は、シンプルなものから高度なものまでいくつかあります。この記事では、すべての作成方法をわかりやすく解説します。 Excelでドロップダウンリストを作成する：簡単な方法 最も手軽なのは、リスト項目を直接手入力する方法です。1つのセルだけにドロップダウンリストが必要で、頻繁に内容を更新しない場合に適しています。 例えば、他の人にファイルを送って特定のフィー