Реальный пиарСоздание сайтовВёрстка → рячем и показываем поля формы

рячем и показываем поля формы

добавить сайт

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

Разве не было бы замечательно дать пользователям возможность прятать по своему усмотрению поля необязательные для заполнения. Мы можем сделать это, с умом применив JavaScript, DOM и немного CSS.

Для начала мы создадим семантически правильную и удобную форму, лишь слегка разбавив ее дополнительной разметкой. Затем, для пущего эффекта, добавим CSS и создадим функцию, скрывающую дополнительные поля. Кроме того, мы добьёмся, чтобы форма "работала" и у тех пользователей, чьи браузеры не поддерживают JavaScript или CSS, тем самым гарантируя то, что форма будет доступна для всех настолько, насколько это возможно. Кроме того, в нашей форме будет полное разделение содержимого, представления и поведения - принцип, которому мы всегда следуем в нашем коммерческом веб-приложении на сайте Karova.

Перед тем, как начать "колдовать", одним глазком взгляните на конечный результат.

Фрагмент длинной формы, которую мы упростим в данной статье
Семантически правильная разметка

Первым делом создадим простую форму (форма для заполнения контактной информации будет в самый раз), содержащую в структуре группы полей, подписи к ним и подписи к полям.
<form id="example-form" method="post" action="">
<fieldset>
<legend></legend>
<label></label>
<input />
<br />

и т.д.

</fieldset>

и т.д.

<input type="submit" name="Submit" value="Submit">
</form>


Обратите внимание, что мы добавили тэги <br /> после каждого элемента формы. Семантической нужды в них нет, но они придадут форме опрятный вид при отключенной таблице стилей. Если вас не заботит, как будет выглядеть форма без стилей, уберите эти теги со спокойной душой.
Включаем переключение полей

Чтобы получить возможность прятать и показывать необязательные для заполнения поля, мы поместили эти поля и соответствующие им подписи в блоки <div>, которым присвоили класс "fm-optional".
<div class="fm-optional">
<label for="fm-forename">First name</label>
<input type="text" name="fm-forename" id="fm-forename" />
<br />
</div>

Теперь добавим над формой пустой абзац с уникальным id. Чуть позже он станет нашим переключателем.
<p id="linkContainer"></p>
А как быть с обязательными полями?

Несмотря на то, что мы будем использовать CSS для визуального выделения всех полей, которые необходимо заполнить, такой подход всё-таки будет бесполезен в текстовых браузерах и в программах, читающих с экрана. Решение, которое мы предложим, было бы вполне достаточно. Но к сожалению из-за того, что это решение не работает в Internet Explorer, нам понадобится в каждой подписи к обязательному для заполнения полю добавить текст "(Обязательно / Required)".
<div>
<label for="fm-surname">Surname (Required)</label>
<input type="text" name="fm-surname" id="fm-surname" />
<br />
</div>

Вот так! Перед нами простая контактная форма, содержащая совсем немного дополнительной разметки, в которой названия для идентификаторов и классов связаны более с содержимым формы, нежели с ее представлением или поведением.
Стили для формы

Теперь начнём применять стили к тем полям, которые необходимо заполнить (все поля считаются обязательными до тех пор, пока мы не скажем им обратное). Добавим красную границу для полей <input> и <select>.
fieldset div {
margin : 0;
padding : 0;
}

fieldset div input {
/* Давайте не будем углубляться в проблемы с блочной моделью */
width: 200px;
border : 1px solid #900;
padding : 1px;
}

fieldset div select {
width: 200px;
border : 1px solid #900;
padding : 1px;
}

Дабы лучше привлечь внимание пользователя к элементам формы, которые необходимо заполнить, добавим к <label> псевдокласс :before (Internet Explorer, в отличие от других, этого не поймёт).
fieldset div label:before {
content: "* ";
}

Теперь примемся за стили для необязательных полей: всем им был дан класс "fm-optional". Сначала отменим действие правила "content", затем зададим дополнительным полям серую границу.
fieldset div.fm-optional {
/* Значение "по умолчанию" для блоков,
содержащих дополнительные элементы формы */
display : block;
}

fieldset div.fm-optional label:before {
/* Убираем звёздочку перед <label> */
content: "";
}

.fm-optional input {
/* Серые границы */
border : 1px solid #ccc;
}

Теперь добавьте собственные стили к группам полей, подписям к группам и подписям к полям, к кнопкам как того требует дизайн вашего сайта, и наша форма почти готова.
Добавление действия

Во-первых, воспользуемся заранее заготовленным пустым абзацем <p id="linkContainer"></p>. Важнейшая особенность нашего хитрого скрипта в том, что с помощью DOM якорь и текст ссылки будут созданы лишь только в том случае, когда в браузере включён JavaScript.

В скрипте мы в первую очередь создаём текст ссылки, которая будет показана после загрузки страницы.
toggle.appendChild(document.createTextNode('Скрыть лишние поля?'));

Затем мы создаём ссылки "Показать/ Display" и "Скрыть/ Remove"
this.firstChild.nodeValue =
(linkText == 'Скрыть лишние поля?') ?
'Показать лишние поля?' : 'Скрыть лишние поля?';

Наконец, мы командуем всем полям, у которых класс называется 'fm-optional',
if(tmp[i].className == 'fm-optional') {
tmp[i].style.display = (tmp[i].style.display == 'none')?'block':'none';
}
Итог

Вуаля! Удобная и доступная форма, которая работает даже в браузере JAWS! Она позволяет пользователям отключать маловажные поля, из-за чего повышается скорость работы с сайтом. Взгляните ещё раз на то, что у нас получилось.


Источник: http://webmascon.com

Рекомендуем



CSS дизайн: с учетом контекста Веб-стандарты обещают нам улучшенную поддержку мультимедиа: возможность оптимизировать контент под возможности компьютерных экранов, портативных устройств, принтеров, проекторов, и других средств


«Резиновая вёрстка»: используем отрицательные поля Однако, раз уж нам так важно, чтобы в текстовых браузерах, программах для чтения с экрана и старых браузерах, не понимающих наши таблицы стилей, сначала был виден контент, а потом уже боковая панель, значит нам надо найти такое решение, которое бы позволило разместить контент в начале кода


Дизайн для портативных устройств: ваш веб-сайт на маленьком экране Для этой статьи мы подготовили ряд общих советов по созданию таблицы стилей, дружественной портативным устройствам, а также несколько подсказок, специфичных для Оперы, которые могут оказаться полезными