ドロップダウン
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 43/60。
HTMLにおいて、ドロップダウンメニューは、ユーザーが要素をクリックしたり、要素の上にマウスを置いたりしたときに表示される項目のリストです。ドロップダウンは、選択肢のリストをコンパクトに表示するためによく使われます。ドロップダウンを作成するには、<select>タグと、個々の項目用の<option>タグを使用します。
HTMLでドロップダウンを作成するための基本的な構文は次のとおりです：
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: ドロップダウンメニューを定義するタグです。
name: ドロップダウンに名前を付ける属性で、フォームが送信されたときに選択された値を識別するために使用されます。
<option>: ドロップダウンリストの項目を定義するタグ。
value: オプションに関連付けられた値を指定する属性です。この値は、フォームが送信されるときにサーバーに送られます。
Option text: 各オプションのドロップダウンリストに表示される可視テキストです。
3つのオプションを持つドロップダウンを作成する方法の例を次に示します：
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>この例では、"colors" という名前のドロップダウンと、Red、Green、Blue という 3 つの選択肢があります。
チャレンジ
簡単ドロップダウンメニューを含むフォームがあるHTMLドキュメントを作成してください。フォームには以下の要素を含める必要があります。
- 名前が "fruits" のドロップダウン。
- ドロップダウンには、以下の値とテキストを持つ4つのオプションが必要です。
- 値: "apple"、テキスト: "Apple"
- 値: "banana"、テキスト: "Banana"
- 値: "orange"、テキスト: "Orange"
- 値: "grape"、テキスト: "Grape"
チートシート
HTMLでドロップダウンメニューを作成するには、<select>タグと、各項目のための<option>タグを使用します：
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: ドロップダウンメニューを定義しますname: フォームが送信される際にドロップダウンを識別します<option>: 各ドロップダウン項目を定義しますvalue: オプションが選択されたときにサーバーに送信される値です- オプションテキスト: ドロップダウンに表示される可視テキストです
色のオプションを持つドロップダウンの例：
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを記述してください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
