Bootstrap спрощує створення привабливих і адаптивних форм, надаючи набір класів і компонентів для керування формами. Ці класи керування формами можна використовувати для стилізації полів введення, чекбоксів, радіокнопок, списків вибору, випадаючих списків і текстових областей, забезпечуючи єдиний стиль на всьому вебсайті.

Основні класи керування формами

клас form-control

Цей клас використовується для стилізації різних елементів форм, включаючи поля введення, текстові області та випадаючі списки select. При застосуванні забезпечує адаптивність і візуальну узгодженість елементів форм на різних пристроях і розмірах екранів.

Основні характеристики класу form-control

• Адаптивний дизайн: Елементи форм зі стилем form-control автоматично підлаштовують свою ширину під доступний простір у контейнері;
• Уніфікований стиль: При застосуванні form-control елементи форм отримують єдиний стиль, включаючи межі, відступи та властивості шрифту;
• Стан фокусу та наведення: form-control забезпечує візуальний зворотний зв'язок, змінюючи вигляд елементів форм при наведенні або фокусі.

класи form-check

• form-check: Цей клас стилізує чекбокси та перемикачі (radio), розміщуючи їх в один рядок і забезпечуючи єдиний стиль;
• form-check-input: Застосовується до елементів введення чекбоксів і перемикачів у контейнері form-check. Цей клас забезпечує однаковий стиль для елементів введення;
• form-check-label: Використовується для стилізації мітки, пов'язаної з чекбоксами та перемикачами. Забезпечує єдиний стиль міток і допомагає підтримувати вирівнювання з відповідними елементами введення.

Система сітки для компонування форм

Система сітки Bootstrap надає потужний інструмент для організації елементів форми у багатоколонкові макети. Використовуючи класи сітки, такі як col-md-6, col-lg-4 та інші, розробники можуть розташовувати елементи форми у гнучкі, адаптивні макети, які бездоганно підлаштовуються під різні розміри екранів і пристроїв.

Основні характеристики:

• Адаптивні колонки: Класи сітки дозволяють визначати ширину елементів форми для різних брейкпоінтів. Наприклад, col-md-6 вказує, що колонка повинна займати половину ширини контейнера на середніх і більших екранах. Аналогічно, col-lg-4 визначає ширину колонки як одну третину на великих екранах;
• Гнучкість: Можливість комбінувати різні класи сітки для створення складних макетів форм;
• Оптимізація для мобільних пристроїв: Система сітки Bootstrap спочатку орієнтована на мобільні пристрої, що забезпечує коректне відображення форм на малих екранах за замовчуванням.

Результат поведінки адаптивної сітки форми

Стилі валідації форм

Стилі валідації форм забезпечують візуальний зворотний зв'язок для користувачів щодо коректності їх введення. Ці стилі включають індикатори для станів успіху, помилки та попередження, що дозволяє користувачам легко зрозуміти, чи відповідає їх введення необхідним критеріям.

У наведеному прикладі:

• Додається клас needs-validation для активації стилів валідації Bootstrap;
• Атрибут novalidate використовується для вимкнення вбудованої валідації браузера;
• Поле введення електронної пошти має атрибут required, що робить його обов’язковим для заповнення;
• Класи valid-feedback та invalid-feedback використовуються для відображення повідомлень про коректність або некоректність введених даних відповідно;
• Додатково використовується JavaScript для запобігання відправленню форми при наявності некоректних полів і для застосування класу was-validated до форми.