前々回「フォーム入力ページの作成」で、input要素にtype=”radio”を指定してラジオボタンを作成しました。
この部分のHTMLソースに改めて注目してみましょう。
<tr> <th>お問合せ区分</th> <td> <input type="radio" name="sort" value="1">商品に関するお問合せ<br> <input type="radio" name="sort" value="2">採用に関するお問合せ<br> <input type="radio" name="sort" value="99">その他のお問合せ </td> </tr>
上記のHTMLソース中には、3つのラジオボタンと「商品に関するお問合せ」「採用に関するお問合せ」「その他のお問合せ」というテキスト（ラベル）があります。
このHTMLソースでは、どのラジオボタンがどのテキストと関連付けられているのか、明確になっていないことにお気づきでしょうか。
それぞれが近くに並べてあったり、br要素で改行しているので、ブラウザの画面上ではどのボタンがどのテキストに対応しているのか何となく見当はつきます。
しかし、厳密にはボタンの隣に「商品に関するお問合せ」と書いてあるからといって、そのボタンとテキストが対応しているとは限りません。
しかも、ユーザーは小さな丸いラジオボタンをクリックしなければならないため、大変操作がしづらくなっています。
フォーム入力欄を作成する際には、ラベルと入力欄の関連付けを忘れないようにします。
ラベルと入力欄を関連付けるにはlabel要素を使用します。
contact_jisaku に以下の記述を追加してください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="table.css"> <title>お問合せ｜ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"> <h1><a href="index "><img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index ">ホーム</a></li> <li><a href="product ">製品紹介</a></li> <li><a href="profile ">会社概要</a></li> <li><a href="contact ">お問合せ</a></li> </ul> <!-- ヘッダ画像 --> <div id="img_subpage"> <img src="./images/img_contact.png" alt="お問合せ"> </div> <!-- サブメニュー（左カラム） --> <div id="submenu"> <h2>お問合せ</h2> <ul> <li><a href="#info0001">フォームからのお問合せ</a></li> <li><a href="#info0002">メールでのお問合せ</a></li> <li><a href="#info0003">お電話でのお問合せ</a></li> </ul> </div> <!-- インフォメーション（右カラム） --> <div id="info"> <h3 id="info0001">フォームからのお問合せ</h3> <form method="post" action="xxxxxxxx.php" id="form1" name="form1"> <table class="profile"> <tr> <th>お問合せ区分</th> <td> <label><input type="radio" name="sort" value="1">商品に関するお問合せ</label><br> <label><input type="radio" name="sort" value="2">採用に関するお問合せ</label><br> <label><input type="radio" name="sort" value="99">その他のお問合せ</label> </td> </tr> <tr> <th>メールアドレス</th> <td><input type="email" size="30" name="mail" id="mail"></td> </tr> <tr> <th>お名前</th> <td><input type="text" size="20" name="namae" id="namae"></td> </tr> <tr> <th>お問合せの内容</th> <td><textarea name="naiyou" cols="40" rows="5"></textarea></td> </tr> </table> <input type="hidden" name="q" value="1"> <p><input type="submit" value="送信する"></p> </form> <hr> <h3 id="info0002">メールでのお問合せ</h3> <hr> <h3 id="info0003">お電話でのお問合せ</h3> <hr> </div> <!-- フッタ --> <div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div> </div> </body> </html>
保存をしたらブラウザで表示してみましょう。
一見変化が無いように見えますが、テキスト部分（ラベル）をクリックすれば関連付けられているラジオボタンにチェックが付くようになっているはずです。
それぞれのラベルと入力欄をセットにして<label>～</label>で囲むことで、これらを関連付けることができます。
| <前へ | 目次へ | 次へ> |
