select,option

機能

select 要素は、ユーザーがドロップダウンリストから選択肢を選ぶためのインターフェースを提供します。 option 要素は、select 要素内で使用され、選択肢を定義します。

よく設定する属性（attribute）と値

select 要素の属性

name:

フォームデータとして送信される名前を指定します。
例: name=“mySelect”

multiple:

複数の選択肢を選べるようにします。
例: multiple

size:

表示される選択肢の数を指定します。
例: size=“4”

option 要素の属性

value:

選択肢の値を指定します。
例: value=“option1”

selected:

デフォルトで選択される選択肢を指定します。
例: selected

disabled:

選択できないようにする選択肢を指定します。
例: disabled

使い方

例１

この例では、 ユーザーが好きな果物を選ぶことができます。

<form action="/submit-form" method="post">
  <label for="fruits">好きな果物を選んでください:</label>
  <select id="fruits" name="fruits">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
  <input type="submit" value="送信" />
</form>
コピー

例２

この例では、multiple 属性を使用して複数の選択肢を選べるようにし、size 属性を使用して表示される選択肢の数を指定しています。また、selected 属性を使用してデフォルトで選択される選択肢を指定し、disabled 属性を使用して選択できない選択肢を設定しています。

<form action="/submit-form" method="post">
  <label for="colors">好きな色を選んでください:</label>
  <select id="colors" name="colors" multiple size="4">
    <option value="red">赤</option>
    <option value="green" selected>緑</option>
    <option value="blue">青</option>
    <option value="yellow" disabled>黄色</option>
  </select>
  <input type="submit" value="送信" />
</form>
コピー