Практический HTML: учимся любить формы

[Butylski]

ну что еще сказать.. все верно.
прописные истины

[kadatsky]

Прямо 36 заповедей =)
Интересно узнать, как автор относится к верстке элементов форм с помощью списков определений...
Переводчику большое спасибо за интересный материал)

[chx]

а почему списки определений?
семантика за уши притягивается.

[kadatsky]

мне кажется, что использование этих элементов позволяет снизить количество кода =)
Возможно, что только кажется)

[chx]

ну если снижать количество кода, то достаточно использовать только input'ы и label'ы.
А на примере можно, как список определений помогает?

[kadatsky]

Снижать количество кода в рамках дизайна =)
А дизайнеры... они такой народ, что любят все усложнять))
Конечно, в самом примитивном случае достаточно использовать базовые элементы, но, если речь идет о каких-то «наворотах», то использование позволяет избавиться от многих проблем. Так элемент содержит название поля ввода, а собственно само поле ввода.Внедрение в код дополнительных классов минимально.
Повторюсь, что все это справедливо для случаев более-менее сложных форм.

[chx]

совершенно естественно давать id каждому элементу input , с тем, чтобы соответствующему элементу label дать for. Так если у каждого есть id, то к каждому можно достучаться из css

[kadatsky]

и зачем плодить эти id в css? =) по-моему, вполне достаточно того факта, что они есть в html

[Devgru]

30. LABEL может содержать более одного поля ввода.

Вот этого не знал, спасибо

[zealous]

однако в FF(+SeaMonkey) и Safari это не проходит!!!

когда становишься на второе и последующие поля, курсор перескакивает на поле, которое в коде идет первым

так что считаю этот пункт правдивым тока для IE и Opera, :) что не есть гут, - будьте осторожны!!! все пробуйте на себе... :)

[zealous]

Спецификация HTML 4.0
Рекомендация W3C 18 декабря 1997
17.9.1 Элемент LABEL
Чтобы неявно связать метку с другим управляющим элементом, этот управляющий элемент должен находиться в элементе LABEL. В таком случае элемент LABEL может содержать только один управляющий элемент.

т.е. применительно с посту выше можно сказать что ИЕ и Opera как всегда не "полностью" придерживаются спецификаций...

[latrekc]

это исправляется с помощью атрибута tabindex

[zealous]

а ты пробовал???

я - да, и если переходить просто клавишей TAB - то и без tabindex переходит, а если мышкой ты на второе поле в FF и описанных выше не встанешь

[d1gital_love]

Спасибо за перевод!

Было совсем бы замечательно, если бы были простейшие иллюстрации тезисов.

[Uznick]

- Атрибут NAME устарел, используйте вместо него ID.

- NAME и ID. NAME используется для серверной части, ID — для клиентской. Чтобы избежать конфликтов ID, можно использовать для них значений «название формы-название поля».

Определились бы, устарел или для серверной части.

[Devgru]

раньше name использовался для поиска элемента после # в адресе. сейчас для этой цели используется id.
name это по-сути аттрибут обязательный, id — нет.
name на странице может повторяться, id — нет
т.е. если у вас есть несколько схожих форм (отличающихся отсутствием/наличием некоторых полей, но в остальном совпадающих), в которых есть ещё и лейблы, привязанные к полям через for, то id всем их элементам нужно задавать разные (если нужен), а name задавать для однозначных полей в разных формах можно одинаковый, и название аттрибутов, отправленных на сервер будут взяты из name'ов.

[Uznick]

да я в курсе, тем не менее.
- name это по-сути аттрибут обязательный, id — нет.
- Атрибут NAME устарел, используйте вместо него ID.
приходим к противоречию. Обязательный элемент, но устарел :)

[Siddthartha]

Вот тут я согласен. Пункт 4-ре как минимум странен. Уж для полей ввода мы от name никуда не денемся. Для унификации доступа из js можно использовать prototype и т.д., но все равно иногда просто "дергаюсь" - хочется чтоб на сервере id читался)

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

[maximwirt]

Читайте внимательнее. В первом случае говорится о тэге FORM - там NAME устарел. Во втором случае речь идет об элементах формы - INPUT и т.д. там NAME необходим

[Siddthartha]

