Главная сложность, с которой приходится сталкиваться при взаимном расположении элементов формы — это поддержка адаптивности. Самые простые формы, это те, которые не содержат поясняющих надписей. В этом случае они просто делаются «резиновыми», что подходит под любой размер экрана.
<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-сетки позволяет не только разместить элементы как нужно, но и сразу добавляет адаптивность.
Задания доступны только после авторизации.