Улучшаем обязательные поля формы при помощи CSS3

Сегодня я хочу поделиться с вами простым эффектом для форм, а именно: как улучшить обязательные поля в форме. Многие веб-формы выполнены в минималистичном стиле, то есть только набор самых необходимых данных для пользователей. Например, в форме регистрации вы не хотите, чтобы ваш потенциальный клиент заполнял слишком много полей, так как это может привести к тому, что пльзователь откажется от регистрации. Но есть и много других форм с дополнительной информацией, где пользователь готов или ему необходимо заполнить дополнительные поля. Это может быть форма заказа или объявление на сайте.

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

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

Для этого мы создадим форму с полями, каждое в отдельном блоке, к которым будем применять самые разнообразные действия. Блок с полем будет иметь дополнительный класс, если поле является обязательным (af-required):

<form class="af-form" id="af-form" novalidate>
 
 <div class="af-outer">
 <div class="af-inner">
 <label>Title</label>
 <input type="text" name="title">
 </div>
 </div>
 
 <div class="af-outer af-required">
 <div class="af-inner">
 <label>Name</label>
 <input type="text" name="fullname" required>
 </div>
 </div>
 
 <!-- ... -->
 
</form>

Мы рассмотрим в данной статье пример из Demo 2, в котором будем прятать необязательные поля. Для этого мы будем уменьшать высоту блоков-оболочек.

Мы добавим переход для внешнего блока-оболочки (div class="af-outer"), определим фиксированную высоту и установим overflow: hidden, потому что мы не хотим, чтобы содержание было видимым, когда мы уменьшим высоту:

 .af-outer {
 overflow: hidden;
 height: 70px;
 box-shadow: 0 1px 0 #f5f5f5 inset;
 transition: all 0.5s linear;
}

Для внутреннего блока-оболочки (div class="af-inner"), мы установим transform-origin равный “center top”, так что мы можем видеть его масштабирование в то время как мы уменьшаем высоту внешнего блока-оболочки. Первоначально масштаб равен 1 (поэтому это не обязательно определять в стилях):

 .af-inner {
 padding: 15px 20px 15px 20px;
 transform-origin: center top;
 transform: scale(1);
 transition: all 0.5s linear;
}

В верхней части формы у нас есть небольшая кнопка (флажок) с идентификатором af-showreq и когда мы кликаем по кнопке, необязательные поля будут уменьшаться. Мы можем использовать псевдо-класс :not, чтобы добраться до желаемого элемента, но вы также, конечно, можете дать соответствующие классы необязательным полям, и получить к ним доступ непосредственно при помощи обобщенного родственного комбинатора (~).

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

 #af-showreq:checked ~ .af-form .af-outer:not(.af-required) {
 height: 0px;
 visibility: hidden;
}
#af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner {
 transform: scale(0);
 opacity: 0;
}

Установка свойства visibility равное hidden будет гарантировать, что мы можем перемещать курсор по полям при помощи клавиши Tab, минуя скрытые поля. Здесь мы не можем использовать display: none, потому что наш переход (transition) не будет работать.

Надеюсь, вам понравились эти примеры!

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


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

You have no rights to post comments