フォーム入力画面を作成する★入力欄の関連付け前々回「フォーム入力ページの作成」で、input要素にtype="radio"を指定してラジオボタンを作成しました。この部分のHTMLソースに改めて注目してみましょう。value="99">その他のお問合せ</td></tr>上記のHTMLソース中には、3つのラジオボタンと「商品に関するお問合せ」「採用に関するお問合せ」「その他のお問合せ」というテキスト(ラベル)があります。このHTMLソースでは、どのラジオボタンがどのテキストと関連付けられているのか、明確になっていないことにお気づきでしょうか。それぞれが近くに並べてあったり、br要素で改行しているので、ブラウザの画面上ではどのボタンがどのテキストに対応しているのか何となく見当はつきます。厳密にはボタンの隣に「商品に関するお問合せ」と書いてあるからといって、そのボタンとテキストが対応しているとは限りません。ユーザーは小さな丸いラジオボタンをクリックしなければならないため、大変操作がしづらくなっています。ラベルと入力欄の関連付けフォーム入力欄を作成する際には、ラベルと入力欄の関連付けを忘れないようにします。ラベルと入力欄を関連付けるにはlabel要素を使用します。contact_jisaku.htmlに以下の記述を追加してください。Reserved.</small></div></div></body></html>保存をしたらブラウザで表示してみましょう。変化が無いように見えますが、テキスト部分(ラベル)をクリックすれば関連付けられているラジオボタンにチェックが付くようになっているはずです。それぞれのラベルと入力欄をセットにして<label>~</label>で囲むことで、これらを関連付けることができます。