2010-11-09 71 views
0

对于这个代码部分XHTML W3C验证错误“的参考不存在的ID‘XXXXX’”

<label for="gender">I am:</label> 
<select class="select" name="sex" id="sex"> 
    <option value="0">Gender:</option> 
    <option value="1">Female</option> 
    <option value="2">Male</option> 
</select> 

W3C验证给这个错误参考不存在的ID“性别”

如何解决这个问题?

编辑

抵达该处还

引用不存在的ID “生日”

<label for="birthday" class="birthday">Birthday:</label> 

<div class="field_container"> 

<select name="birthday_month" id="birthday_month" class=""> 
<option value="-1">Month:</option> 
<option value="1">Jan</option> 
<option value="2">Feb</option> 
<option value="3">Mar</option> 
</select> 
<select id="birthday_day" name="birthday_day"> 
<option value="-1">Day:</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 
<select id="birthday_year" name="birthday_year"> 
<option value="-1">Year:</option> 
<option value="2010">2010</option> 
<option value="2009">2009</option> 
<option value="2008">2008</option> 

</select> 
</div> 
+0

第二个例子需要固定的第一个已被校正以同样的方式(由几个答案):将'''

+0

@elusive - 但我对生日 – 2010-11-09 20:34:41

+0

齿轮固体3个不同的ID:然后选择一个。 'for'属性中不能使用多个ID。 – jwueller 2010-11-09 20:38:07

回答

2

变化在label元素的for属性的值:

<label for="sex">I am:</label> 

编辑补充:

你的第二个例子是比较复杂的,因为你使用一个标签三个输入字段。

我建议类似如下:

以下CSS规则添加到您的网站:

.hidden_label { 
    font-size:1px; 
    height:0; 
    line-height:0; 
    margin:0 0 0 -1000px; 
    text-indent:-9999px; 
} 

然后更新您的形式:

<div class="birthday">Birthday:</div> 

<div class="field_container"> 

<label for="birthday_month" class="hidden_label">Birthday Month</label> 
<select name="birthday_month" id="birthday_month" class=""> 
    <option value="-1">Month:</option> 
    <option value="1">Jan</option> 
    <option value="2">Feb</option> 
    <option value="3">Mar</option> 
</select> 

<label for="birthday_day" class="hidden_label">Birthday Day</label> 
<select id="birthday_day" name="birthday_day"> 
    [...] 
</select> 

<label for="birthday_year" class="hidden_label">Birthday Year</label> 
<select id="birthday_year" name="birthday_year"> 
    [...] 
</select> 

你想要做两事情:

对用户视觉上吸引人的形式,然后为这些用户正在使用辅助技术,在此过程中提供一些额外的帮助。使用我上面定义的CSS类,您可以确保屏幕阅读器在用户移入表单元素的同时仍然可以看到元素并阅读其内容,同时隐藏可视网站中的所有其他标签。

+0

似乎更好的解决方案 - 感谢 – 2010-11-09 21:03:51

1

没有id="gender"name="gender"。你正在使用性。要么使用性别,要么使用性别。保持一致。

+0

感谢,在第二个例子做什么呢? – 2010-11-09 20:27:02