Comments 70
ну что еще сказать.. все верно.
прописные истины
прописные истины
Прямо 36 заповедей =)
Интересно узнать, как автор относится к верстке элементов форм с помощью списков определений...
Переводчику большое спасибо за интересный материал)
Интересно узнать, как автор относится к верстке элементов форм с помощью списков определений...
Переводчику большое спасибо за интересный материал)
а почему списки определений?
семантика за уши притягивается.
семантика за уши притягивается.
мне кажется, что использование этих элементов позволяет снизить количество кода =)
Возможно, что только кажется)
Возможно, что только кажется)
ну если снижать количество кода, то достаточно использовать только input'ы и label'ы.
А на примере можно, как список определений помогает?
А на примере можно, как список определений помогает?
Снижать количество кода в рамках дизайна =)
А дизайнеры... они такой народ, что любят все усложнять))
Конечно, в самом примитивном случае достаточно использовать базовые элементы, но, если речь идет о каких-то «наворотах», то использование позволяет избавиться от многих проблем. Так элемент содержит название поля ввода, а собственно само поле ввода.Внедрение в код дополнительных классов минимально.
Повторюсь, что все это справедливо для случаев более-менее сложных форм.
А дизайнеры... они такой народ, что любят все усложнять))
Конечно, в самом примитивном случае достаточно использовать базовые элементы, но, если речь идет о каких-то «наворотах», то использование позволяет избавиться от многих проблем. Так элемент содержит название поля ввода, а собственно само поле ввода.Внедрение в код дополнительных классов минимально.
Повторюсь, что все это справедливо для случаев более-менее сложных форм.
30.LABELможет содержать более одного поля ввода.
Вот этого не знал, спасибо
однако в FF(+SeaMonkey) и Safari это не проходит!!!
когда становишься на второе и последующие поля, курсор перескакивает на поле, которое в коде идет первым
так что считаю этот пункт правдивым тока для IE и Opera, :) что не есть гут, - будьте осторожны!!! все пробуйте на себе... :)
когда становишься на второе и последующие поля, курсор перескакивает на поле, которое в коде идет первым
так что считаю этот пункт правдивым тока для IE и Opera, :) что не есть гут, - будьте осторожны!!! все пробуйте на себе... :)
Спецификация HTML 4.0
Рекомендация W3C 18 декабря 1997
17.9.1 Элемент LABEL
Чтобы неявно связать метку с другим управляющим элементом, этот управляющий элемент должен находиться в элементе LABEL. В таком случае элемент LABEL может содержать только один управляющий элемент.
т.е. применительно с посту выше можно сказать что ИЕ и Opera как всегда не "полностью" придерживаются спецификаций...
Рекомендация W3C 18 декабря 1997
17.9.1 Элемент LABEL
Чтобы неявно связать метку с другим управляющим элементом, этот управляющий элемент должен находиться в элементе LABEL. В таком случае элемент LABEL может содержать только один управляющий элемент.
т.е. применительно с посту выше можно сказать что ИЕ и Opera как всегда не "полностью" придерживаются спецификаций...
это исправляется с помощью атрибута tabindex
Спасибо за перевод!
Было совсем бы замечательно, если бы были простейшие иллюстрации тезисов.
Было совсем бы замечательно, если бы были простейшие иллюстрации тезисов.
- Атрибут NAME устарел, используйте вместо него ID.
- NAME и ID. NAME используется для серверной части, ID — для клиентской. Чтобы избежать конфликтов ID, можно использовать для них значений «название формы-название поля».
Определились бы, устарел или для серверной части.
- NAME и ID. NAME используется для серверной части, ID — для клиентской. Чтобы избежать конфликтов ID, можно использовать для них значений «название формы-название поля».
Определились бы, устарел или для серверной части.
раньше name использовался для поиска элемента после # в адресе. сейчас для этой цели используется id.
name это по-сути аттрибут обязательный, id — нет.
name на странице может повторяться, id — нет
т.е. если у вас есть несколько схожих форм (отличающихся отсутствием/наличием некоторых полей, но в остальном совпадающих), в которых есть ещё и лейблы, привязанные к полям через for, то id всем их элементам нужно задавать разные (если нужен), а name задавать для однозначных полей в разных формах можно одинаковый, и название аттрибутов, отправленных на сервер будут взяты из name'ов.
name это по-сути аттрибут обязательный, id — нет.
name на странице может повторяться, id — нет
т.е. если у вас есть несколько схожих форм (отличающихся отсутствием/наличием некоторых полей, но в остальном совпадающих), в которых есть ещё и лейблы, привязанные к полям через for, то id всем их элементам нужно задавать разные (если нужен), а name задавать для однозначных полей в разных формах можно одинаковый, и название аттрибутов, отправленных на сервер будут взяты из name'ов.
да я в курсе, тем не менее.
- name это по-сути аттрибут обязательный, id — нет.
- Атрибут NAME устарел, используйте вместо него ID.
приходим к противоречию. Обязательный элемент, но устарел :)
- name это по-сути аттрибут обязательный, id — нет.
- Атрибут NAME устарел, используйте вместо него ID.
приходим к противоречию. Обязательный элемент, но устарел :)
Вот тут я согласен. Пункт 4-ре как минимум странен. Уж для полей ввода мы от name никуда не денемся. Для унификации доступа из js можно использовать prototype и т.д., но все равно иногда просто "дергаюсь" - хочется чтоб на сервере id читался)
Не знаю может только мне так кажется, но хотя идея разграничить эти идентификаторы правильна... все же если name не задан, к примеру... можно было бы id то и послать.
Не знаю может только мне так кажется, но хотя идея разграничить эти идентификаторы правильна... все же если name не задан, к примеру... можно было бы id то и послать.
Да, абсолютно точно.
для формы - устарел
для inputов - нет
для inputов - нет
Насколько я понял первый тезис относится к формам.
Второй - к полям Input.
Если верить впередистоящим пунктам.
Второй - к полям Input.
Если верить впередистоящим пунктам.
UFO just landed and posted this here
Для любителей поизвращацца и оригинальных эффектов fieldset вкладываем в legend =)
Ничего нового.
круто, спасибо
По переводу:
п. 21 непонятен целиком.
п. 22 - "селективная кнопка" кажется не самым удачным переводом ;)
А сам доклад, похоже, будут читать в ближайшем детсаду.
п. 21 непонятен целиком.
п. 22 - "селективная кнопка" кажется не самым удачным переводом ;)
А сам доклад, похоже, будут читать в ближайшем детсаду.
Меня вот тоже коробит от селективной кнопки.
Но какие у вас есть предложения по переводу радиобаттона? :) Я вот так ничего лучше "переключателя" не придумал. Но и переключатель как-то тоже смотрится не очень.
Но какие у вас есть предложения по переводу радиобаттона? :) Я вот так ничего лучше "переключателя" не придумал. Но и переключатель как-то тоже смотрится не очень.
Не только Вы, но и MS не придумал лучше. По их версии тоже "переключатель". Понятно, что их вариант не есть истина в последней инстанции, но какие-то общие терминологические соглашения должны быть? Почему бы тогда не от MS, раз они сделали эту работу? Вот она, кстати:
http://msdn.microsoft.com/library/en-us/dnwue/html/RUS_word_list.htm
По поводу радиобаттонов техрайтеры уже много копий сломали. Чего только не предлагалось..
http://msdn.microsoft.com/library/en-us/dnwue/html/RUS_word_list.htm
По поводу радиобаттонов техрайтеры уже много копий сломали. Чего только не предлагалось..
странная статья (или это перевод так её трансформировал?)
"Внутри формы можно использовать P или DIV."
А img, span - не рекомендуется?
"Выставление размера шрифта в 62.5% сбрасывает размер шрифта в 10 пикселей для всех браузеров."
Тобишь, если у меня допустим 100 пиксельный шрифт на странице, то даже в этом случае размер шрифта сбросится в 10 пикселей для всех браузеров?
"BUTTON достаточно хорошо отображается, как блок."
о_О
может, имелось ввиду, что button достаточно хорошо отображается как блочный элемент?
Но в любом случае, эта строчка - явно тянет на комплимент button'у, что он достаточно хорошо отображается ;)
"Для изменения оформления у элемента SELECT можно использовать замену списков (Select Replacement)."
Абсолютно непонятная строчка.
"Можно убрать названия полей со страницы, сместив их сильно влево. Это позволит увеличить доступность страницы"
Доступность для понимания? Или что? Тоже совершенно непонятно, что имеется ввиду.
"Используйте атрибут CLASS для определения связей между элементами формы."
Тоже непонятно - как?
"Вложенные LABEL можно использовать для флажков и селективных кнопок. С помощью них можно выставить требуемую ширину."
Ширину чего? Флажков и селективных кнопок?
"IE при использовании нескольких кнопок они все отправляют данные одновременно. "
А в других браузерах отправляют данные последовательно?
Ну и вообще, кнопки данные не отправляют. Они могут дать команду форме, чтобы та отправила свои данные, да. Но сама по себе кнопка - сидит спокойно на странице и никуда ничего не отправляет.
В общем, некоторые пункты совершенно сумбурные =/
"Внутри формы можно использовать P или DIV."
А img, span - не рекомендуется?
"Выставление размера шрифта в 62.5% сбрасывает размер шрифта в 10 пикселей для всех браузеров."
Тобишь, если у меня допустим 100 пиксельный шрифт на странице, то даже в этом случае размер шрифта сбросится в 10 пикселей для всех браузеров?
"BUTTON достаточно хорошо отображается, как блок."
о_О
может, имелось ввиду, что button достаточно хорошо отображается как блочный элемент?
Но в любом случае, эта строчка - явно тянет на комплимент button'у, что он достаточно хорошо отображается ;)
"Для изменения оформления у элемента SELECT можно использовать замену списков (Select Replacement)."
Абсолютно непонятная строчка.
"Можно убрать названия полей со страницы, сместив их сильно влево. Это позволит увеличить доступность страницы"
Доступность для понимания? Или что? Тоже совершенно непонятно, что имеется ввиду.
"Используйте атрибут CLASS для определения связей между элементами формы."
Тоже непонятно - как?
"Вложенные LABEL можно использовать для флажков и селективных кнопок. С помощью них можно выставить требуемую ширину."
Ширину чего? Флажков и селективных кнопок?
"IE при использовании нескольких кнопок они все отправляют данные одновременно. "
А в других браузерах отправляют данные последовательно?
Ну и вообще, кнопки данные не отправляют. Они могут дать команду форме, чтобы та отправила свои данные, да. Но сама по себе кнопка - сидит спокойно на странице и никуда ничего не отправляет.
В общем, некоторые пункты совершенно сумбурные =/
Устанавливайте вид курсора в указатель, чтобы обозначить возможное действие для кнопок.
Я один ненавижу, когда так делают?
Вы не одиноки.
я с вами. кто ещё не знает, что на кнопки нажимать можно?
при попадании на кнопки меня больше устраивает острый курсор чем толстый палец.
при попадании на кнопки меня больше устраивает острый курсор чем толстый палец.
UFO just landed and posted this here
Полностью согласен не надо менять курсор над обычными кнопками, т.к. они не ссылки.
И менять стиль кнопок "для красоты" тоже не нужно пользователь быстрее найдёт на странице привычную для него кнопку, своим видом завмсимою от операционной системы и браузера.
И менять стиль кнопок "для красоты" тоже не нужно пользователь быстрее найдёт на странице привычную для него кнопку, своим видом завмсимою от операционной системы и браузера.
нет, не один.
еще можно вспомнить, что у браузеров от Microsoft кнопка отображается абсолютно по своему :) что input, что button.
button целиком и полностью можно оформлять средствами css, и ИЕ это нормально понимает, по крайней мере 6 и 7.
отлично! спасибо.
action кстати может быть пустым. Это очень удобно.
У стандартного селекта в ИЕ цвет бордера хрен изменишь.
У баттона в фокусе ИЕ нарисует черный бордер. Не заменив, а вдавив "ваш" бордер вовнутрь кнопки.
сам недавно с этим столкнулся. Есть какие-то методы решения?
Заменить кнопки на с соответствующим случаю джаваскриптом на онклике.
тьфу, балда... то есть:
Заменить кнопки на <a href="#"> с соответствующим случаю джаваскриптом на онклике.
Заменить кнопки на <a href="#"> с соответствующим случаю джаваскриптом на онклике.
Этим убивается доступность и удобство пользования страницей. И всё только ради мелкого украшательства... Стоит ли?
а без js пользователь не сможет ей воспользоваться ...
конешн таких мало - но может оставить кнопки такими - как рисует их браузер?
ведь в зависимости от ОС, стилей окон, браузера, и еще чего нибудь - кнопки будут выглядеть совсем по разному, но будут на 100% узнаваемы пользователем.
конешн таких мало - но может оставить кнопки такими - как рисует их браузер?
ведь в зависимости от ОС, стилей окон, браузера, и еще чего нибудь - кнопки будут выглядеть совсем по разному, но будут на 100% узнаваемы пользователем.
Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.
Вообще то он может быть не указан.
Вообще то он может быть не указан.
ROWS и COLS обязательны для TEXTAREA, разве?
именно. Читаем спецификацию
Но в IE и в FF формы с textarea без rows и cols успешно отправляются. Может Вы хотите сказать, что они обязательны по спецификации, но необязательно обязательны для браузеров?
PS пока я спецификацию не читал]]]
PS пока я спецификацию не читал]]]
я хочу сказать ровно то, что уже сказал. Тем, кто отдает отображение свои страниц на откуп браузерам, руки отрывать нужно и компьютеры с интернетом отбирать. Вы проверяли вашу страницу во всех сотнях существующих пользовательских агентов, чтобы сомневаться в том, что обязательные по спецификации поля является лишь рекомендуемыми?
Sign up to leave a comment.
Практический HTML: учимся любить формы