От автора: скажу честно: в HTML формах мало чего забавного, но они являются неотъемлемой частью веб-разработки. И к счастью для нас, некоторые устоявшиеся проблемы можно решить при помощи CSS flexbox.
Давайте посмотрим, как формы создаются без flexbox. Какую разметку вы возьмете для следующих полей?
Обычно мы используем разметку типа:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div> <label for="name">name</label> <input id="name" name="name" type="text" /> </div> <div> <label for="experience">experience</label> <select id="experience" name="experience"><!-- options --></select> </div> <div> <input id="html" name="html" type="checkbox" /> <label for="html">HTML</label> </div> <div> <input id="css" name="css" type="checkbox" /> <label for="css">CSS</label> </div> <div> <input id="javascript" name="javascript" type="checkbox" /> <label for="javascript">JavaScript</label> </div> |
Как только вы начинаете прописывать стили, возникает ряд проблем:
Исходный порядок лейблов и ассоциированных с ними полей зависит от типа полей. Лейбл обычно располагается перед полем формы, но с чекбоксами и радиокнопками его лучше помещать после. Если вы меняете тип полей, вам нужно менять их порядок.
Довольно сложно одинаково выровнять и задать одинаковый размер для полей input, textarea и select. У большинства таких полей есть свои стили по умолчанию, которые могут неожиданно меняться в отдельных браузерах.
Только методом проб и ошибок можно выровнять лейблы с соответствующими полями формы.
Если лейбл расположен перед полем формы, невозможно изменить его стили, при активации поля или изменении состояния контента (на данный момент).
Flexbox решает эти проблемы. Мы можем писать чистый и последовательный HTML код, где лейблы будут расположены после полей, и нам не придется использовать классы-хелперы.
Что такое Flexbox?
Flexbox – волшебный способ позиционирования нескольких элементов на странице. Все элементы можно выровнять горизонтально, вертикально, отсортировать в обычном и противоположном порядке, а также изменить их размер по отношению к другим элементам. Flexbox довольно запутанный инструмент, и даже после нескольких месяцев работы с ним вам может понадобиться документация. Базовый код включения flexbox:
|
1 2 3 |
.container { display: flex; } |
Вот и все. Все дочерние элементы контейнера .container теперь являются элементами flexbox, который выстроит их по умолчанию в один ряд.
Главное отличие flexbox от систем сеток типа CSS Grid Module в том, что flexbox работает в одном измерении. Элементы flexbox выстраиваются в одну линию и по необходимости оборачиваются в контейнеры. В сетках же используются колонки и строки без контейнеров.
Flexbox слабее сеток, но он идеально подходит для выстраивания мелких компонентов типа меню, списков и полей форм.
Почему нет классов?
Люди, работающие с SMACSS и BEM, могут ужаснуться отсутствию классов в этой статье. HTML код и CSS должны быть чистыми и понятыми без лишних отвлекающих факторов.
Код можно было бы рассматривать, как базовые стили для всех форм на сайте, если на сайте используется один макет. Классы добавить можно, но они необязательны для небольших сайтов или демонстраций.
Подключаем flexbox к форме
Код к изображению выше можно посмотреть в этом демо:
Посмотрите на HTML код, и вы увидите, что теги label везде расположены после полей формы, несмотря на их тип.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div> <input id="name" name="name" type="text" /> <label for="name">name</label> </div> <div> <select id="experience" name="experience"><!-- options --></select> <label for="experience">experience</label> </div> <div> <input id="html" name="html" type="checkbox" /> <label for="html">HTML</label> </div> |
Каждый div — flexbox контейнер, а свойство align-items: center выравнивает лейблы и поля по вертикали:
|
1 2 3 4 |
fieldset div { display: flex; align-items: center; } |
Поля формы и лейблы теперь являются flexbox элементами, но в большинстве случаев они расположены в неправильном порядке. Лейбл должен идти первым:
Так форма отображается в старых браузерах типа IE9 и ниже. Исправить это можно с помощью свойства order, которое принимает положительное или отрицательное число. Чем меньше это число, тем раньше элемент отображается на странице:
|
1 2 3 4 5 6 7 8 9 10 |
label { order: 1; width: 10em; padding-right: 0.5em; } input, textarea, select { order: 2; flex: 1 1 auto; } |
Для идеального выравнивания лейблов мы использовали свойства width и padding. Один минус flexbox – если текстовые лейблы будут длиннее, придется вручную настраивать ширину.
Обратите внимание на свойство flex: 1 1 auto, заданное для полей input, textarea и select. Свойство flex – это сокращение, которое определяет, как элемент будет изменяться в доступном ему пространстве. Принимаются три значения:
flex-grow – пространство, на которое элемент может вырасти по отношению к другим элементам. Например, значение 2 говорит, что элемент будет в два раза шире любого элемента со значением 1.
flex-shrink – пространство, на которое элемент может сжаться.
flex-basis – изначальная ширина флекс-элемента.
Свойство flex: 1 1 auto говорит: «используй все свободное пространство». Поля формы используют такие же размеры, и нет нужды возиться с padding’ами b border’ами!
К сожалению, теперь наши чекбоксы имеют неправильные стили, но мы можем напрямую указать стили для чекбоксов и радиокнопок. Да, этого не было бы, если бы мы использовали классы! Код ниже помещает эти поля перед лейблами, останавливает, используя все пространство, и применяет внешний отступ margin, равный ширине лейбла:
|
1 2 3 4 5 6 |
input[type="checkbox"], input[type="radio"] { order: 1; flex: none; width: auto; margin-left: 10em; } |
Мы также можем найти лейблы при помощи родственных селекторов (~ или +), так как они идут сразу после полей формы. Можно отключить ширину по умолчанию и задать небольшой padding:
|
1 2 3 4 |
input[type="checkbox"] ~ label, input[type="radio"] ~ label { width: auto; padding-left: 0.4em; } |
Добавьте щепотку цветов и стилей, и мы получим хорошую форму, которая будет отлично смотреться с любыми полями.
Стилизация лейблов
Еще один плюс того, что лейблы идут после полей формы, в том, что мы можем их стилизовать под состояние полей. К примеру, можно сделать лейбл красным, когда поле получает фокус:
|
1 2 3 |
input:focus ~ label, textarea:focus ~ label, select:focus ~ label { color: #933; } |
или сделать текст лейбла полужирным, когда чекбокс или радиокнопка нажаты:
|
1 2 3 |
input:checked ~ label { font-weight: bold; } |
Парочка CSS переходов, и вы сможете изменять размер лейблов, двигать их, плавно показывать и т.д.
Поддержка flexbox в браузерах
Flexbox поддерживается во всех современных браузерах. В IE11 есть несколько проблем, но они относятся к более сложным свойствам, не тем, которые мы использовали в нашей статье. В IE10 нужен префикс –ms-, с ним все работает.
В старых браузерах все поля отображаются перед лейблами, однако порядок вкладок остается правильный. Все зависит от типа используемого поля.
Замешательство вызывают лишь скрин ридеры. Проблемы могут возникнуть в том случае, если скрин ридер будет полагаться на исходный порядок расположения элементов в HTML, а не на лейблы. Я не слышал про какие-то другие проблемы со скрин ридерами. Дайте мне знать, если вы сталкивались с чем-либо!
Если эта статья побудила вас использовать flexbox на всех формах, имейте в виду, что свойство display: flex нельзя применить к элементам
