Преимущества использования CSS Grid для макета веб-формы

Верстка и дизайн форм — фундаментальная, но разочаровывающая часть веб-дизайна и разработки. Спросите любого, кто когда-либо пытался <select><label>

В 2016 году я написал « Делайте формы забавными с помощью Flexbox », в которых указывалось , как с помощью Flexbox можно решить несколько трудностей с формами. Ключевым преимуществом была согласованность порядка исходного кода HTML, причем <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>

 input:checked + label {
  font-weight: bold;
}

Flexbox может затем использоваться для:

• переместите метку, если это необходимо, то есть переместите ее влево от поля для ввода текста, полей выбора и текстовых полей.
• Выровняйте метку и поле по вертикали.

Также стало возможным стилизовать метки в зависимости от состояния их поля с помощью соседних селекторов, например, применения полужирного шрифта к метке, когда установлен соответствующий флажок:

 display: flex;

Дефектные формы Flexboxed

К сожалению, существует множество проблем с использованием Flexbox для макета формы. Flexbox создает одномерный макет, где каждый элемент следует за другим, и при необходимости переносится на новую строку. Пары поля / метки должны быть размещены в элементах контейнера с 10em применяется для гарантии каждого появляется в новом ряду.

Также было необходимо определить фиксированную ширину метки, например, <div> Если длинная метка требует больше места, ее текст либо переполнится, либо изменит размер элемента и выровняет поле по отношению к другим.

Наконец, формы обычно располагаются в сетке. Разве мы не должны использовать CSS Grid сейчас, когда он полностью поддерживается во всех основных браузерах ? Абсолютно!

Подход к разработке

Большинство статей CSS Grid демонстрируют эти концепции и могут предоставить изящные альтернативы деградации для старых браузеров. Такой подход идеален, когда макет в основном декоративный — например, позиционирование содержимого страницы, верхних и нижних колонтитулов и меню. Это редко имеет значение, когда oldBrowserX показывает линейные блоки в необычном порядке, потому что содержимое страницы остается пригодным для использования.

Макет формы более важен: неправильная метка может привести к тому, что пользователь введет информацию в неправильное поле. По этой причине в этом учебнике используется прогрессивный подход:

1. Первоначальный макет плавающей формы будет работать во всех браузерах, включая IE8 + (который также не поддерживает Flexbox). Это не будет идеально, но поплавки никогда не были!
2. Улучшите макет формы с помощью CSS Grid во всех современных браузерах.

Приведенные ниже примеры содержат очень мало CSS-классов, и стилизация применяется непосредственно к элементам HTML. Это не BEM- способ, но намеренно держать код чистым и понятным без отвлекающих факторов.

Вы можете рассмотреть возможность использования аналогичного кода в качестве основы для всех форм на вашем сайте.

HTML

Типичная HTML-форма может содержаться в чистоте, поскольку нет необходимости содержать ( <form action="get">
<fieldset>
<legend>Your web development skillset</legend>

<div class=«formgrid«>

<input id=«name« name=«name« type=«text« />
<label for=«name«>name</label>

<select id=«experience« name=«experience«>
<option value=«1«>1 year or less</option>
<option value=«2«>2 years</option>
<option value=«3«>3 — 4 years</option>
<option value=«5«>5 years or more</option>
</select>
<label for=«experience«>experience</label>

<input id=«html« name=«html« type=«checkbox« />
<label for=«html«>HTML</label>

<input id=«css« name=«css« type=«checkbox« />
<label for=«css«>CSS</label>

<input id=«javascript« name=«javascript« type=«checkbox« />
<label for=«javascript«>JavaScript</label>

<textarea id=«skills« name=«skills« rows=«5« cols=«20«></textarea>
<label for=«skills«>other skills</label>

<button type=«submit«>SUBMIT</button>

</div>

</fieldset>
</form>

 <div class="formgrid">

Единственный дополнительный элемент — это display: grid Браузеры не могут применять display: flexfieldset/* fallback 30%/70% float layout */
input, output, textarea, select, button {
clear: both;
float: right;
width: 70%;
}

label {
float: left;
width: 30%;
text-align: right;
padding: 0.25em 1em 0 0;
}
Это в конечном итоге может быть исправлено, но в настоящее время требуется внешний контейнер.

Макет формы Float Fallback

После некоторого начального стиля шрифта и цвета макет с плавающей точкой выделит:

 width:auto

 .container {
  display: grid;
}

 .container {
  display: grid;
  grid-template-columns: 10% 1fr 2fr 12em;
  grid-gap: 0.3em 0.6em;
}

 fr

 /* grid layout */
@supports (display: grid) {
  ...
}

 .formgrid {
  display: grid;
  grid-template-columns: 1fr 1em 2fr;
  grid-gap: 0.3em 0.6em;
  grid-auto-flow: dense;
  align-items: center;
}

input, output, textarea, select, button {
  grid-column: 2 / 4;
  width: auto;
  margin: 0;
}

 input[type="checkbox"], input[type="radio"] {
  grid-column: 1 / 3;
  justify-self: end;
  margin: 0;
}

 label, input[type="checkbox"] + label, input[type="radio"] + label {
  width: auto;
  padding: 0;
  margin: 0;
}

 textarea + label {
  align-self: start;
}