html

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

2014年5月23日

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"をクリックするとテキストボックスにフォーカス

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



-html