Я внимательно читаю. Это уже додумывать надо, что весь пункт 4-ре у нас в контексте пункта 1. Как минимум неправильное оформление этого списка имеет место.

[killerdesign]

Да, абсолютно точно.

[steel]

для формы - устарел
для inputов - нет

[nertz]

Насколько я понял первый тезис относится к формам.
Второй - к полям Input.
Если верить впередистоящим пунктам.

[shizo]

Для любителей поизвращацца и оригинальных эффектов fieldset вкладываем в legend =)

[n1mnul]

Ничего нового.

[n1mnul]

Есть ещё желающие заминусовать ?

[Ras_Dan]

Ну и зачем это писать? %)

[heoh]

круто, спасибо

[iyx]

По переводу:

п. 21 непонятен целиком.
п. 22 - "селективная кнопка" кажется не самым удачным переводом ;)

А сам доклад, похоже, будут читать в ближайшем детсаду.

[steel]

Меня вот тоже коробит от селективной кнопки.
Но какие у вас есть предложения по переводу радиобаттона? :) Я вот так ничего лучше "переключателя" не придумал. Но и переключатель как-то тоже смотрится не очень.

[iyx]

Не только Вы, но и MS не придумал лучше. По их версии тоже "переключатель". Понятно, что их вариант не есть истина в последней инстанции, но какие-то общие терминологические соглашения должны быть? Почему бы тогда не от MS, раз они сделали эту работу? Вот она, кстати:

http://msdn.microsoft.com/library/en-us/dnwue/html/RUS_word_list.htm

По поводу радиобаттонов техрайтеры уже много копий сломали. Чего только не предлагалось..

[iyx]

Ох, не ту ссылку дал, устаревшую. Вот правильная:

http://www.microsoft.com/globaldev/tools/MILSGlossary.mspx

[chx]

вот же...
назвать радиокнопкой - и нет проблем, всем понятно, что это.

[iyx]

Это жаргонизм, и он не везде приемлем.

[steel]

странная статья (или это перевод так её трансформировал?)

"Внутри формы можно использовать P или DIV."
А img, span - не рекомендуется?

"Выставление размера шрифта в 62.5% сбрасывает размер шрифта в 10 пикселей для всех браузеров."
Тобишь, если у меня допустим 100 пиксельный шрифт на странице, то даже в этом случае размер шрифта сбросится в 10 пикселей для всех браузеров?

"BUTTON достаточно хорошо отображается, как блок."
о_О
может, имелось ввиду, что button достаточно хорошо отображается как блочный элемент?
Но в любом случае, эта строчка - явно тянет на комплимент button'у, что он достаточно хорошо отображается ;)

"Для изменения оформления у элемента SELECT можно использовать замену списков (Select Replacement)."
Абсолютно непонятная строчка.

"Можно убрать названия полей со страницы, сместив их сильно влево. Это позволит увеличить доступность страницы"
Доступность для понимания? Или что? Тоже совершенно непонятно, что имеется ввиду.

"Используйте атрибут CLASS для определения связей между элементами формы."
Тоже непонятно - как?

"Вложенные LABEL можно использовать для флажков и селективных кнопок. С помощью них можно выставить требуемую ширину."
Ширину чего? Флажков и селективных кнопок?

"IE при использовании нескольких кнопок они все отправляют данные одновременно. "
А в других браузерах отправляют данные последовательно?
Ну и вообще, кнопки данные не отправляют. Они могут дать команду форме, чтобы та отправила свои данные, да. Но сама по себе кнопка - сидит спокойно на странице и никуда ничего не отправляет.


В общем, некоторые пункты совершенно сумбурные =/

[dyakov]

И вот это:
15. Устанавливайте вид курсора в указатель (pointer, прим.: input.button {cursor:hand;cursor:pointer}).

непонятно зачем. Думаю кнопка должна выглядеть так как она выглядит в ОС, а превращать её в ссылку никчему.

[steel]

да, указатель разумеется на кнопке лишний, но тут по крайней мере понятно, что имеет ввиду автор :)
а в тех что я описал - ну просто ж непонятно совершенно, что имеется ввиду

[Nightquest]

Устанавливайте вид курсора в указатель, чтобы обозначить возможное действие для кнопок.

Я один ненавижу, когда так делают?

[proxor]

Вы не одиноки.

[alexbig]

