継続は力なり＃３４
メニューを構成する要素
メニューは、基本的なフォームの部品の中では唯一複数の要素の組み合わせで作られている部品
メニューの構造は、リストと同じようになっていて、全体を「select要素」で囲い、各選択肢は「option要素」で指定
select要素に指定できる属性
・name="部品の名前"
このフォーム部品の名前を指定
選択されたデータは、この名前とペアで送信される
・size="行数"
一度に見られる項目の数（行数）を指定
この属性を指定すると、メニューではなくリストボックスになる
・multiple
複数の項目を選択できるようにする
・disabled
このフォーム部品を変更・選択不可の状態にする
option要素に指定できる属性
・value="送信値"
サーバーに送信される値を指定
この値とselect要素のname属性の値がペアで送信される
・selected
この項目を選択した状態にする
・disabled
このフォーム部品を変更・選択不可の状態にする
例
HTML
<p>選択してください:
<select>
<option>メニュー項目１</option>
<option>メニュー項目２</option>
<option>メニュー項目３</option>
<option>メニュー項目４</option>
<option>メニュー項目５</option>
</select>
</p>フォーム部品とテキストを関連づける要素
例としてテキスト入力欄の前に「名前：」のようのテキストを配置したとしても、それだけでそのテキストと入力欄が内部的に結び付けられるわけではない
そのため、その「名前：」と書かれた部分をクリックしたとしてもテキスト入力欄には何の反応もない
（入力を開始するには直接テキスト入力欄ををクリックする必要がある）
同様に、チェックボックスやラジオボタンもテキスト部分をクリックしても一切反応はなく、直接ボタン部分をクリックしなければならない
しかし、それでは一般的なアプリケーションとは反応が異なり、使いずらいのでテキストとフォーム部品を内部的に関連づけるための要素が用意されている
それが「label要素」
label要素の使い方
label要素でテキストとフォーム部品を関連づけるには２つの方法がある
１つはテキストとフォーム部品を一緒にlabel要素の内容として入れてしまう方法
もう１つは、フォーム部品にid要素を指定しておき、内容としてテキストだけを入れたlabel要素のfor属性の値にそのid要素の値を入れて関連づける方法
label要素の内容として入れられるのは、インライン要素だけ
（各種フォーム部品もインライン要素に分類される）
ブロックレベル要素は入れられない
label要素に指定できる属性
・for="部品のid"
フォーム部品のid属性の値を指定して、このラベルと関連づける
例
HTML
<p>
<label>ラベル：<input type="text"></label>
</p>
<p>
<label><input type="checkbox" name="cb"> 項目A</label>
<label><input type="checkbox" name="cb"> 項目B</label>
<label><input type="checkbox" name="cb"> 項目C</label>
</p>
<p>
<input id="rb1" type="radio" name="rb">
<label for="rb1">項目D</label>
<input id="rb2" type="radio" name="rb">
<label for="rb2">項目E</label>
<input id="rb3" type="radio" name="rb">
<label for="rb3">項目F</label>
</p>フォーム部品などをグループ化する要素
各種フォーム部品やそのラベルのテキストなどをグループ化するには、fieldset要素を使用する
グループの表示方法が特に決められているわけではないが、一般的なブラウザではグループ全体を囲うような線が表示される
fieldset要素でグループ化した範囲にタイトルをつけるには、「legend要素」を使用する
legend要素は、fieldset要素でマークアップした範囲の先頭に一つだけ入れることができる
fieldset要素に指定できる属性
・name="部品の名前"
この要素の名前を指定
・disabled
このフォーム部品を変更・選択不可の状態にする
例
HTML
<fieldset>
<legend>グループのタイトル</legend>
<p>
<label>ラベル：<input type="text"></label>
</p>
<p>
<label><input type="checkbox" name="cb"> 項目A</label>
<label><input type="checkbox" name="cb"> 項目B</label>
<label><input type="checkbox" name="cb"> 項目C</label>
</p>
<p>
<input id="rb1" type="radio" name="rb">
<label for="rb1">項目D</label>
<input id="rb2" type="radio" name="rb">
<lavel for="rb2">項目E</label>
<input id="rb3" type="radio" name="rb">
<label for="rb3">項目F</label>
</p>
</fieldset>