選択型のリストボックスを作る

<select name=””><option value=””>

選択型のプルダウンメニューと基本的なタグの構造は同じです。プルダウンメニューとリストボックスのタグ上での違いは、<select>タグに「size=””」という属性で指定する値で変化します。「size=””」の属性を書かない、もしくは「size=”1″」とするとプルダウンメニューになり、「size=”2以上”」とするとリストボックスになります。設定する値は項目名(optionタグ数)に依存します。

また、機能で異なる点はリストボックスでは<select>タグに「multiple」を書き足せば、項目の複数選択が可能になります。複数選択するには例えばWindowsの場合、キーボードの「Ctrlキー」、または「Shiftキー」を押しながら項目を選択すると複数選ぶことができます。

それ以外の属性については、プルダウンメニューの説明をご覧ください。

記述例

<form action=”#”>
通常のリストボックス
<select name=”都道府県” size=”3″>
<option value=”1″>北海道</option>
<option value=”2″ selected>東京</option>
<option value=”3″>沖縄</option>
</select>
</form><form action=”#”>
複数項目選択が可能なリストボックス
<select name=”都道府県” size=”3″ multiple>
<option value=”1″>北海道</option>
<option value=”2″>東京</option>
<option value=”3″>沖縄</option>
</select>
</form>


通常のリストボックス 
複数項目選択が可能なリストボックス 
<select>タグは単体では動作しません。必ずフォームタグの中に挿入してください。

関連情報

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

最新のHTML5を学ぶなら

参考情報

最新情報をチェックしよう!