Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】select要素の使い方

select要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

selectオブジェクトは、HTMLの文書中でユーザーに選択肢のリストを提供するUIコンポーネントを表すオブジェクトです。これは、ドロップダウンリスト(プルダウンメニューとも呼ばれます)を作成する際に使用され、ユーザーが提示された複数の項目の中から一つ、または複数を選択できるようにします。

このオブジェクトは、通常、子要素として<option>要素を持ちます。それぞれの<option>要素は、リスト内の個別の選択肢を表します。また、関連する選択肢をグループ化したい場合には、<optgroup>要素を用いて選択肢を論理的にまとめることも可能です。

主な属性としては、フォーム送信時にこの選択リストの値を識別するためのname属性があります。size属性を使用すると、一度に表示される選択肢の数を指定でき、multiple属性を追加すると、ユーザーが複数の項目を同時に選択できるようになります。さらに、required属性を設定することで、フォーム送信前にユーザーに選択を必須にできますし、disabled属性で選択リストを無効にすることも可能です。

selectオブジェクトは、Webフォームにおいて、ユーザーからの多様な入力を効率的に収集するための重要な要素の一つとして機能します。

公式リファレンス: <select>: The HTML Select element

構文(syntax)

1<select name="exampleSelect" id="example-select">
2  <option value="option1">選択肢1</option>
3  <option value="option2">選択肢2</option>
4  <option value="option3">選択肢3</option>
5</select>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