option要素

スポンサードリンク

option要素

select要素の選択肢(選択項目)を作ります
option要素はフォームの部品でクリックすると選べるプルダウン式の選択肢を表示します
select要素内でoption要素を増やしていくと選択肢も増えていきます。データが送信されたときにselect要素のname属性の値（入力項目の名前）と、option要素のvalue属性の値（入力項目の値）がサーバーに送られます

使い方（書式）

<option></option>

select要素

対応ブラウザ
要素の種類	select要素の子要素、optgroup要素の子要素
内容となる要素	テキスト

属性	説明
value属性	サーバーに送る項目の値です値を記述しておくと入力項目の初期表示として表示されます
selected属性	ページを読み込んだ初期状態から選択状態になります値には、HTML4.01はselected、XHTMLはselected="selected"
label属性	選択肢に表示される選択肢をlabel属性で指定した文字列に置き換えます値にはテキスト（文字）
disabled属性	フォームの入力項目と選択を禁止して操作できなくしますこの属性が付いている項目はサーバーに値を送信しません
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

html

<form action="select.cgi" method="post">
<table cellpadding="5">
 <tr>
 <td>好きな飲み物は？</td>
 </tr>
 <td>
   <select name="f4" size="1">
    <option value="りんごジュース">りんごジュース</option>
    <option value="みかんジュース">みかんジュース</option>
    <option value="ぶどうジュース">ぶどうジュース</option>
   </select>
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <input type="submit" value="内容確認画面へ"> 
 <input type="reset" value="リセット"> 
 </td>
 </tr>
</table>
</form>

実際の表示

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

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

好きな飲み物は？