Структура форми
- Для створення форми буде використано невпорядкований список .flex-outer
- для групування різних елементів форми та .flex-inner неупорядкований список, щоб згрупувати прапорці.
- Майже всі елементи керування форми поставляються разом із відповідною міткою.
Замість елемента label перед списком .flex-inner використовується елемент p. Це пов'язано з тим, що в даному випадку немає сенсу використовувати тег label. Цей тег повинен використовуватися лише для того, щоб зв'язати текстову позначку з елементом керування форми.
Розмітка для прапорців:
З готовою розміткою нестилізована форма виглядає так:
See the Pen Building Responsive Forms With Flexbox (unstyled) by kravets (@raisa69) on CodePen.
Стилі форми
1. Перш ніж стилізувати саму форму, потрібно додати нормалізацію та автопрефіксацію до налаштувань.
2. Визначити гнучкі контейнери. У даному прикладі це такі елементи:
- Кожен із елементів .flex-outer списку.
- Внутрішній список .flex-inner містить всі прапорці.
- Крім того, потрібно вертикально центрувати елементи Flex по поперечній осі.
Щоб досягти такої поведінки, важливо створити кілька вихідних правил CSS:
Основні вимоги для елементів flex .flex-outer списку:
- Ширина міток має бути не менше 120 пікселів і не більше 220 пікселів.
- Ширина елементів форми, що з'являються після позначок, має бути не менше 220 пікселів.
Що це дає? Кожна мітка разом з асоційованим її елементом форми відображатиметься в одному горизонтальному рядку, якщо ширина форми становить не менше 340 пікселів.
У будь-якому іншому випадку всі елементи форми (крім прапорців, які будуть видні пізніше) розташовуватимуться вертикально.
Вищезгадані значення довільні - їх можна змінювати відповідно до потреб.
See the Pen Building Responsive Forms With Flexbox (first step) by kravets (@raisa69) on CodePen.
Кнопка відправлення
Для кнопки submit, яка є елементом flex, потрібно визначити кілька основних стилів:
Прапорці
Встановити ширину елементів flex, які є безпосередніми батьками прапорців до 100 пікселів:
Для вирівнювання головної осі потрібно використати властивість justify-content. Ця властивість має різні значення, але для цього прикладу варто застосувати значення space-between:
Це значення добре працює і дозволяє послідовно вирівнювати прапорці та їх відповідні ярлики.
Слід зазначити, що значення властивості може нерівномірно розподіляти елементи останнього рядка. На деяких екранах можна побачити приблизно таке:
Потрібно звернути увагу на вирівнювання двох останніх елементів Flex. Якщо з якоїсь причини не подобається цей макет, і потрібно, щоб елементи з'являлися поруч один з одним, можна спробувати щось на зразок цього:
- Видалити властивість justify-content з flex-обгортки.
- Використати відсотки, щоб додати фіксовану ширину до елементів flex (наприклад, ширина: 50%).
- Використати медіа-запити, щоб перевизначити цю ширину.
Наприклад, коли ширина вікна перегляду більше 992 пікселів, задати ширину гнучких елементів: width: 25% замість ширини: width: 50%.
Насамперед, важливо розуміти дві речі:
- Flexbox дає велику гнучкість для швидкого створення гарних форм
- і всі вищезгадані значення добре працюють для цього конкретного прикладу.
Для інших проектів знадобляться інші значення. Наприклад, тут мітки прапорців є досить маленькими, і тому їхньому батьківському елементу надається фіксована ширина (тобто 100 пікселів). Однак, якщо вони мають різну ширину, краще задати їм flex: 1 100 px
See the Pen Building Responsive Forms With Flexbox (second step) by kravets (@raisa69) on CodePen.
Фінальні стилі
Щоб зробити форму презентабельнішою потрібно додати ще стилі кольору та інтервалів.
Остаточний варіант виглядає так:
See the Pen Building Responsive Forms With Flexbox by kravets (@raisa69) on CodePen.
Приклад реалізації форми пошуку на веб-сторінці
See the Pen flexbox form search by kravets (@raisa69) on CodePen.
Приклад реалізації форми зворотнього зв'язку
See the Pen flexbox message form by kravets (@raisa69) on CodePen.