Главная->Уроки по css->Выделение обязательных полей формы с использованием CSS3

Выделение обязательных полей формы с использованием CSS3

05 Окт в 00:00

В данном уроке мы сделаем небольшой приятный глазу эффект для обязательных полей в форме. Большинство веб форм разрабатывается в минимальном исполнении, только для сбора данных пользователя. Подумайте о том, сколько посетителей отказывались от заполнения формы, потому что она содержала множество полей. Но также есть много форм, которые в необязательных к заполнению полях запрашивают дополнительную информацию, которую посетитель хочет или должен предоставить. Например, формы заказа или формы классификации. Идея заключается в том, чтобы выделять только обязательные к заполнению поля. Такая задача обычно решается установкой маленького символа * или подобного обозначения. Но мы пойдем дальше и добавим интерактивный эффект для лучшего визуального выделения обязательных полей. Для реализации идеи обернем метки и поля формы в два элемента div, которые позволят нам применить различные эффекты. Внешний контейнер будет иметь дополнительный класс, если поле обязательно для заполнения (af-required): 01 <form class="af-form" id="af-form" novalidate> 02 03 <div class="af-outer"> 04 <div class="af-inner"> 05 <label>Титул</label> 06 <input type="text" name="title"> 07 </div> 08 </div> 09 10 <div class="af-outer af-required"> 11 <div class="af-inner"> 12 <label>Имя</label> 13 <input type="text" name="fullname" required> 14 </div> 15 </div> 16 17 <!-- ... --> 18 19 </form> Рассмотрим стили второго примера демонстрации, который использует скрытие необязательных полей с помощью масштабирования. Мы будем уменьшать высоту другого контейнера, когда внутренний будет уменьшаться в масштабе. Добавим переход для внешнего контейнера, определим фиксированную высоту и установим скрытие выступающих частей, чтобы прятать содержание при уменьшении высоты. 1 .af-outer { 2 overflow: hidden; 3 height: 70px; 4 box-shadow: 0 1px 0 #f5f5f5 inset; 5 transition: all 0.5s linear; 6 } Для внутреннего контейнера установим центр перехода в значение “center top”, чтобы видеть процесс уменьшения высоты. Изначально масштаб имеет значение 1 (не обязательно устанавливать его): 1 .af-inner { 2 padding: 15px 20px 15px 20px; 3 transform-origin: center top; 4 transform: scale(1); 5 transition: all 0.5s linear; 6 } В верху формы имеется кнопка (чекбокс) с id af-showreq. При нажатии на кнопку будет происходит изменение масштаба дополнительных полей. Мы используем псевдо-класс :not для получения нужных элементов, но можно устанавливать классы для дополнительных полей и получать к ним доступ через комбинаторы родственников. Уменьшим высоту внешнего контейнера и масштаб внутреннего: 1 #af-showreq:checked ~ .af-form .af-outer:not(.af-required) { 2 height: 0px; 3 visibility: hidden; 4 } 5 #af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner { 6 transform: scale(0); 7 opacity: 0; 8 } Установка свойства visibility: hidden дает гарантию, что можно будет переключаться на другие поля с помощью клавиатуры. Здесь нельзя использовать display: none, потому что не будет работать переход. Готово!