开发者

Why are "for" attributes for form labels necessary?

开发者 https://www.devze.com 2023-03-16 20:17 出处:网络
W开发者_运维知识库hy are \"for\" attributes for form labels necessary?I\'ve never had a use for themThe main advantage is that clicking on a label with a \"for\" attribute will auto-focus on that form

W开发者_运维知识库hy are "for" attributes for form labels necessary? I've never had a use for them


The main advantage is that clicking on a label with a "for" attribute will auto-focus on that form element. So, a label for an input field will be associated with that input field, and clicking on the label will autofocus the input.


@ChristopherArmstrong's answer is technically correct - but the reason it's a good thing is that people who have trouble pointing correctly (older users, people with disabilities, etc.) are helped by this. It lets them get the cursor "about right" and still land in the right field.


When used with radio buttons, it lets the click on the label select the radio button:

http://jsfiddle.net/DLL73/

notice that clicking on ONE does nothing because it's not using the for attribute, but clicking on TWO selects that radio button.


It will associate the label with the form field. This is especially useful for radio buttons so that you can click the label to select the button, not just the tiny button itself.

However, you don't need to use the for attribute for that, you can also put the radio button inside the label:

<label>
  <input type="radio" name="selection" value="yes" />
  Certainly
</label>

I usually put a span tag around the text also, so that it can easily be styled using CSS.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号