解決済み: html のドロップダウン

HTML のドロップダウンに関連する主な問題は、障害のある人がドロップダウンにアクセスできるようにするのが難しい場合があることです。 ドロップダウンは多くの場合、JavaScript を使用してコーディングされているため、スクリーン リーダーやその他の支援技術が解釈するのが難しい場合があります。 さらに、ドロップダウンが適切にラベル付けまたは説明されていない場合、ユーザーはドロップダウンの用途や操作方法を理解できない可能性があります。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

1. – このコード行は、ドロップダウン メニューを作成します。 2.ボルボ– このコード行は、値が「volvo」のドロップダウン メニューにオプションを作成します。 3.サーブ– このコード行は、値が「saab」のドロップダウン メニューにオプションを作成します。 4.メルセデス– このコード行は、値が「mercedes」のドロップダウン メニューにオプションを作成します。 5.アウディ– このコード行は、値が「audi」のドロップダウン メニューにオプションを作成します。 6. – このコード行はドロップダウン メニューを閉じ、すべてのオプションが追加されたことを示します。

ドロップダウンリストとは

HTML のドロップダウン リストは、ユーザーが事前定義されたオプションのリストから XNUMX つのオプションを選択できるようにする入力要素の一種です。 ユーザーが入力フィールドの横にあるドロップダウン矢印をクリックすると、リストが表示されます。 選択したオプションが入力フィールドに表示されます。 ドロップダウン リストは、リストから国や州を選択するなど、複数のオプションから選択する必要がある場合によく使用されます。

ドロップダウン メニューの作成方法

HTML でドロップダウン メニューを作成するのは比較的簡単です。 作成する手順は次のとおりです。

1. 作成することから始めます この要素には、ドロップダウン メニューのすべてのオプションが含まれます。 2. 内部 要素、追加 メニューの各アイテムの要素。 フォームの送信時にどのオプションが選択されているかを判断するために使用されるため、各オプションには必ず value 属性を含めてください。

3. オプションの XNUMX つをデフォルトで選択するには、selected 属性をそのオプションのタグに追加します。 これにより、ページがロードされたときに選択されたように表示されます。

4. 最後に、ドロップダウン メニューのラベルを追加します。 select 要素の ID 値を指す "for" 属性が関連付けられたタグ (これは、手順 1 で設定したものと一致する必要があります)。