for 属性によるラベルとコントロールの関連付け

html5 ではラベルの for 属性を利用してコントロールとの関連付けを行うことができます。関連付けを行ったラベルをクリックすると、コントロールにフォーカスしたり、選択することができるようになります。

    ラベルの"Text1"をクリックするとテキストボックスにフォーカス
    <label for="Text1">Text1</label>
    <input id="Text1" type="text" />

    テキストのRadio～をクリックするとラジオボタンにチェック
    <input id="Radio1" type="radio" name="group1" /><label for="Radio1">Radio1</label>
    <input id="Radio2" type="radio" name="group1" /><label for="Radio2">Radio2</label>
    <input id="Radio3" type="radio" name="group1" /><label for="Radio3">Radio3</label>

ラベルの"Text1"をクリックするとテキストボックスにフォーカス

Text1



テキスト部分（Radio～）をクリックするとラジオボタンにチェック

Radio1
Radio2
Radio3