什么是标签标签中的“for”?

时间:2009-03-30 16:40:38

标签: html forms usability

只是在HTML标签标记中遇到for参数:

<label for="required-firstname"> First Name </label>
<small>*</small>
<input name="required-firstname" type="text" tabindex="2" 
       id="required-firstname" size="24" maxlength="40">

我正在将此表单转换为PHP处理过的脚本,我可以摆脱for =参数吗? (出于好奇,它做了什么?)

6 个答案:

答案 0 :(得分:88)

来自w3schools.org:

  

标签定义输入元素的标签。

     

标签元素不会呈现给用户任何特殊内容。但是,它为鼠标用户提供了可用性改进,因为如果用户单击label元素中的文本,它将切换控件。

     

标记的for属性应该等于相关元素的id属性以将它们绑定在一起。

HTH!

将$ .02添加为辅助功能SME - 以及可用性,LABEL还将输入字段与正确的标签相关联,因此使用屏幕阅读器的人将知道该字段的用途。

答案 1 :(得分:17)

HTML标签标签定义表单元素的标签。它们通常与复选框和单选按钮一起使用,当用户单击标签时,它会切换按钮。使用文本输入(您必须检查这一点以确定)我认为它只会在用户点击标签时关注输入。

答案 2 :(得分:8)

它指定标签绑定到的元素。在示例代码中,标签是 required-firstname 输入字段。如果用户单击该标签,焦点将转到绑定的输入字段。这是一个可用性改进,我认为你最好离开它。这是一个很好的做法。

答案 3 :(得分:5)

它将标签绑定到表单元素id。某些表单元素(如复选框)可以通过单击其标签来激活。

答案 4 :(得分:5)

“for”属性是表单可访问性的必要元素。不要忽略它。对于使用屏幕阅读器(SR)向其宣布网页的人,“for”属性将控件与标签相关联。通常,SR用户将通过表单从一个控件(SR的可聚焦元素)到下一个控件进行制表。如果没有“for”属性,SR用户将不得不更改SR上的模式并在表单周围进行探测,以尝试确定哪个控件与哪个标签匹配,这可能非常耗时且令人困惑。 “for”属性也可用于与电机问题相关的辅助技术。

WebAIM.org有一个很棒的页面,解释了“for”的可访问性后果:http://webaim.org/techniques/forms/controls

答案 5 :(得分:3)

在某些浏览器中,当您单击for标签中的文本时,您将选中与其关联的框(即for = id)或将焦点放在该框上。这是ADA的事情