Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Валидатор ругается на неправильное положение label

Автор: Aliance 20.4.2009, 09:27

Скажите, почему валидатор ругается на такое:

Код


<label>Логин: <input type="text" id="nick" name="nick" value="" /></label>

Неужели нельзя в тел label вкладывать нужный мне input?

Цитата

document type does not allow element "label" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

Автор: ksnk 20.4.2009, 09:42

Вот такой текст ( из www.htmlbook.ru ++) валидируется http://validator.w3.org/#validate_by_input валидатором.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=cp1251">
  <title>Тег LABEL</title>
 </head>
 <body>

  <form action="handler.php">
   <p><b>Lorem ipsum dolor sit amet...</b></p>
   <p><label><input type="checkbox" id="check1">Lorem</label><Br>
   <label><input type="checkbox" id="check2">Ipsum</label><Br>
   <label><input type="checkbox" id="check3">Dolor</label><Br>
   <label><input type="checkbox" id="check4">Sit amet</label></p>
  </form> 

 </body>
</html>

P.S. ссылку на валидатор поправил..

Автор: Aliance 20.4.2009, 09:45

В чем тогда может быть проблема?

Вот мой кусок кода:

Код


        <div id="logo-middle-right">
            <!-- АВТОРИЗАЦИЯ -->
            <fieldset>
                <legend>Авторизация</legend>
                <form id="authorization-form" action="" method="post">
                    <label>Логин: <input type="text" id="nick" name="nick" value="" /></label>
                    <br />
                    <label>Пароль: <input type="password" id="password" name="password" value="" /></label>
                    <br />
                    <a href="" id="authorization-forget-password-link">Забыли пароль?</a> <img 
id="authorization-submit-button" src="http://images.morgenshtern.com/enter.gif" 
alt="Авторизация" title="Войти" width="44" height="18" />
                </form>
            </fieldset>
            <!-- АВТОРИЗАЦИЯ -->
        </div>

Автор: ksnk 20.4.2009, 10:02

Это какие-то уродские w3c-шности. Внутренность формы должна быть блочная, а не текстовая. Нужно вставить весть текст формы в тег <div> и валидация пройдет.

Автор: Aliance 20.4.2009, 10:11

Код


#authorization-form {
    display: block;
}

спасет?

Автор: ksnk 20.4.2009, 10:18

Нет! За валидность нужно расплачиваться smile

Автор: Aliance 20.4.2009, 10:27

Понял, попробовал - вроде дизайн ни на секунду не пострадал от этого. Вечером еще потестирую во всех браузерах, надеюсь все будет окей.

Автор: Aliance 20.4.2009, 22:14

Попробовал - все верно. Что радует - дизайн не изменился ни на грамм smile

Спасибо за совет. +

Автор: source777 28.4.2009, 20:15

Цитата(Aliance @ 20.4.2009, 09:27

)

<label>Логин: <input type="text" id="nick" name="nick" value="" /></label>

А зачем ты в label input засунул? это ж не семантично не фига.
Правильный вариант:
<label for="nick">Логин:</label><input type="text" id="nick" name="nick" value="" />

Автор: ksnk 28.4.2009, 20:30

source777, Офигенно семантично! Лишний id заводится, лишний параметр в label...

Автор: source777 28.4.2009, 20:44

Цитата(ksnk @ 28.4.2009, 20:30

)

source777, Офигенно семантично! Лишний id заводится, лишний параметр в label...

Во-первых, id там и так был.
Во-вторых, он не лишний, а очень даже полезный, для всяких js-валидаций.
В-третьих, ты заголовки через тег font делаешь что-ли? Самое главное в вёрстке - это её семантичность. И раз уж ты решил использовать тег label, то ничего кроме метки внутри него быть не должно!

Добавлено через 1 минуту и 34 секунды

Цитата(ksnk @ 28.4.2009, 20:30

)

лишний параметр в label...

догадайся зачем он нужен...

Автор: ksnk 28.4.2009, 23:43

source777, Уточняю, я имею ввиду такую конструкцию:

Код

<label>Логин: <input type="text" name="nick" value="" /></label>

и я считаю, что она предпочтительнее такой:

Код

<label for="nick">Логин: </label><input type="text" id="nick" name="nick" value="" />

Они обе порождают одинаковый визуально элемент + первая конструкция короче. imho, этого вполне достаточно...

JavaScript может добраться до любого элемента формы хоть по имени, хоть по значению, хоть по порядковому номеру тега, так что ID для этого не нужен.

Стили пишутся для тегов внутри контейнеров. Засорять код лишними Id'ями тоже как-то не приходится...

Автор: source777 29.4.2009, 11:16

Цитата(ksnk @ 28.4.2009, 23:43

)

Они обе порождают одинаковый визуально элемент

ну это пока... все браузеры работают в режиме совместимости со старыми сайтами.

Цитата(ksnk @ 28.4.2009, 23:43

)

+ первая конструкция короче

А в чём плюс то? в экономии 15 байт трафика, после включения на серваке mod_deflate от этой экономии и следа не останется...
А вот снижение читабельности и интуитивной понятности вёрстки при использовании более короткого варианта на лицо.

Цитата(ksnk @ 28.4.2009, 23:43

)

JavaScript может добраться до любого элемента формы хоть по имени, хоть по значению, хоть по порядковому номеру тега, так что ID для этого не нужен.

Может конечно, но только кто сейчас чистый JavaScript использует в каких-то целях, отличных от учебных? А во всех фреймворках, быстрее всего найти элемент именно по id и это правильно.

Цитата(ksnk @ 28.4.2009, 23:43

)

и я считаю, что она предпочтительнее такой

дело твоё. а я считаю твой вариант стилистически не допустимым. на этом можно и остановиться, всё равно ведь каждый останется при своём мнении.