HTML 入門

フォームを使ってみよう

選択リスト

select コントロールを使うと，多数のリストから1つを選ぶことができます．

index.html（抜粋）コピー
<form>
  <div>
    <select name="select1">
      <option value="1">オプション項目1</option>
      <option value="2">オプション項目2</option>
      <option value="3">オプション項目3</option>
      <option value="4">オプション項目4</option>
      <option value="5">オプション項目5</option>
    </select>
  </div>
  <div><button>送信</button></div>
</form>

多数のリストから複数個を選択できるようにするには multiple 属性を指定します．このとき，マウスのドラッグで範囲を選択できます．あるいは始点を選択した後，Shift キーを押しながら終点をクリックして範囲を選択します．さらに，Ctrl（Mac では ⌘）キーを押しながら個別に選択することもできます．ただし，このような複数項目の選択を問題なく利用できるユーザは決して多くないことも注意しなければなりません．

index.html（抜粋）コピー
<form>
  <div>
    <select name="select2" multiple size="5">
      <option value="1">オプション項目1</option>
      <option value="2">オプション項目2</option>
      <option value="3">オプション項目3</option>
      <option value="4">オプション項目4</option>
      <option value="5">オプション項目5</option>
    </select>
  </div>
  <div><button>送信</button></div>
</form>

目次に戻る