超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ 選択メニューを作る

タグ名プロパティ説明
<select>〜</select>nameメニュー名プルダウン式メニュー
size表示桁数リストボックス式メニュー
multiple複数選択可
<option>〜</option>valueテキスト送信されるテキスト
selectedデフォルトで選択

◆プルダウン式のメニューを作る

<select> タグを使えば選択メニューを作ることができます。
name 属性でメニュー全体に対する名前を付けます。
選択肢は<option> タグで作成します。<option> と </option> の間に選択肢として表示するテキストを記述します。
value 属性で、表示された選択肢の代わりにデータとして送信されるテキストを指定します。
selected 属性を指定しておくと、デフォルトで選択される項目を指定することができます。

あなたが好きな映画は何ですか?


(最初を空白にすると)


(selected 属性と使うと)

<form>
あなたが好きな映画は何ですか?<br>
<select name="movie">
 <option value="1">タイタニック</option>
 <option value="2">ライフ・イズ・ビューティフル</option>
 <option value="3">ショーシャンクの空に</option>
 <option value="4">グリーン・マイル</option>
 <option value="5">マトリックス</option>
</select>
<br>
<br>
(最初を空白にすると)<br>
<select name="movie">
 <option value=""></option>
 <option value="1">タイタニック</option>
 <option value="2">ライフ・イズ・ビューティフル</option>
 <option value="3">ショーシャンクの空に</option>
 <option value="4">グリーン・マイル</option>
 <option value="5">マトリックス</option>
</select>
<br>
<br>
(selected 属性と使うと)<br>
<select name="movie">
 <option value="1">タイタニック</option>
 <option value="2" selected>ライフ・イズ・ビューティフル</option>
 <option value="3">ショーシャンクの空に</option>
 <option value="4">グリーン・マイル</option>
 <option value="5">マトリックス</option>
</select>
</form>


◆リストボックス式のメニューを作る

リストボックス式のメニューを作るには <select> タグに size 属性を設定します。size 属性で、表示される行数を指定します。
name 属性でメニュー全体に対する名前を付けます。
multiple 属性を使えば複数選択が可能になります。multiple 属性を使って複数選択をする場合は、Shift キーまたは Ctrl キーを押しながら選択します。
選択肢は <option> タグを使って設定します。<option> タグの使い方はプルダウン式のメニューと同様です。

あなたが「いらないんじゃない・・・っていうか邪魔!」と思うのは誰ですか?
(5行だけ表示)


(全て表示&複数選択可)


(全て表示&複数選択可&デフォルト選択有り)

<form>
あなたが「いらないんじゃない・・・っていうか邪魔!」
と思うのは誰ですか?<br>
(5行だけ表示)<br>
<select size="5" name="morning">
 <option value="naka">中澤裕子</option>
 <option value="yasu">保田圭</option>
 <option value="iida">飯田圭織</option>
 <option value="abe">安倍なつみ</option>
 <option value="yaguchi">矢口真里</option>
 <option value="ishi">石川梨華</option>
 <option value="yoshi">吉澤ひとみ</option>
 <option value="gomaki">後藤真希</option>
 <option value="tuji">辻希美</option>
 <option value="kago">加護亜依</option>
</select>
<br>
<br>
(全て表示&複数選択可)<br>
<select size="5" name="morning" multiple>
 <option value="naka">中澤裕子</option>
 <option value="yasu">保田圭</option>
 <option value="iida">飯田圭織</option>
 <option value="abe">安倍なつみ</option>
 <option value="yaguchi">矢口真里</option>
 <option value="ishi">石川梨華</option>
 <option value="yoshi">吉澤ひとみ</option>
 <option value="gomaki">後藤真希</option>
 <option value="tuji">辻希美</option>
 <option value="kago">加護亜依</option>
</select>
<br>
<br>
(全て表示&複数選択可&デフォルト選択有り)<br>
<select size="5" name="morning" multiple>
 <option value="naka">中澤裕子</option>
 <option value="yasu" selected>保田圭</option>
 <option value="iida">飯田圭織</option>
 <option value="abe">安倍なつみ</option>
 <option value="yaguchi">矢口真里</option>
 <option value="ishi">石川梨華</option>
 <option value="yoshi">吉澤ひとみ</option>
 <option value="gomaki">後藤真希</option>
 <option value="tuji">辻希美</option>
 <option value="kago">加護亜依</option>
</select>
</form>

(注:デフォルトで1名選択していますが、この人がいらないと思っているわけではありません。)