Тридцатый шестой урок. Расположение элементов формы

Главная сложность, с которой приходится сталкиваться при взаимном расположении элементов формы — это поддержка адаптивности. Самые простые формы, это те, которые не содержат поясняющих надписей. В этом случае они просто делаются «резиновыми», что подходит под любой размер экрана.

<form class="w100 pad20 bor1 bor-solid bor-gray300">
	<p><input type="text" class="w100" placeholder="name"></p>
	<p><input type="text" class="w100" placeholder="phone"></p>
	<p><textarea class="w100" placeholder="message"></textarea></p>
	<p><label><input type="checkbox"> I agree with the rules</label></p>
	<button type="submit" class="i-check">Send</button>
</form>

Данная форма будет хорошо работать на любом экране (проверьте).

Если же форма содержит поясняющие надписи, то проще всего разместить их над элементами формы.

<form class="w100 pad20 bor1 bor-solid bor-gray300">
	<p><label>Name <input type="text" class="w100" placeholder="name"></label></p>
	<p><label>Phone <input type="text" class="w100" placeholder="phone"></label></p>
	<p><label>Message <textarea class="w100" placeholder="message"></textarea></label></p>
	<p><label><input type="checkbox"> I agree with the rules</label></p>
	<button type="submit" class="i-check">Send</button>
</form>

Поскольку все элементы размещаются на отдельных строках (из-за w100), то здесь также не возникает проблем с адаптивностью.

Более сложный вариант — когда поясняющие тексты размещаются перед полями.

<form class="w100 pad20 bor1 bor-solid bor-gray300">
	<p><label>Name <input type="text" placeholder="name"></label></p>
	<p><label>Phone <input type="text" placeholder="phone"></label></p>
	<p><label>Message <textarea placeholder="message"></textarea></label></p>
	<p><label><input type="checkbox"> I agree with the rules</label></p>
	<button type="submit" class="i-check">Send</button>
</form>

Здесь мы видим несколько проблем: поля ввода следует выровнять по левому краю. Тексты тоже следует выровнять так, чтобы они оказались прижаты в правому краю ближе к полям ввода. Текст «Message» следует выровнять по верхнему краю.

Очевидным решением будет использование flex-сетки, где тексты-подсказки будут являться смежными ячейками с полями ввода (по общей ширине). Но при этом LABEL придется переписывать уже с атрибутом for, поскольку мы не сможем объединить ячейки в один LABEL.

Для чекбокса и кнопки делаем по одной пустой ячейке. Чтобы обеспечить между элементами промежутки, используем пустой блок <div class="w100 pad10"></div>.

Для телефонов мы изменяем ширину ячеек так, чтобы все элементы располагались друг под другом.

Посмотрите и изучите результирующий код:

<form class="w100 pad20 bor1 bor-solid bor-gray300 flex flex-wrap">

	<label class="w28 w100-phone t-right t-left-phone" for="f01">Name</label> 
	<input class="w70 w100-phone" id="f01" type="text" placeholder="name">
	
	<div class="w100 pad10"></div>

	<label class="w28 w100-phone t-right t-left-phone" for="f02">Phone</label> 
	<input class="w70 w100-phone" id="f02" type="text" placeholder="phone">
	
	<div class="w100 pad10"></div>
	
	<label class="w28 w100-phone t-right t-left-phone" for="f03">Message</label> 
	<textarea class="w70 w100-phone" id="f03" placeholder="message"></textarea>

	<div class="w100 pad10"></div>
	
	<div class="w28 w100-phone"></div>
	<label class="w70 w100-phone"><input type="checkbox"> I agree with the rules</label>
	
	<div class="w100 pad10"></div>

	<div class="w28 w100-phone"></div>
	<div class="w70 w100-phone"><button type="submit" class="i-check">Send</button></div>
	
</form>

Использование flex-сетки позволяет не только разместить элементы как нужно, но и сразу добавляет адаптивность.

Задание

Задания доступны только после авторизации.