VPF::Валидатор ругается на неправильное положение label

Aliance

Дата 20.4.2009, 09:27 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

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

Код


<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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

ksnk

Дата 20.4.2009, 09:42 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Вот такой текст ( из www.htmlbook.ru ++) валидируется вот этим валидатором.

Код


<!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. ссылку на валидатор поправил..

Это сообщение отредактировал(а) ksnk - 20.4.2009, 10:15

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aliance

Дата 20.4.2009, 09:45 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

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

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

Код


        <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>

Это сообщение отредактировал(а) Aliance - 20.4.2009, 09:46

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

ksnk

Дата 20.4.2009, 10:02 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aliance

Дата 20.4.2009, 10:11 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Код


#authorization-form {
    display: block;
}

спасет?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

ksnk

Дата 20.4.2009, 10:18 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aliance

Дата 20.4.2009, 10:27 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Aliance

Дата 20.4.2009, 22:14 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

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

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

source777

Дата 28.4.2009, 20:15 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1878
Регистрация: 12.3.2007

Репутация: 1
Всего: 56

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

source777

Дата 28.4.2009, 20:44 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1878
Регистрация: 12.3.2007

Репутация: 1
Всего: 56

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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'ями тоже как-то не приходится...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

source777

Дата 29.4.2009, 11:16 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1878
Регистрация: 12.3.2007

Репутация: 1
Всего: 56

Цитата(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

)

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

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

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »