二十七日目！（フォームパーツのマークアップ）

続きいきます。
●フォームパーツのマークアップ
fieldset要素と、legend要素を利用してグループ化することができる。フォームの入力項目を内容的・段階的にグループ化できる場合などに利用。

fieldset要素でグループ化する部品の範囲を示し、legend要素でグループのタイトルを示す。この例では、fieldset要素の背景色を設定することで、グループであることがいっそう際立つようにスタイリングしている。これらの要素を使わなくてもフォームとしては十分機能するが、グループ化した方がユーザーが利用しやすかったり、構造的に必要な場合は、このようにマークアップを行う。

●フォームのユーザービリティ向上のためのlabel要素
label要素はフォームのユーザビリティを向上させるのに欠かせない要素である。たとえばラジオボタンやチェックボックスはブラウザで小さく表示され、マウスでクリックする領域が狭いため、使う人によってはたいへん操作しづらい。label要素を使えばテキストをクリックしてもパーツが反応するため、ユーザビリティが大幅に向上する。テキスト入力欄など比較的クリックできる範囲が大きいパーツも、ラベルが設定されていればパーツとラベルのどちらをクリックしてもきちんと反応するので、ユーザーの直観的な操作を支援することができる。

フォームパーツにラベルを設定する方法は少しややこしいので、順序立て手作業することが大切。

１、ラベルにするテキストを書く（たとえば「お名前」）
２、そのテキストをlabel要素でマークアップする（<label>お名前</label>）
３、フォームパーツにIDを名をつける（<input id="name" .../>）
４、label要素にfor属性をつけ、パーツと同じID名を値として指定する（<label> for="name">お名前</label>)

<input type="radio" name="sex" id="man" /><label for="man">男性</label>
<input type="radio" name="sex" id="woman" /><label for="woman">女性</label>


●フォームのマークアップの工夫
フォームの中身のマークアップにはさまざまな方法がある。p要素を積み重ねてつくるのがもっともシンプルだが、「ラベルテキスト」と「フォームパーツ」が対になっているケースが多いことから、dl要素やtable要素でまとめる方法がよく利用される。
でも解説の通り、どれもマークアップとして間違いではないため、ターゲットユーザーの好みや対応デバイスを意識したマークアップを心がけることが大切。

フォームの内容をdl要素でマークアップした例


<form action=".../cgi-bin/qu" method="post">
   <fieldset>
      <legend>お客様の情報</legend>
      <dl id="customer">
         <dt><label for="name">お名前</label></dt>
         <dd><input type="text" id="name" value="" /></dd>
         <dt>性別</dt>
         <dd>
            <input type="radio" name="sex" id="man" /><label for="man">男性</label>
            <input type="radio" name="sex" id="woman" /><label fot="woman">女性</label>
         </dd>
      </dl>
   </fieldset>
   <fieldset>
      <legend>評価</legend>
      <dl id="rating">
         <dt>作品の良かったところをお聞かせください（複数回答可）</dt>
         <dd>
            <ul>
              <!-- 以下のリスト内のlabel要素では、暗示的なマークアップ -->
               <li><label><input type"checkbox" value="all" />全体的によかった</label></li>
   ・・・・中略・・・・
               <li><label><input type"checkbox" value="other" />その他</label></li>
            </ul>
         </dd>
         <dt><label for="freetext">ご意見などがありましたら、お願いいたします</label></dt>
         <dd><input type="text" size="50" id="freetext" /></dd>
      </dl>
   </fieldset>
   <div><input type="submit" value="入力内容を確認する" /></div>
</form>




少し短いですがきりがいいので、今日はここまで。