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

В этом уроке я покажу вам как создать адаптивную форму при помощи Flexbox. Что самое интересное, Flexbox позволяет разрабатывать нашу форму без использования каких-либо медиа-запросов.

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

See the Pen Building Responsive Forms With Flexbox by Envato Tuts+ (@tutsplus) on CodePen.

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

Несколько слов о структуре формы:

  • Мы будем использовать неупорядоченный список .flex-outer для группировки элементов
  • и неупорядоченный список .flex-inner для группировки чекбоксов
  • Практически все элементы управления будут иметь название (label)

Вот и все! Нам понадобится всего лишь два неупорядоченных списка, благодаря этому структура формы будет минимальной. Выглядит структура следующим образом:

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

Мы используем элемент p вместо элемента label перед списком .flex-inner, так как в данном случае нет смысла использовать данный тег. Этот тег должен быть использован только для связывания текстовой метки с элементом формы.

Разметка чекбоксов:

<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>
  <!-- more list items here -->
</ul>

Выглядит следующим образом:

See the Pen Building Responsive Forms With Flexbox (unstyled) by Envato Tuts+ (@tutsplus) on CodePen.

Стили формы

Давайте начнем с добавления библиотек normalize и autoprefixer:

pen settings

Далее идентифицируем flex контейнер. В нашем случае это будут следующие элементы:

  • Каждый элемент списка в .flex-outer.
  • Список .flex-inner, который содержит все чекбоксы.

Кроме того мы расположим все элементы по вертикали.

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

Следующим шагом является определение ширины для flex элементов. Мы начинаем с flex элементов в списке .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.

checkbox style

Для начала мы зададим ширину для flex элементов, которые являются родительским элементом для чекбоксов:

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

Затем мы воспользуемся свойством justify-content, чтобы выровнять их по главной оси. Обратите внимание, что это свойство имеет различные значения, но для этого примера, нам понадобится только значение space-between:

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

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

flex checkboxes

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

  • Удалите свойство justify-content у родительского элемента.
  • Установите фиксированную ширину в процентах для flex элементов (width: 50%).
  • Используйте медиа-запросы для переопределения ширины элементов на различных экранах.

Прежде всего нужно понимать две вещи:

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

See the Pen Building Responsive Forms With Flexbox (second step) by Envato Tuts+ (@tutsplus) on CodePen.

Заключение

Перед тем, как закончить, давайте добавим эстетики, и сделаем нашу форму более презентабельной. Все стили вы можете увидеть во вкладке CSS:

See the Pen Building Responsive Forms With Flexbox by Envato Tuts+ (@tutsplus) on CodePen.

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

 

Перевод статьи How to Build a Responsive Form With Flexbox

Тэги: formresponsiveflexbox

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.