selectとoptionタグ/フォーム部品

<select>タグと<option>タグはセレクトボックスを配置するために使います。

説明

<select>タグと<option>タグを組み合わせて使う事でセレクトボックスと呼ばれる選択式のボックスが作れます。

セレクトボックス例

 <select>タグは<form>タグに囲まれた中で使い、<option>タグは<select>タグで囲まれた中で使います。

 セレクトボックスはスライドバーを表示してスライドさせる事も出来ます。

 又、スマートフォン等ではスライドではなく、タップすると選択肢が大きく表示される場合があります。タップとは指で1回タッチする事です。

構文

 <select>タグと<option>タグはHTMLボディー内に記述します。構文は以下の通りです。

<select name="名前" size="行数">
<option value="値">表示する部分</option>
</select>

 nameは識別するための名前でJavaScriptの処理でnameを使って値を取り出したり出来ますが、必須ではありません。

 sizeは表示する行数です。1であれば1行、3であれば3行表示されます。

 valueは部品の値です。例えば設定した値をJavaScriptで変数として利用する事も出来ます。

 ブラウザ上では「表示する部分」が表示されます。

 <option>タグを複数並べる事で選択肢を増やしていけます。

利用例

 <select>タグと<option>タグの利用例は以下の通りです。

<form action="#">
<select name="test1" size="1">
<option value=10>10</option>
<option value=20>20</option>
<option value=30>30</option>
</select>
<button type="button" onclick="alert(test1.value)">選択した数字を表示</button>
</form>

 上記では3つのオプションがありますが、1行だけ表示してプルダウンで選択出来るようにしています。

 又、ボタンを配置して、ボタンがクリックされると選択した数字がアラートで表示されるようにJavaScriptをonclickで指定しています。

 アラートで表示する値はtest1.valueと指定していますが、<select>タグのnameで指定した赤字の名前に.valueを追加する事で値を取り出しています。

 上記を表示すると以下になります。

 数字を選択してボタンをクリックすると選択した数字がアラートで表示されます。

 オプションを6個にしてsizeを3にすると以下のように表示されます。

 6つの数字から3行表示されており、スクロールバーで表示位置を変えれます。又、ボタンをクリックすると選択した数字がアラートで表示されます。

 スマートフォン等ではsizeが有効にならず、1行で表示される場合があります。

ディスプレイ

 <select>タグで囲むとインラインボックスを示すため、改行されません。このため、複数のセレクトボックスを横に並べる事が出来ます。

 <select>タグを囲む<form>タグで囲むとブロックボックスを示すため、複数ボックスを配置すると<form>タグの枠の中で改行されます。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加