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

First name

Теперь добавим над формой пустой абзац с уникальным id. Чуть позже он станет нашим переключателем.

А как быть с обязательными полями?

Несмотря на то, что мы будем использовать CSS для визуального выделения всех полей, которые необходимо заполнить, такой подход всё-таки будет бесполезен в текстовых браузерах и в программах, читающих с экрана. Решение, которое мы предложим, было бы вполне достаточно. Но к сожалению из-за того, что это решение не работает в Internet Explorer, нам понадобится в каждой подписи к обязательному для заполнения полю добавить текст "(Обязательно / Required)".

Surname (Required)

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

Стили для формы

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

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;
}

Дабы лучше привлечь внимание пользователя к элементам формы, которые необходимо заполнить, добавим к псевдокласс :before (Internet Explorer, в отличие от других, этого не поймёт).

fieldset div label:before {
content: "* ";
}

Теперь примемся за стили для необязательных полей: всем им был дан класс "fm-optional". Сначала отменим действие правила "content", затем зададим дополнительным полям серую границу.

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

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

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

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

Добавление действия

Во-первых, воспользуемся заранее заготовленным пустым абзацем

. Важнейшая особенность нашего хитрого скрипта в том, что с помощью 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! Она позволяет пользователям отключать маловажные поля, из-за чего повышается скорость работы с сайтом. Взгляните ещё раз на то, что у нас получилось.

Чтобы обсудить это в форуме, нажмите здесь.