Question

我希望在我的表单元素周围有一个标签，以便它可以访问，但是这样编写它不会通过Firefox的WAVE可访问工具栏，有人可以看到它有什么问题吗？

这是我的代码：

<div style="width:895px; max-width:100%; text-align:right;">
<label for="select document type">
Select: 
<select id="view" onchange="toggleElement(this)">
<option value="All">All</option>
<option value="Tenant">A</option>
<option value="Landlord">B</option>
</select>
</label>
</div>

Answer 1

我不明白为什么你必须在你的元素周围包裹你的标签才能使它可以访问。但是你可以采取任何一种方式：环绕，或者for=""匹配元素的id（你的select）。

所以，如果你回首，你不需要for=，所以这样的事情应该有效：

<div style="width:895px; max-width:100%; text-align:right;">
    <label>
        Select: 
        <select id="view" onchange="toggleElement(this)">
            <option value="All">All</option>
            <option value="Tenant">A</option>
            <option value="Landlord">B</option>
        </select>
    </label>
</div>

但你也可以使用正确的for代替包装。在这种情况下，for必须与id匹配：

<div style="width:895px; max-width:100%; text-align:right;">
    <label for="view">
        Select: 
    </label>
    <select id="view" onchange="toggleElement(this)">
        <option value="All">All</option>
        <option value="Tenant">A</option>
        <option value="Landlord">B</option>
    </select>
</div>

编辑：您可以通过验证您的html来查看错误： http://validator.nu/

错误：错误值选择元素标签上属性的文档类型：   ID不得包含空格。

:right;">↩<label for="select document type">↩Selec

错误：带有for属性的label元素的任何选择后代   必须具有与属性匹配的ID值。

↩Select: ↩<select id="view" onchange="toggleElement(this)">↩<opti

错误：label元素的for属性必须引用表单   控制。

:right;">↩<label for="select document type">↩Selec

上面提到的3个错误都是因为for属性不好。

Answer 2

WAVE验证失败，因为您误解了for元素的<label>属性是什么。

如果在控件周围包裹<label>，则控件会自动与该标签关联，并且您不应该放置for属性。这个方法已经过时了，不应该使用它，但它仍然可以完成。

如果您未将控件包裹在<label>中，则for属性应该是与其关联的控件的id。

例如......

<label>
  Select: 
  <select id="view">
    ...
  </select>
</label>

... OR

<label for="view">
  Select: 
</label>
<select id="view">
  ...
</select>

您似乎正在使用for，好像它将成为工具提示消息（如果这是您的意思，那么请使用title属性）。请注意，有时会读取title属性而不是<label>，因此可能会造成混淆。

表单元素不添加标签

2 个答案: