Библиотека Интернет Индустрии I2R.ru |
|||
|
Прячем и показываем поля формыавтор: © Энди Кларк (Andy Clarke) Trimming form fieldsВеб-формы часто запрашивают у пользователя и существенную и несущественную (для маркетинговых исследований, например) информацию. Длинные и запутанные формы часто могут серьёзно замедлить путешествие по сайту, а в случае с коммерческими сайтами, такие формы могут серьёзно повлиять на уровень продаж. Разве не было бы замечательно дать пользователям возможность прятать по своему усмотрению поля необязательные для заполнения. Мы можем сделать это, с умом применив JavaScript, DOM и немного CSS. Для начала мы создадим семантически правильную и удобную форму, лишь слегка разбавив ее дополнительной разметкой. Затем, для пущего эффекта, добавим CSS и создадим функцию, скрывающую дополнительные поля. Кроме того, мы добьёмся, чтобы форма "работала" и у тех пользователей, чьи браузеры не поддерживают JavaScript или CSS, тем самым гарантируя то, что форма будет доступна для всех настолько, насколько это возможно. Кроме того, в нашей форме будет полное разделение содержимого, представления и поведения - принцип, которому мы всегда следуем в нашем коммерческом веб-приложении на сайте Karova. Перед тем, как начать "колдовать", одним глазком взгляните на конечный результат. Семантически правильная разметкаПервым делом создадим простую форму (форма для заполнения контактной информации будет в самый раз), содержащую в структуре группы полей, подписи к ним и подписи к полям.
Обратите внимание, что мы добавили тэги <br /> после каждого элемента формы. Семантической нужды в них нет, но они придадут форме опрятный вид при отключенной таблице стилей. Если вас не заботит, как будет выглядеть форма без стилей, уберите эти теги со спокойной душой. Включаем переключение полейЧтобы получить возможность прятать и показывать необязательные для заполнения поля, мы поместили эти поля и соответствующие им подписи в блоки <div>, которым присвоили класс "fm-optional".
Теперь добавим над формой пустой абзац с уникальным id. Чуть позже он станет нашим переключателем.
А как быть с обязательными полями?Несмотря на то, что мы будем использовать CSS для визуального выделения всех полей, которые необходимо заполнить, такой подход всё-таки будет бесполезен в текстовых браузерах и в программах, читающих с экрана. Решение, которое мы предложим, было бы вполне достаточно. Но к сожалению из-за того, что это решение не работает в Internet Explorer, нам понадобится в каждой подписи к обязательному для заполнения полю добавить текст "(Обязательно / Required)".
Вот так! Перед нами простая контактная форма, содержащая совсем немного дополнительной разметки, в которой названия для идентификаторов и классов связаны более с содержимым формы, нежели с ее представлением или поведением. Стили для формыТеперь начнём применять стили к тем полям, которые необходимо заполнить (все поля считаются обязательными до тех пор, пока мы не скажем им обратное). Добавим красную границу для полей <input> и <select>.
Дабы лучше привлечь внимание пользователя к элементам формы, которые необходимо заполнить, добавим к <label> псевдокласс :before (Internet Explorer, в отличие от других, этого не поймёт).
Теперь примемся за стили для необязательных полей: всем им был дан класс "fm-optional". Сначала отменим действие правила "content", затем зададим дополнительным полям серую границу.
Теперь добавьте собственные стили к группам полей, подписям к группам и подписям к полям, к кнопкам как того требует дизайн вашего сайта, и наша форма почти готова. Добавление действияВо-первых, воспользуемся заранее заготовленным пустым абзацем <p id="linkContainer"></p>. Важнейшая особенность нашего хитрого скрипта в том, что с помощью DOM якорь и текст ссылки будут созданы лишь только в том случае, когда в браузере включён JavaScript. В скрипте мы в первую очередь создаём текст ссылки, которая будет показана после загрузки страницы.
Затем мы создаём ссылки "Показать/ Display" и "Скрыть/ Remove"
Наконец, мы командуем всем полям, у которых класс называется 'fm-optional',
ИтогВуаля! Удобная и доступная форма, которая работает даже в браузере JAWS! Она позволяет пользователям отключать маловажные поля, из-за чего повышается скорость работы с сайтом. Взгляните ещё раз на то, что у нас получилось. Файлы для скачиванияавтор: © Энди Кларк (Andy Clarke) |
|
2000-2008 г. Все авторские права соблюдены. |
|