[新着] Webテンプレートを仮オープンしました
この指定を行うと、プルダウン形式、またはリスト形式のメニューを作成できます。
<select name="example">
<option value="サンプル">ここの文字が表示される</option>
</select>
selectタグに囲まれた部分へ、optionタグを使って選択肢を並べていきます。
（optionタグに囲まれた文字が、メニュー内に表示されることになります。）
optionの終了タグは、次の例のように省くことも可能です。
<select name="example">
<option value="サンプル">ここの文字が表示される
</select>
【プルダウン形式とリスト形式】
セレクトボックスには、次のような2タイプの表示方法があります。これはselectタグで指定することができます。
【selectタグ】
<select name="example" size="3" multiple> 〜 </select>
| name="" | メニュー名を指定します（一般的には半角英数字） |
|---|---|
| size="" | 表示行数を指定します（デフォルトは 1） |
| multiple | 複数選択を可能にします |
■name="" （メニュー名を指定する）
入力項目を判別するための名前です。項目ごとに違う名前を指定します。
■size="" （表示行数を指定する）
メニューの表示行数を指定します。
size="" に 1 を指定するとプルダウン形式のメニューになり、複数行を指定するとリスト形式のメニューになります。
この指定を行わない場合は、size="1" が適用されます。
■multiple （複数選択を可能にする）
multiple を指定すると、メニューの中から複数を選べるようになります。
この指定を行ったメニューは、自動的にリスト形式の表示になります。
※Windowsの場合、ShiftキーまたはCtrlキーを押しながらクリックすると、複数を選ぶことができます。
【optionタグ】
<option value="サンプル" selected>サンプル</option>
| value="" | 送信される内容を指定します |
|---|---|
| selected | 最初から選択された状態にします |
■value="" （送信される内容を指定する）
その選択肢が選択されたとき、value="" の内容が送信されます。
■selected （最初から選択された状態にする）
selected を指定した選択肢は、最初から選択された状態になります。
メニューのサイズや背景色等は、スタイルシートでアレンジすることもできます。指定方法の詳細は「関連ページ」をご覧ください。
■プルダウン形式で表示する場合
<form method="POST" action="example.cgi">
<p>
好きな色：
<select name="color1">
<option value="白">ホワイト</option>
<option value="赤">レッド</option>
<option value="黄">イエロー</option>
<option value="青">ブルー</option>
<option value="緑">グリーン</option>
</select>
</p>
<p><input type="submit" value="送信する"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
■3行目を選択しておく場合
<form method="POST" action="example.cgi">
<p>
好きな色：
<select name="color2">
<option value="白">ホワイト</option>
<option value="赤">レッド</option>
<option value="黄" selected>イエロー</option>
<option value="青">ブルー</option>
<option value="緑">グリーン</option>
</select>
</p>
<p><input type="submit" value="送信する"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
■リスト形式で表示する場合
<form method="POST" action="example.cgi">
<p>
好きな果物：
<select name="fruit1" size="5">
<option value="りんご">アップル</option>
<option value="みかん">オレンジ</option>
<option value="ぶどう">グレープ</option>
<option value="もも">ピーチ</option>
<option value="さくらんぼ">チェリー</option>
</select>
</p>
<p><input type="submit" value="送信する"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
■3行で表示する場合
<form method="POST" action="example.cgi">
<p>
好きな果物：
<select name="fruit2" size="3">
<option value="りんご">アップル</option>
<option value="みかん">オレンジ</option>
<option value="ぶどう">グレープ</option>
<option value="もも">ピーチ</option>
<option value="さくらんぼ">チェリー</option>
</select>
</p>
<p><input type="submit" value="送信する"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
■multipleを指定する場合
<form method="POST" action="example.cgi">
<p>
好きな果物：
<select name="fruit3" multiple>
<option value="りんご">アップル</option>
<option value="みかん">オレンジ</option>
<option value="ぶどう">グレープ</option>
<option value="もも">ピーチ</option>
<option value="さくらんぼ">チェリー</option>
</select>
</p>
<p><input type="submit" value="送信する"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
■multipleを指定し、2行目と4行目を選択しておく場合
<form method="POST" action="example.cgi">
<p>
好きな果物：
<select name="fruit4" multiple>
<option value="りんご">アップル</option>
<option value="みかん" selected>オレンジ</option>
<option value="ぶどう">グレープ</option>
<option value="もも" selected>ピーチ</option>
<option value="さくらんぼ">チェリー</option>
</select>
</p>
<p><input type="submit" value="送信する"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
