select option要素の使い方

selectとoptionはセットで使用し、フォームやアンケートなどホームページの部品を作る際に使います。formタグと一緒に使いサーバーへデータを送信する際に使用します。selectはあらかじめ設定した項目の選択に使用します。optionはselectの選択肢の設定に使用します。下記掲載のHTML使用例を確認するれば理解が早いでしょう。

section optionの説明

optionとセットで使用します。ドロップダウン型のセレクトボックスを作ります。selectedを入れた場合は選択された状態で表示されます。

属性

name

selectの名前です。サーバーへのデータ転送時やJavaScriptによる走査などの際に利用します。

size

optionの表示がサイズの縦幅を変更できます。デフォルトで0が適用されています。指定方法はsize=”5″のように書きます。５つ分表示された状態になります。

multiple

複数の項目が選択可能になります。shiftキーやコマンドキーを押しながらクリックすることができるようになります。これを指定していない場合は１つしか選択できません。

form

HTML5で追加されました。いままではformの子要素としてformタグないに書く必要がありましたが、form属性を指定することで、formタグの外でも使えるようになりました。

selectとoptionの使用例

  ボールパイソン 
  グリーンイグアナ
  キングコブラ



  ブルー 
  レッド
  グリーン

プレビュー

formについてのページのありますので、よくわからない方はご覧になってください。