В продолжение статьи про то, как правильно верстать формы

Что такое форма?

...

[toc title=’Содержание’]

Как сделать форму удобной для вёрстки

Для того, чтобы сделать форму максимально гибкой для вёрстки необходимо:

  • использовать сам тег формы
  • использовать тэги fieldset и legend
  • использовать тэг label
  • использовать аттрибут title

Теги fieldset и legend

Эти тэги предназначены в большей степени для того, чтобы разделить различные участки формы, например, регистрационные данные и данные о длине волос.
Тэг fieldset сопровождается тэгом legend. При этом fieldset является блоком, содержащим все поля, а legend – описанием содержимого блока в шапке блока.

Описание блока ...

Тэг label

Тэг label принято использовать, как заголовок ínput’а. То есть около-ínput’ового текст.
При этом, удобно «класть» ínput внутрь ĺabel’а, потом проще сделать симметричную форму.

Описание блока ...

Аттрибут for тэга label используется для точной привязки в имени ínput’а. При этом этот аттрибут нужно обязательно заполнять, если не «класть» ínput внутрь ĺabel’а.

Описание блока ...

Аттрибут title

Если для какого-то ínput’а неохбодимо пояснение или другая дополнительная информация, то нужно писать её в атрибут title для этого input’а.
Таким образом получится «убить» двух зайцев:

  • подсказка при наведении на ínput
  • при помощи js можно вывести подсказка отдельно
  

Аттрибут tabindex

Многие веб-разработчики часто забывают или совсем не используют параметр tabindex, который определяет последовательность перехода между полями при нажатии на клавишу «Tab». Таким образом, при переходе из одного поля в другое прощелкиваются еще несколько элементов, что рано или поздно начинает уничтожать нервные клетки пользователей.

забыли пароль?

Номер 1 сначала получит фокус, номер 2 будет идти следующим и т.д. Параметр tabindex могут иметь теги
BUTTON, INPUT, SELECT, TEXTAREA

tabindex могут еще иметь: A, AREA и OBJECT