Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

HTML формы. Дубль два.

20 ноября 2001 г.

В одной из заметок я писал, как с помощью нескольких тегов и атрибутов из стандарта HTML 4 сделать формы красивее и функциональнее. Эту же заметку я хочу посвятить обхождению трудностей, возникающих при вёрстке форм.

В одной из заметок я писал, как с помощью нескольких тегов и атрибутов из стандарта HTML 4 сделать формы красивее и функциональнее. Эту же заметку я хочу посвятить обхождению трудностей, возникающих при вёрстке форм.

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

Итак, при вёрстке форм чаще всего возникают проблемы следующего характера:

Проблема Решение
Будучи внутри ячейки таблицы, форма обрамляется ненужными отступами сверху и/или снизу. Зачастую помогает вынесение form за пределы таблицы. Если не помогает, то лечится эта беда путём нигиляции существующих стандартов (это плохо), но зато работает почти всегда и во всех браузерах (это, безусловно, хорошо). Для этого тег form выносится из ячейки и помещается сразу после тега table или tr.
Но всё же самый оптимальный вариант — указание у тега form стиля margin:0px.
Ширина полей ввода input различна в IE и NN4.x. Здесь тоже несколько путей. Самый тривиальный — задание полям стиля font-family: monospace. Можно также подобрать значения HTML атрибута size и CSS свойства width (не воспринимается в NN4.x) так, чтобы поля были одинаковыми в обоих браузерах. Учтите только, что стиль, содержащий свойство width лучше скрыть от NN4.x (хотя бы таким образом), так как иначе этот браузер может очень непредсказуемо испортить внешний вид формы. Не забудьте также указать для обоих браузеров одинаковые CSS свойства шрифта полей ввода (название шрифта, кегль, начертание и т. п.).
Элементы формы не отображаются в NN4.x. Если вы не указали тег form, то NN4.x просто не покажет форму. Этот тег иногда забывают написать, когда форма используется не по прямому назначению (сбор данных для отправки на сервер), а, скажем, для создания ниспадающей навигации с помощью select.

На написание статьи меня вдохновили обсуждения на форуме xpoint.ru.

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

LiveInternet