【问题标题】:What's the "for" for in a label tag?标签标签中的“for”是什么?
【发布时间】:2010-10-16 10:16:53
【问题描述】:

刚刚在 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= 参数吗? (出于好奇,它有什么作用?)

【问题讨论】:

    标签: html forms usability


    【解决方案1】:

    来自 w3schools.org:

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

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

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

    HTH!

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

    【讨论】:

    • +1 if the user clicks on the text within the label element, it toggles the control.
    【解决方案2】:

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

    【讨论】:

    • 这是制作自定义复选框和单选按钮的重要部分。
    【解决方案3】:

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

    【讨论】:

      【解决方案4】:

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

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

      【讨论】:

        【解决方案5】:

        它将标签与表单元素 id 联系起来。某些表单元素,例如复选框,可以通过单击其标签来激活。

        【讨论】:

          【解决方案6】:

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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-01-27
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多