2010-11-09 1 views
0

Для этой части кодаXHTML ошибка W3C проверки «ссылка на несуществующие ID„ххххй“»

<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 Validator дает этой ошибке ссылку на несуществующий 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

Второй пример должен быть исправлен таким же образом, как первый был исправлен (несколькими ответами): атрибут 'for' элементов'

+0

@elusive - но у меня есть 3 разных идентификатора для дня рождения –

+0

gear-solid: Затем выберите один. Вы не можете использовать несколько идентификаторов в атрибуте 'for'. – jwueller

ответ

2

Измените значение атрибута for в label элемента:

<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

кажется лучшим решением - спасибо –

1

Нет id="gender" или name="gender". Вы используете секс. Используйте секс или используйте пол. Держите его согласованным.

+0

Спасибо, что делать в 2-м примере? –