Как скрыть поля формы в CSS

Первым делом создадим простую форму (форма для заполнения контактной информации будет в самый раз), содержащую в структуре группы полей, подписи к ним и подписи к полям.
<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>

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