はじめに
HTML の<option>タグは、HTML フォームのドロップダウンリストのオプションを定義するために使用されます。このタグは<select>タグおよび<datalist>や<optgroup>などのそのバリアントに付属します。このタグは、ユーザーが選択肢のリストから選択するのを支援します。この実験では、<option>タグを使用して HTML のドロップダウンリストを実装する手順を案内します。
注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。
好きなエディタでindex.htmlという名前の HTML ファイルを作成します。
まずは基本的な HTML フォームを作成しましょう。
<form></form>
要素を作成してオプションを追加する
<form>要素の中に、ドロップダウンリストを作成する<select>要素を追加します。
<form>
<select>
<option value="option1">オプション 1</option>
<option value="option2">オプション 2</option>
<option value="option3">オプション 3</option>
</select>
</form>
ここでは、<select>タグの中に 3 つの<option>タグを追加し、value属性を"option1"、"option2"、"option3"に設定しました。
プロンプトを追加する
プロンプトテキストを追加しましょう。<select>タグの中に、次のコードを追加します。
<select>
<option value="" disabled selected>オプションを選択してください</option>
<option value="option1">オプション 1</option>
<option value="option2">オプション 2</option>
<option value="option3">オプション 3</option>
</select>
ここでは、次の属性を持つ新しい<option>タグを追加しました。
value="" は、値を空文字列に設定します。
disabled は、オプションの選択を無効にします。
selected は、ドロップダウンリストの既定の選択肢を示すために使用されます。
<option>タグの中のテキストは、プロンプトとして機能します。
送信ボタンを追加する
フォームを送信するために送信ボタンが必要です。<select>タグの後に次のコードを追加します。
<form>
<select>
<option value="" disabled selected>オプションを選択してください</option>
<option value="option1">オプション 1</option>
<option value="option2">オプション 2</option>
<option value="option3">オプション 3</option>
</select>
<br /><br />
<input type="submit" value="送信" />
</form>
ファイルを保存し、ウェブブラウザで実行して、ドロップダウンリストが機能するのを確認しましょう。
まとめ
この実験では、HTML の<option>タグを使ってドロップダウンリストを作成する方法を学びました。まず HTML フォームを作成し、その後<select>要素を追加し、その中に値属性を持つオプションを追加し、プロンプトテキストも追加しました。最後に、フォームを送信するための送信ボタンを追加しました。<option>タグは、動的な HTML フォームを作成する際に重要な役割を果たします。
