プルダウン内を見やすくする
<html><head><title>プルダウン内を見やすくする</title></head>
<body>
<SELECT name="born">
<OPTION selected>生まれた年をお答えください</OPTION>
<OPTION>1959年以前</OPTION>
<OPTGROUP label="1960年代">
<OPTION>1960年</OPTION>
<OPTION>1961年</OPTION>
<OPTION>1962年</OPTION>
<OPTION>1963年</OPTION>
<OPTION>1964年</OPTION>
<OPTION>1965年</OPTION>
<OPTION>1966年</OPTION>
<OPTION>1967年</OPTION>
<OPTION>1968年</OPTION>
<OPTION>1969年</OPTION>
</OPTGROUP>
<OPTGROUP label="1970年代">
<OPTION>1970年</OPTION>
<OPTION>1971年</OPTION>
<OPTION>1972年</OPTION>
<OPTION>1973年</OPTION>
<OPTION>1974年</OPTION>
<OPTION>1975年</OPTION>
<OPTION>1976年</OPTION>
<OPTION>1977年</OPTION>
<OPTION>1978年</OPTION>
<OPTION>1979年</OPTION>
</OPTGROUP>
</SELECT>
</body>
</html>
誕生年や住んでいる都道府県をたずねるフォームでは、よくプルダウンメニューを用います。ですが項目数が多くて、目的の項目を探すのが大変だったりします。
そこでメニュー内で大項目と小項目に分けて見やすくするプルダウンを紹介します。
方法はとてもシンプルです。
入れ子にしたい項目を<OPTGROUP label="******"></OPTGROUP>で囲みます。
label="******"には、プルダウンで表示する項目名を入力します。
ホームページ作成ガイド
ホームページ作成ガイド