HTML & CSS - プルダウンメニューを表示する

プルダウンメニューを表示する

プルダウンメニューを表示するには、select 要素option 要素で定義します。

クリックすると選択肢が表示されるメニューをプルダウンメニューと言います。select 要素はプルダウンメニュー全体を囲むタグです。option 要素はプルダウンメニューの選択項目になります。

<form action="#" method="post">

  <select name="sample">
      <option value="1">サンプル1</option>
      <option value="2">サンプル2</option>
      <option value="3">サンプル3</option>
  </select>
  
</form>
プルダウンメニューを表示する - HTML

select 要素は、以下の属性を持ちます。

name=""
プルダウンメニューの名前を文字列で指定します。name 属性の値は、option 要素の値とセットで送信されます。
size=""
メニューの表示行数を指定します。size 属性の値に 1 を指定するとプルダウン形式のメニューになり、2 以上を指定するとリスト形式のメニューになります。
multiple
multiple 属性が指定されるとメニューの中から複数を選択できるようになります。
disabled
disabled 属性が指定された項目は選択不可の状態になります。

option 要素は、以下の属性を持ちます。

value=""
value 属性の値は、メニュー項目の値を文字列で指定します。選択された値はサーバに送信されます。value 属性を省略した場合は、option 要素内のテキストが送信されることになります。
selected
selected 属性を指定した選択肢は、最初から選択された状態になります。select 要素に multiple 属性が指定されている場合は、複数の選択肢に selected 属性を指定することができます。
disabled
disabled 属性が指定された項目は選択不可の状態になります。

選択項目をグループ化したい場合は、optgroup 要素でまとめます。

<form action="#" method="post">

  <select name="sample">
    
    <optgroup label="sample1">
      <option value="1">サンプル1</option>
      <option value="2">サンプル2</option>
      <option value="3">サンプル3</option>
    </optgroup>
    
    <optgroup label="sample2">
      <option value="4">サンプル4</option>
      <option value="5">サンプル5</option>
      <option value="6">サンプル6</option>
    </optgroup>
    
  </select>
  
</form>
プルダウンメニューを表示する - HTML
label=""
optgroup 要素には label 属性が必須となります。label 属性の値は、グループのラベルとして表示されます。
disabled
disabled 属性が指定されたグループの項目は選択不可の状態になります。

関連記事