もくじ

プルダウンメニューで選択

select と option

選択肢が多いと広い面積が必要ですが、プルダウンメニューにするとスマートになります。

上記のフォームは次の様にして作ります。

<form method="post" action="http://www.st.seiai.ed.jp/cgi-bin/cgimail">
<p>
<label for="namae">あなたのお名前:</label>
<input type="text" id="namae" name="YourName" size="20" maxlength="80">
</p>
<p class="sentaku">
<label for="yakuwari">あなたが一番やりたい役はどれですか(ひとつだけ)</label>
<select id="yakuwari" name="yaku">
<option value="">-選択してください-</option>
<option value="亀"></option>
<option value="子供">亀をいじめる子供</option>
<option value="うらしま">うらしまたろう</option>
<option value="おとひめ">おとひめ</option>
<option value="さかな">たい または ひらめ</option>
</select>
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="やり直し">
</p>
</form>

label まわりがわかりやすくなったように見えます。radioを使ったものとselectを使ったものとどちらが入力する人にやりやすいかは時と場合によります。考えて使い分けてください。

課題 form3.html

新たに form3.html を作成し、上記の select を使ったフォームを作りなさい。内容は自由に変えること。

もちろん index.html からのリンクと、戻るリンクを作成します。目次のリンクは「select」という文字列にすること。


ウェブページ(Sep.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/