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

Original author: LukeW
  • Translation
Примечание: ниже находится перевод тезисов доклада «Learning to Love Forms» с конференции «WebVisions 2007» (автор Aaron Gustafson). Докладчик рассказывает о верстке форм, используя корректный и эффективный XHTML/CSS-код.

  • Формы — это необходимое зло. Людям свойственно усложнять формы, хотя они могут быть представлены весьма просто.
  • Рассматривайте верстку форм как создание обычного XHTML-кода. Но будьте готовы к несоответствиям со стороны браузеров и применению хаков.
  • Разбивайте сложные формы на несколько простых частей.
  • Старайтесь обеспечивать максимальную семантическую ценность кода.
  • Не усложняйте дизайн форм.


XHTML & CSS приемы



  1. Элемент FORM создает форму.
  2. Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.
  3. По умолчанию METHOD выставляется в GET.
  4. Атрибут NAME устарел, используйте вместо него ID.
  5. Элемент FIELDSET используется для группировки связанных полей формы. Может быть вложенным.
  6. Элемент LEGEND должен использоваться, чтобы обеспечить заголовок для FIELDSET.
  7. Внутри формы можно использовать P или DIV. Если требуется обеспечить последовательность полей формы, можно воспользоваться OL (нумерованный список). Это поможет сохранить порядок расположения элементов.
  8. Элемент INPUT является стандартным полем ввода.
  9. NAME и ID. NAME используется для серверной части, ID — для клиентской. Чтобы избежать конфликтов ID, можно использовать для них значений «название формы-название поля».
  10. TEXTAREA — поле ввода с несколькими строками. Обязательные атрибуты ROWS и COLS.
  11. Элемент LABEL обеспечивает связь текста с полем ввода. Внутренняя связь подразумевает внесение поля ввода в LABEL (можно использовать для соответствующего оформления). Внешняя связь достигается назначением для атрибута FOR у LABEL значения, равного ID у соответствующего поля ввода.
  12. Кнопки используются для обработки событий формы. Применяются элементы INPUT и BUTTON. Использование BUTTON более гибко и обеспечивает больше функций.
  13. Выставление размера шрифта в 62.5% сбрасывает размер шрифта в 10 пикселей для всех браузеров.
  14. Отображение LEGEND очень сильно варьируется от браузера к браузеру. Отступ снизу обрабатывается корректно, поля очень часто игнорируются.
  15. Устанавливайте вид курсора в указатель (pointer, прим.: input.button {cursor:hand;cursor:pointer}), чтобы обозначить возможное действие для кнопок.
  16. Вывод текста: можно использовать label:after для выставления типа после названий полей (прим. IE не поддерживает :after).
  17. Кнопки: INPUT по умолчанию отображаются как системные элементы для текущей ОС. BUTTON достаточно хорошо отображается, как блочный элемент. С помощью стилей и картинок можно добиться любого оформления. BUTTON может содержать, практически, любой элемент: P, UL и т. д. В IE при использовании нескольких кнопок они все отправляют данные одновременно. В результате, для корректной обработки нужен JavaScript для нескольких BUTTON на странице.
  18. SELECT позволяет выбрать один или несколько OPTION. Атрибут VALUE является опциональным (по умолчанию, отправляется содержание OPTION).
  19. OPTGROUP может быть использовать для группировки OPTION в SELECT. Отображается как список с отступом. OPTGROUP не может быть вложенным.
  20. Обычно ширина SELECT на 4 пикселя больше той, что вы определяете для этого элемента.
  21. Для изменения оформления у элемента SELECT можно использовать замену списков (Select Replacement). Допускается также вставка фоновых картинок (для корректной работы потребуется включенный JavaScript).
  22. FIELDSET будет хорошим решением для организации группы селективных кнопок или флажков. Используйте LEGEND для вывода вопроса или утверждения (как заголовка к такой группе). Списки UL также могут быть достойным решением. Для оформления в IE6 потребуются внутренние хаки.
  23. Выставляйте прозрачный цвет фона для селективных кнопок, чтобы избежать бага в IE (отображается серый цвет фона).
  24. Чтобы оформить названия к селективным кнопкам используйте относительное позиционирование (position:relative) и примерно 2 пикселя для верхнего отступа (padding-top:2px).
  25. LEGEND игнорирует атрибут WIDTH. Для выставления правильного размера можно использовать вложенный элемент SPAN.
  26. В формах поиска в методе лучше указывать GET, чтобы результата можно было добавить в закладки (bookmark).
  27. При указании на более, чем одно поле можно использовать LEGEND вместо LABEL.
  28. Можно убрать названия полей со страницы, сместив их сильно влево. Это позволит увеличить доступность страницы (прим.: для текстовых браузеров и других пользовательских агентов).
  29. Используйте атрибут CLASS для определения связей между элементами формы.
  30. LABEL может содержать более одного поля ввода.
  31. Можно использовать DD для группировки элементов формы, когда одно из полей ввода используется, как селектор верхнего уровня.
  32. Вложенные LABEL можно использовать для флажков и селективных кнопок. С помощью них можно выставить требуемую ширину.
  33. Обязательные поля ввода. Можно использовать элемент ABBR для обозначения звездочки у обязательных полей. Можно использовать всплывающую подсказку через атрибут TITLE для пояснения полей формы. ABBR игнориуется в IE6.
  34. Подсказки. Могут быть вложены в EM. С помощью CSS можно добиться перекрытия текстом подсказки поля ввода (прим.: это еще зачем? так же данные вводить неудобно).
  35. Сообщения об ошибках. Лучше обеспечить их появление максимально быстро, чтобы пользователи их заметили. Можно использовать STRONG внутри LABEL. Сообщения должны быть оформлены в виде простого текста об ошибке и способах ее исправления. Также могут содержать ссылки на то место, где прозошла ошибка (прим.: наверное, имеется в виду, в частности, перевод фокуса сразу на поле ввода, которое требуется исправить).
  36. Можно использовать JavaScript для скрытия сообщения об ошибке, как только она была исправлена.


