Вирівнювання елементів форм

9 червня 2022 р.732

До появи флексбоксів вирівнювання елементів форми інколи викликало безліч труднощів. Але флексбокс істотно спрощують цей процес. Давайте почнемо з простого прикладу.

От форма без флексбоксів.

<!doctype html>
<title>Приклад</title> <style> .wrapper { background-color: whitesmoke; list-style-type: none; padding: 0; border-radius: 3px; } 
.form-row { padding: .5em; } 
.form-row > label { padding: .5em 1em .5em 0; } 
.form-row > input, .form-row > button { padding: .5em; } 
.form-row > button { background: gray; color: white; border: 0; }
</style> <form> <ul class="wrapper"> <li class="form-row"> <label for="name">Ім'я</label> <input type="text" id="name">
</li> <li class="form-row"> <label for="townborn">Місце народження</label> <input type="text" id="townborn">
</li> <li class="form-row"> <label for="email">Адреса електронної пошти</label> <input type="email" id="email">
</li> <li class="form-row"> <button type="submit">Надіслати</button>
</li>
</ul>
</form>

Ця форма використовує невелике форматування, але ширина всіх полів введення однакова. Це призводить до того, що правий край виглядає трохи нерівним, оскільки поля форми не розташовуються один під одним. Якщо вас подібне влаштовує, то добре, і немає необхідності щось робити далі. Але якщо ми хочемо розтягнути поля введення до правого краю? Без флексбоксів отримати такий результат було б дещо болісно. Особливо, якщо сама форма гнучка (тобто вона розширюється та стискається залежно від ширини батьківського елемента чи області перегляду). Якщо форма гнучка, кожне поле введення теж має розширюватися і стискатися за необхідності. У цьому випадку ви не можете використовувати фіксовану ширину для полів введення, тому що як тільки ширина форми зміниться, ширина полів стане некоректною. Так що потрібно схитрувати, щоб все працювало правильно.

Тим не менше, флексбокси дозволяють зробити це без магічних трюків.

<!doctype html>
<title>Приклад</title> <style> .wrapper { background-color: whitesmoke; list-style-type: none; padding: 0; border-radius: 3px; } 
.form-row { display: flex; justify-content: flex-end; padding: .5em; } 
.form-row > label { padding: .5em 1em .5em 0; } 
.form-row > input { flex: 1; } 
.form-row > input, .form-row > button { padding: .5em; } 
.form-row > button { background: gray; color: white; border: 0; }
</style> <form> <ul class="wrapper"> <li class="form-row"> <label for="name">Ім'я</label> <input type="text" id="name">
</li> <li class="form-row"> <label for="townborn">Місце народження</label> <input type="text" id="townborn">
</li> <li class="form-row"> <label for="email">Адреса електронної пошти</label> <input type="email" id="email">
</li> <li class="form-row"> <button type="submit">Надіслати</button>
</li>
</ul>
</form>

Спершу для кожного класу .form-row встановлюємо відображення display: flex.

<code data-language="css">.form-row { display: flex; justify-content: flex-end; padding: .5em; }

Зверніть увагу, що ми також використовували justify-content: flex-end, але це не обов'язково. У цьому випадку кнопка просто переміщається праворуч.

Тепер, коли кожен рядок форми є флекс-контейнером, ми застосовуємо наступний код до полів введення.

<code data-language="css">.form-row > input { flex: 1; }

Таким чином, застосовуючи flex: 1 до полів введення, ми змушуємо ці поля використовувати весь доступний вільний простір після міток <label>. При цьому мітки зберігають звичайну ширину з урахуванням padding. Поля введення починаються відразу після них і розтягуються до кінця.

Поля введення однакової ширини

Ви можете змінити наведений вище приклад так, щоб лівий край полів форми також був у лінію (як і правий край).

На зразок цього.

<!doctype html>
<title>Приклад</title> <style> .wrapper { background-color: whitesmoke; list-style-type: none; padding: 0; border-radius: 3px; } 
.form-row { display: flex; justify-content: flex-end; padding: .5em; } 
.form-row > label { padding: .5em 1em .5em 0; flex: 1; } 
.form-row > input { flex: 2; } 
.form-row > input, .form-row > button { padding: .5em; } 
.form-row > button { background: gray; color: white; border: 0; }
</style> <form> <ul class="wrapper"> <li class="form-row"> <label for="name">Ім'я</label> <input type="text" id="name">
</li> <li class="form-row"> <label for="townborn">Місце народження</label> <input type="text" id="townborn">
</li> <li class="form-row"> <label for="email">Адреса електронної пошти</label> <input type="email" id="email">
</li> <li class="form-row"> <button type="submit">Надіслати</button>
</li>
</ul>
</form>

Все, що ми тут зробили, це додали flex: 1 до міток, а для полів введення змінили на flex: 2.

<code data-language="css">.form-row > label { padding: .5em 1em .5em 0; flex: 1; } 
.form-row > input { flex: 2; }

Це визначає ширину полів форми як подвоєну ширину позначок. Ви можете настроїти це співвідношення залежно від ширини форми або очікуваної ширини. Наприклад, можна використовувати співвідношення 1 к 3 або 1 к 4 для широких форм.

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

Адаптивні поля введення однакової ширини

Ось приклад із медіа-запитами, які змінюють співвідношення при зміні розміру області перегляду.

<!doctype html>
<title>Приклад</title> <style> .wrapper { background-color: whitesmoke; list-style-type: none; padding: 0; border-radius: 3px; } 
.form-row { display: flex; justify-content: flex-end; padding: .5em; } 
.form-row > label { padding: .5em 1em .5em 0; flex: 1; } 
.form-row > input { flex: 2; } 
.form-row > input, .form-row > button { padding: .5em; } 
.form-row > button { background: gray; color: white; border: 0; } 
@media screen and (min-width: 768px) { .form-row > input { flex: 3; } 
} 
@media screen and (min-width: 992px) { .form-row > input { flex: 4; } 
} 
@media screen and (min-width: 1200px) { .form-row > input { flex: 5; } 
}
</style> <form> <ul class="wrapper"> <li class="form-row"> <label for="name">Ім'я</label> <input type="text" id="name">
</li> <li class="form-row"> <label for="townborn">Місце народження</label> <input type="text" id="townborn">
</li> <li class="form-row"> <label for="email">Адреса електронної пошти</label> <input type="email" id="email">
</li> <li class="form-row"> <button type="submit">Надіслати</button>
</li>
</ul>
</form>

Подивіться цю форму на великому екрані, а потім зменшіть розмір браузера. Ви повинні побачити як регулюється ширина полів введення, коли ви зменшуєте вікно браузера.

також

Поля введення однакової ширини

Адаптивні поля введення однакової ширини

Автор та редактори