Как создать адаптивную форму с помощью Flexbox

Как создать адаптивную форму с помощью Flexbox

От автора: в этом уроке мы создадим адаптивную форму при помощи flexbox. Интересен и удивителен тот факт, что flexbox позволяет строить формы без медиа запросов.

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

Структура формы

Сперва, давайте разберем структуру формы. Мы сделаем:

для группировки различных элементов формы мы используем неупорядоченный список .flex-outer;

для группировки чекбоксов возьмем неупорядоченный список .flex-inner;

почти у всех элементов формы есть свои лейблы.

Вот и все! С помощью двух неупорядоченных списков (можно было взять и нумерованные списки) мы построили довольно четкую форму. Вот так она выглядит:

<form>
  <ul class="flex-outer">
    <li>
      <label for="first-name">First Name</label>
      <input type="text" id="first-name" placeholder="Enter your first name here">
    </li>
    <li>
      <label for="last-name">Last Name</label>
      <input type="text" id="last-name" placeholder="Enter your last name here">
    </li>
    <li>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your email here">
    </li>
    <li>
      <label for="phone">Phone</label>
      <input type="tel" id="phone" placeholder="Enter your phone here">
    </li>
    <li>
      <label for="message">Message</label>
      <textarea rows="6" id="message" placeholder="Enter your message here"></textarea>
    </li>
    <li>
      <p>Age</p>
      <ul class="flex-inner">
        <!-- list items here -->
      </ul>
    </li>
    <li>
      <button type="submit">Submit</button>
    </li>
  </ul>
</form>

Обратите внимание: перед списком .flex-inner мы используем тег p, а не label. В данном конкретном случае тег label использовать абсолютно необязательно. Данный тег необходимо использовать только для ассоциации лейбла и элемента формы. Разметка чекбоксов:

<ul class="flex-inner">
  <li>
    <input type="checkbox" id="twenty-to-twentynine">
    <label for="twenty-to-twentynine">20-29</label>
  </li>
  <li>
    <input type="checkbox" id="thirty-to-thirtynine">
    <label for="thirty-to-thirtynine">30-39</label>
  </li>
  <!—элементы списка -->
</ul>

Форма с разметкой и без стилей выглядит так:

Не самая красивая форма, которую вы видели, но она работает! Форма семантическая, доступная и гибкая – возможно, самые важные аспекты. Теперь можно писать стили.

Стили формы

Добавим в настройках демо normalize и autoprefixer:

Теперь создадим флекс контейнер. В нашем случае это будут:

все элементы списка .flex-outer;

элементы списка .flex-inner с чекбоксами.

Нам нужно вертикально выровнять все флекс элементы вдоль оси. Для этого необходимо задать пару CSS стилей:

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

Теперь необходимо указать ширину флекс элементов. Начнем с флекс элементов списка .flex-outer. Основные требования:

ширина лейблов должна быть в рамках 120px – 220px;

ширина элементов формы после лейблов должна быть не менее 220px.

Что это нам дает? Все лейблы с привязанными к ним элементами будут отображаться на одной строке при общей ширине формы от 340px и выше. В другом случае все элементы формы выстроятся один над другим (кроме чекбоксов, что мы сейчас увидим). Обратите внимание: вышеупомянутые значения выбраны произвольно, их можно изменить под свои нужды.

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}
 
.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

Кнопка отправки

Наконец, кнопка отправки является также флекс элементом, ей мы зададим пару базовых стилей:

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

Чекбоксы

Добавим стилей для чекбоксов. Вспомним, что их флекс контейнер имеет минимальную ширину в 220px.

Сперва, зададим ширину 100px для прямых родителей чекбоксов:

.flex-inner li {
  width: 100px;
}

Теперь при помощи свойства justify-content выровняем их вдоль главной оси. У данного свойства несколько значений, нам нужно только space-between:

.flex-inner {
  justify-content: space-between;
}

Значение отлично работает и позволяет достичь точного выравнивания чекбоксов и их лейблов. Единственное но – данное значение может неадекватно расставить элементы последнего ряда. На определенном разрешении экрана вы увидите что-то типа:

Обратите внимание на два последних флекс элемента. Если вам по каким-либо причинам не нравится такое расположение, и вы хотите, чтобы они были рядом, можно попробовать:

удалить свойство justify-content у флекс контейнера;

добавить фиксированную ширину флекс элементов с помощью процентов (т.е. width: 50%);

переписать ширину с помощью медиа запросов. К примеру, когда ширина экрана больше 992px, задавать элементам свойство width: 25%, а не width: 50%.

Самое важное – нужно понять две вещи:

flexbox позволяет быстро создавать красивые формы;

все вышеупомянутые значения отлично работаю в нашем конкретном примере. К примеру, лейблы чекбоксов довольно небольшие, поэтому мы задали для их родителя фиксированную ширину (100px). Но если у них разная ширину, умнее задать flex: 1 100px.

Конечные стили

Добавим немного лоска и сделаем форму более презентабельной. Откройте вкладку CSS в демо ниже, посмотрите, в каких местах мы добавили цвета и отступы:

Заключение

Как видите, с минимальной разметкой и при помощи flexbox нам удалось создать адаптивную форму. Надеюсь, вы вынесли что-то полезное для себя, и будете теперь создавать свои формы на flexbox.

Что дальше

Если вы хотите улучшить данную форму, вам нужно:

улучшить внешний вид, переписав стандартные стили (например, добавить своих чекбоксов);

сделать форму динамичной. К примеру, если вы знакомы с WordPress, проверьте, можно ли создать форму Contact Form 7 или Ninja Form и сохранить структуру и стили от нашей формы.

Автор: George Martsoukos

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

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree