select要素

TOPページに戻る > html入門

select要素

選択式の選択項目を作ります
select要素はフォームの部品でクリックすると選べるプルダウン式の選択肢を表示します
選択肢は子要素であるoption要素を使って増やしていきます。データが送信されたときにoption要素のvalue属性の値がサーバーに送られます

使い方（書式）

<select></select>

select要素

対応ブラウザ
要素の種類	インライン要素
内容となる要素	option要素、optgroup要素

属性	説明
multiple属性	選択肢の中から複数の項目を選択できるようになります windowsではctrlを押しながらクリックすると複数選択できます multiple属性が無い場合は、1つの選択肢しか選択できません 値には、HTML4.01はmultiple、XHTMLはmultiple="multiple"
size属性	選択メニューリストの選択肢の数を指定します size属性の指定がない場合は、プルダウン式のメニューで表示されます
name属性	入力項目に名前をつけます。送信されたときに値がサーバーに送信されます 項目の値はoption要素のvalue属性で指定します
disabled属性	フォームの入力項目と選択を禁止して操作できなくします この属性が付いている項目はサーバーに値を送信しません
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

html

<form action="select.cgi" method="post">
<select name="f4" size="1">
<option value="yahoo.co.jp">yahoo.co.jp</option>
<option value="google.co.jp">google.co.jp</option>
<option value="hp-html.jp">hp-html.jp</option>
</select>
 <input type="submit" value="送信"> 
</form>

実際の表示

※サンプルのためフォームのみでcgiは動きません

yahoo.co.jp google.co.jp hp-html.jp

その他のデザインはcssでスタイルを指定