フォームの利用:セレクトボックス

セレクトボックスとフォーム

ユーザー側で複数の選択のうち一つを選ぶフォームはラジオボタンがありますが、select要素を用いたセレクトボックスも同じようなフォームとして利用できます。
select要素を用いたセレクトボックスをフォームとして扱うにはフォーム要素内にselect要素を記述する必要があります。
また、select要素はフォーム以外にもHTML上の選択肢のインターフェースとして利用できます。

セレクトボックスの記述

セレクトボックスはプルダウン式の選択肢を表示します。さらにsize属性を用いるとボックスを選択していない状態で表示される選択肢の数を指定できます。
select要素での選択肢はoption要素で記述されvalue属性もoption要素のタグ内に記述します。
またselected属性を記述すれば初期の選択肢として指定できます。
記述方法は次のようになります

<select name="セレクトボックスの名前" size="最初から表示する行数">
    <option value="選択肢の値">表示される選択肢</option>
    <option value="選択肢の値" selected>表示される選択肢</option>
    <option value="選択肢の値">表示される選択肢</option>
</select>

この例では真ん中の選択肢が最初に選択された状態になります。
このselect要素をform要素内に記述すればフォームとしてセレクトボックスを利用できます。




今回はセレクトボックスの選択肢を表示するJavaScriptとなります。
ラジオボタンやチェックボックスと同様にonchange属性でJavaScriptが動きます。