Спасибо всем, кто ознакомился с переводом тезисов. Буду рад комментариям.

Web Optimizator: проверка скорости загрузки сайтов

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 70

    0
    ну что еще сказать.. все верно.
    прописные истины
      0
      Прямо 36 заповедей =)
      Интересно узнать, как автор относится к верстке элементов форм с помощью списков определений...
      Переводчику большое спасибо за интересный материал)
        0
        а почему списки определений?
        семантика за уши притягивается.
          +1
          мне кажется, что использование этих элементов позволяет снизить количество кода =)
          Возможно, что только кажется)
            0
            ну если снижать количество кода, то достаточно использовать только input'ы и label'ы.
            А на примере можно, как список определений помогает?
              0
              Снижать количество кода в рамках дизайна =)
              А дизайнеры... они такой народ, что любят все усложнять))
              Конечно, в самом примитивном случае достаточно использовать базовые элементы, но, если речь идет о каких-то «наворотах», то использование позволяет избавиться от многих проблем. Так элемент содержит название поля ввода, а собственно само поле ввода.Внедрение в код дополнительных классов минимально.
              Повторюсь, что все это справедливо для случаев более-менее сложных форм.
                0
                совершенно естественно давать id каждому элементу input , с тем, чтобы соответствующему элементу label дать for. Так если у каждого есть id, то к каждому можно достучаться из css
                  0
                  и зачем плодить эти id в css? =) по-моему, вполне достаточно того факта, что они есть в html
        0
        30. LABEL может содержать более одного поля ввода.

        Вот этого не знал, спасибо
          +2
          однако в FF(+SeaMonkey) и Safari это не проходит!!!

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

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

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

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

            Было совсем бы замечательно, если бы были простейшие иллюстрации тезисов.
              +2
              - Атрибут NAME устарел, используйте вместо него ID.

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

              Определились бы, устарел или для серверной части.
                0
                раньше name использовался для поиска элемента после # в адресе. сейчас для этой цели используется id.
                name это по-сути аттрибут обязательный, id — нет.
                name на странице может повторяться, id — нет
                т.е. если у вас есть несколько схожих форм (отличающихся отсутствием/наличием некоторых полей, но в остальном совпадающих), в которых есть ещё и лейблы, привязанные к полям через for, то id всем их элементам нужно задавать разные (если нужен), а name задавать для однозначных полей в разных формах можно одинаковый, и название аттрибутов, отправленных на сервер будут взяты из name'ов.
                  0
                  да я в курсе, тем не менее.
                  - name это по-сути аттрибут обязательный, id — нет.
                  - Атрибут NAME устарел, используйте вместо него ID.
                  приходим к противоречию. Обязательный элемент, но устарел :)
                    0
                    Вот тут я согласен. Пункт 4-ре как минимум странен. Уж для полей ввода мы от name никуда не денемся. Для унификации доступа из js можно использовать prototype и т.д., но все равно иногда просто "дергаюсь" - хочется чтоб на сервере id читался)

                    Не знаю может только мне так кажется, но хотя идея разграничить эти идентификаторы правильна... все же если name не задан, к примеру... можно было бы id то и послать.
                      0
                      Читайте внимательнее. В первом случае говорится о тэге FORM - там NAME устарел. Во втором случае речь идет об элементах формы - INPUT и т.д. там NAME необходим
                        +1
                        Я внимательно читаю. Это уже додумывать надо, что весь пункт 4-ре у нас в контексте пункта 1. Как минимум неправильное оформление этого списка имеет место.
                  0
                  Да, абсолютно точно.
                    +1
                    для формы - устарел
                    для inputов - нет
                      0
                      Насколько я понял первый тезис относится к формам.
                      Второй - к полям Input.
                      Если верить впередистоящим пунктам.
                    • UFO just landed and posted this here
                        0
                        Для любителей поизвращацца и оригинальных эффектов fieldset вкладываем в legend =)
                          +1
                          Ничего нового.
                            –11
                            Есть ещё желающие заминусовать ?
                              0
                              Ну и зачем это писать? %)
                              0
                              круто, спасибо
                                0
                                По переводу:

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

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

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

                                    По поводу радиобаттонов техрайтеры уже много копий сломали. Чего только не предлагалось..
                                      +1
                                      Ох, не ту ссылку дал, устаревшую. Вот правильная:

                                      http://www.microsoft.com/globaldev/tools/MILSGlossary.mspx
                                        0
                                        вот же...
                                        назвать радиокнопкой - и нет проблем, всем понятно, что это.
                                          0
                                          Это жаргонизм, и он не везде приемлем.
                                    0
                                    странная статья (или это перевод так её трансформировал?)

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

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

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

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

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

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

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

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


                                    В общем, некоторые пункты совершенно сумбурные =/
                                      +1
                                      И вот это:
                                      15. Устанавливайте вид курсора в указатель (pointer, прим.: input.button {cursor:hand;cursor:pointer}).

                                      непонятно зачем. Думаю кнопка должна выглядеть так как она выглядит в ОС, а превращать её в ссылку никчему.
                                        0
                                        да, указатель разумеется на кнопке лишний, но тут по крайней мере понятно, что имеет ввиду автор :)
                                        а в тех что я описал - ну просто ж непонятно совершенно, что имеется ввиду
                                      +7
                                      Устанавливайте вид курсора в указатель, чтобы обозначить возможное действие для кнопок.

                                      Я один ненавижу, когда так делают?
                                        0
                                        Вы не одиноки.
                                          0
                                          я с вами. кто ещё не знает, что на кнопки нажимать можно?
                                          при попадании на кнопки меня больше устраивает острый курсор чем толстый палец.
                                            0
                                            А я вот терпеть не могу когда курсор над кнопками ведет себя при наведении не так как над ссылками. Уж пофиг острый он или тупой.
                                              0
                                              у меня подсознательно, когда вижу руку при наведении на кнопку, срабатывает логика веб-програмера — мне на мгновение кажется, что это не кнопка, а изображение кнопки! вот почему кодер сделал такой курсор в этом месте.
                                          • UFO just landed and posted this here
                                              +1
                                              преступление - делать такие кнопки
                                              +1
                                              Полностью согласен — не надо менять курсор над обычными кнопками, т.к. они не ссылки.
                                              И менять стиль кнопок "для красоты" тоже не нужно — пользователь быстрее найдёт на странице привычную для него кнопку, своим видом завмсимою от операционной системы и браузера.
                                                0
                                                нет, не один.
                                                0
                                                еще можно вспомнить, что у браузеров от Microsoft кнопка отображается абсолютно по своему :) что input, что button.
                                                  0
                                                  button целиком и полностью можно оформлять средствами css, и ИЕ это нормально понимает, по крайней мере 6 и 7.
                                                    0
                                                    Если мне кто-нибудь напишет css-код, чтобы хотя бы сбросить padding'и и ширину кнопок одновременно и в 6 и в 7м ИЯх - буду безмерно благодарен. У меня не получилось одновременно - плюнул, нарисовал ссылкой.
                                                      0
                                                      Лично я использую обнуление css почти по Эрику Мейеру. После этого можно задавать свои свойства, которые работают для любого браузера.
                                                  0
                                                  отлично! спасибо.
                                                    0
                                                    action кстати может быть пустым. Это очень удобно.
                                                      0
                                                      У стандартного селекта в ИЕ цвет бордера хрен изменишь.
                                                        0
                                                        У баттона в фокусе ИЕ нарисует черный бордер. Не заменив, а вдавив "ваш" бордер вовнутрь кнопки.
                                                          0
                                                          сам недавно с этим столкнулся. Есть какие-то методы решения?
                                                              0
                                                              тьфу, балда... то есть:
                                                              Заменить кнопки на <a href="#"> с соответствующим случаю джаваскриптом на онклике.
                                                                0
                                                                Этим убивается доступность и удобство пользования страницей. И всё только ради мелкого украшательства... Стоит ли?
                                                                  0
                                                                  Иногда приходилось. "Мне не понравилось, меня тошнило", но все же это, как мне кажется, не так ужасно, как упомянутая в постинге процедура "Select Replacement".
                                                                    0
                                                                    Это правда. :)
                                                                  0
                                                                  а без js пользователь не сможет ей воспользоваться ...
                                                                  конешн таких мало - но может оставить кнопки такими - как рисует их браузер?
                                                                  ведь в зависимости от ОС, стилей окон, браузера, и еще чего нибудь - кнопки будут выглядеть совсем по разному, но будут на 100% узнаваемы пользователем.
                                                                    0
                                                                    О том и речь - полноценно отстайлить кнопку никак нельзя. Я применял вместо кнопки линк в качестве крайней меры и вовсе не на трехстраничном вебсайте, а в веб-приложении с гарантированно включенным JS.
                                                            0
                                                            Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.

                                                            Вообще то он может быть не указан.
                                                              0
                                                              Вообщето, в соответствии со спецификациями HTML и XHTML, этот атрибут является обязательным, другое дело, что он может быть пуст.
                                                              +1
                                                              Кому надо, вот слайды к докладу во Flash и PDF.
                                                              Ну, и ссылка на оригинал тезисов выступления.
                                                                0
                                                                ROWS и COLS обязательны для TEXTAREA, разве?
                                                                  0
                                                                  именно. Читаем спецификацию
                                                                    0
                                                                    Но в IE и в FF формы с textarea без rows и cols успешно отправляются. Может Вы хотите сказать, что они обязательны по спецификации, но необязательно обязательны для браузеров?
                                                                    PS пока я спецификацию не читал]]]
                                                                      0
                                                                      я хочу сказать ровно то, что уже сказал. Тем, кто отдает отображение свои страниц на откуп браузерам, руки отрывать нужно и компьютеры с интернетом отбирать. Вы проверяли вашу страницу во всех сотнях существующих пользовательских агентов, чтобы сомневаться в том, что обязательные по спецификации поля является лишь рекомендуемыми?

                                                                Only users with full accounts can post comments. Log in, please.