я с вами. кто ещё не знает, что на кнопки нажимать можно?
при попадании на кнопки меня больше устраивает острый курсор чем толстый палец.

[Siddthartha]

А я вот терпеть не могу когда курсор над кнопками ведет себя при наведении не так как над ссылками. Уж пофиг острый он или тупой.

[alexbig]

у меня подсознательно, когда вижу руку при наведении на кнопку, срабатывает логика веб-програмера — мне на мгновение кажется, что это не кнопка, а изображение кнопки! вот почему кодер сделал такой курсор в этом месте.

[chx]

преступление - делать такие кнопки

[fatal]

Полностью согласен — не надо менять курсор над обычными кнопками, т.к. они не ссылки.
И менять стиль кнопок "для красоты" тоже не нужно — пользователь быстрее найдёт на странице привычную для него кнопку, своим видом завмсимою от операционной системы и браузера.

[chx]

нет, не один.

[Alinaki]

еще можно вспомнить, что у браузеров от Microsoft кнопка отображается абсолютно по своему :) что input, что button.

[chx]

button целиком и полностью можно оформлять средствами css, и ИЕ это нормально понимает, по крайней мере 6 и 7.

[Alinaki]

Если мне кто-нибудь напишет css-код, чтобы хотя бы сбросить padding'и и ширину кнопок одновременно и в 6 и в 7м ИЯх - буду безмерно благодарен. У меня не получилось одновременно - плюнул, нарисовал ссылкой.

[chx]

Лично я использую обнуление css почти по Эрику Мейеру. После этого можно задавать свои свойства, которые работают для любого браузера.

[Erick_Flatcher]

отлично! спасибо.

[NLS]

action кстати может быть пустым. Это очень удобно.

[dimaniko]

У стандартного селекта в ИЕ цвет бордера хрен изменишь.

[dimaniko]

У баттона в фокусе ИЕ нарисует черный бордер. Не заменив, а вдавив "ваш" бордер вовнутрь кнопки.

[Larsz]

сам недавно с этим столкнулся. Есть какие-то методы решения?

[dimaniko]

Заменить кнопки на с соответствующим случаю джаваскриптом на онклике.

[dimaniko]

тьфу, балда... то есть:
Заменить кнопки на <a href="#"> с соответствующим случаю джаваскриптом на онклике.

[fatal]

Этим убивается доступность и удобство пользования страницей. И всё только ради мелкого украшательства... Стоит ли?

[dimaniko]

Иногда приходилось. "Мне не понравилось, меня тошнило", но все же это, как мне кажется, не так ужасно, как упомянутая в постинге процедура "Select Replacement".

[fatal]

Это правда. :)

[dfitiskin]

а без js пользователь не сможет ей воспользоваться ...
конешн таких мало - но может оставить кнопки такими - как рисует их браузер?
ведь в зависимости от ОС, стилей окон, браузера, и еще чего нибудь - кнопки будут выглядеть совсем по разному, но будут на 100% узнаваемы пользователем.

[dimaniko]

О том и речь - полноценно отстайлить кнопку никак нельзя. Я применял вместо кнопки линк в качестве крайней меры и вовсе не на трехстраничном вебсайте, а в веб-приложении с гарантированно включенным JS.

[Biollante]

Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.

Вообще то он может быть не указан.

[alkeeper]

Вообщето, в соответствии со спецификациями HTML и XHTML, этот атрибут является обязательным, другое дело, что он может быть пуст.

[fatal]

Кому надо, вот слайды к докладу во Flash и PDF.
Ну, и ссылка на оригинал тезисов выступления.

[indalive]

ROWS и COLS обязательны для TEXTAREA, разве?

[sunnybear]

именно. Читаем спецификацию

[indalive]

Но в IE и в FF формы с textarea без rows и cols успешно отправляются. Может Вы хотите сказать, что они обязательны по спецификации, но необязательно обязательны для браузеров?
PS пока я спецификацию не читал]]]

[sunnybear]

я хочу сказать ровно то, что уже сказал. Тем, кто отдает отображение свои страниц на откуп браузерам, руки отрывать нужно и компьютеры с интернетом отбирать. Вы проверяли вашу страницу во всех сотнях существующих пользовательских агентов, чтобы сомневаться в том, что обязательные по спецификации поля является лишь рекомендуемыми?