При создании веб-сайтов часто возникает желание что-нибудь в них сделать покрасивее, но в большинстве случаев возможности HTML достаточно сильно ограничивают полет фантазии веб-дизайнеров. Появление и широкое распространение CSS значительно упростило эту ситуацию, но тем не менее многие вещи и с помощью CSS делаются не столь тривиально, как хотелось бы…
Практически на каждом современном сайте присутствуют формы. Это могут быть ввод записи в блог, форма поиска, подписка — у каждого сайта найдется какая-то область, требующая ввода данных от пользователя. И именно формы, пожалуй, являются наиболее консервативной частью сайта — на абсолютном большинстве сайтов используются полностью стандартные элементы, а на остальных добавляется указание размеров, цветов и иногда рамок с помощью CSS. Редко кто идет дальше…
В какой-то мере это оправдано — стандартные элементы позволяют посетителю с первого взгляда понять, где что, не говоря уже о том, что автор сайта страхуется от возможных проблем, связанных с разным отображением элементов в разных браузерах. Но все-таки очень хочется сделать что-то поэлегантнее, чем стандартные текстовые поля, загнанные в таблицу…Для начала попробуем нарисовать простую форму в том виде, как она часто присутствует на сайтах (за исключением того, что мы сразу уберем таблицу — все-таки 21-й век на дворе!).
имя:
Email:
Стандартные элементы позволяют посетителю проще ориентироваться на сайте
М-да, выглядит не очень впечатляюще… Попробуем ее немножко облагородить. Для этого пропишем у всех элементов какие-то классы (мы их потом отформатируем с помощью CSS), а кроме того, добавим теги fieldset (группировка элементов формы), legend (название для fieldset — похоже на тег caption для таблиц) и label (выводит «этикетки» для элементов формы, причем щелчок по «этикетке» передаст фокус ввода соответствующему элементу).
Не сказать, чтобы стало намного лучше, но ведь это еще не конечный результат, а только заготовка… Добавим немного CSS и опишем размеры и положение полей.
Теги FIELDSET, LEGEND и LABEL редко используются в формах. А зря…
Уже лучше. Теперь сделаем следующий шаг и спрячем поля ввода, сохранив, разумеется, их функциональность. Для этого мы просто сделаем
рамки вокруг этих элементов нулевой ширины (если присвоить элементам атрибут display:none или visibiliy:hidden, то поля исчезнут, но вместе с ними пропадет и функциональность). Дописываем CSS:
Указание в CSS свойства display:none не только прячет элемент, но и уничтожает его функциональность…
Все, что теперь осталось (ну, почти все), — это нарисовать какие-то картинки, подходящие к вашему дизайну, и использовать их в качестве фона для полей ввода. Разумеется, вам придется еще немного поиграть с отступами и полями, чтобы текст точно попадал на ваши новые поля, а также с размерами шрифта, его насыщенностью, разрядкой, цветом и так далее, но эффект того стоит. Главное — не переусердствовать…
Кнопочки и прочие картинки лучше рисовать тем, кто умеет это делать. Я — нет, так что прошу прощения за качество…
Единственное, что осталось доделать, это учесть пользователей, которые смотрят вашу страницу через IE5 (их становится все меньше, но число еще достаточно заметное). Дело в том, что этот браузер почему-то прокручивает фоновую картинку при вводе текста. Можно вместо no-repeat указать fixed — это исправит положение для IE5, но испортит для всех остальных браузеров, так как картинка зафиксируется на одном месте и не будет двигаться при прокрутке страницы (в полном соответствии со стандартом). Поэтому мы воспользуемся одним из стандартных методов защиты от IE5:
Вот, пожалуй, и все. Разумеется, эту идею можно развивать разными способами — например, можно использовать невидимые поля ввода для доступа к «секретным» областям сайта (правда, такая защита действует до тех пор, пока посетитель в код страницы не заглянет), но лучше все же не пугать и не путать пользователя, ограничившись подгонкой дизайна форм под дизайн ваших страниц.Успехов вам и вашему сайту!
Ссылки по теме
CSS: пара слов о шрифтах
Что такое каскадные таблицы стилей (CSS)
Не переусердствуйте с украшательствами — это может значительно испортить впечатление от вашего сайта…
