2014年5月23日金曜日

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





テキスト部分(Radio~)をクリックするとラジオボタンにチェック



0 件のコメント:

コメントを投稿