Как выровнять формы в html

Выравнивание элементов форм

До появления флексбоксов выравнивание элементов формы порой вызывало множество труднойстей. Но флексбоксы существенно упрощают этот процесс. Давайте начнём с простого примера.

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

Данная форма использует небольшое форматирование, но ширина всех полей ввода одинакова. Это приводит к тому, что правый край выглядит немного неровным, поскольку поля формы не располагаются прямо друг под другом. Если вас подобное устраивает, то хорошо, и нет необходимости что-либо делать дальше.

Но что если мы хотим растянуть поля ввода до правого края? Без флексбоксов получить такой результат было бы несколько болезненно. Особенно, если сама форма гибкая (то есть она расширяется и сжимается в зависимости от ширины родительского элемента или области просмотра). Если форма гибкая, то каждое поле ввода тоже должно расширяться и сжиматься по мере необходимости. В этом случае вы не можете использовать фиксированную ширину для полей ввода, потому что как только ширина формы изменится, ширина полей станет некорректной. Так что потребуется схитрить, чтобы всё работало правильно.

Тем не менее, флексбоксы позволяют сделать это без каких-либо магических трюков.

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

.form-row

Обратите внимание, что мы также использовали justify-content: flex-end , но это не обязательно. В этом случае кнопка просто перемещается вправо.

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

.form-row > input

Таким образом, применяя flex: 1 к полям ввода, мы заставляем эти поля использовать всё доступное свободное пространство после меток . При этом метки сохраняют свою обычную ширину с учётом padding . Поля ввода начинаются сразу после них и растягиваются до самого конца.

Поля ввода одинаковой ширины

Вы можете изменить приведённый выше пример так, чтобы левый край полей формы также был в линию (как и правый край).

Всё, что мы здесь сделали, это добавили flex: 1 к меткам, а для полей ввода изменили на flex: 2 .

.form-row > label < padding: .5em 1em .5em 0; flex: 1; >.form-row > input

Это задаёт ширину полей формы как удвоенная ширина меток. Вы можете настроить это соотношение в зависимости от ширины формы или ожидаемой ширины. К примеру, можно использовать соотношение 1 к 3 или 1 к 4 для широких форм.

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

Адаптивные поля ввода одинаковой ширины

Вот пример с медиа-запросами, которые меняют соотношение при изменении размера области просмотра.

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

См. также

flex
justify-content
place-content
Выравнивание с помощью флексбоксов
Загрузка файлов
Кнопки
Кнопки
Отправка данных формы
Переключатели
Переключатели
Поле для ввода пароля
Поле для пароля
Пользовательские формы
Построение форм
Свойства flex-контейнера
Скрытое поле
Стилизация переключателей
Стилизация флажков
Сумасшедшие формы
Текстовое поле
Текстовое поле
Флажки
Флажки
Формы в Bootstrap 4
Формы в HTML

Выравнивание элементов в форме по центру.

В этой форме подписки текстовые поля и форма подписки выравниваются по левому краю. Давайте рассмотрим техники, которые позволят выравнять эти элементы по центру.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Сначала давайте займемся элементами

. Здесь все довольно просто, для их выравнивание по центру нужно воспользоваться свойством text-align:center.

.mysubform p text-align:center;>

С кнопкой отправить несколько сложнее, вот стили CSS, которые решают эту проблему.

.mysubform input[type="submit"] < padding:7px; background:rgba(0, 0, 0, 0); color:#FFFC00; border:2px solid #FFFC00; border-radius:5px; margin:auto; width:200px; >

Нужно присвоить кнопке какое-то конкретное значение свойства width и применить свойство margin:auto.

Смотрим результат здесь:

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Выравнивание элементов

За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

   Выравнивание

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.

Выравнивание по горизонтали

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Пример 2. Использование valign

    Выравнивание    Колонка 1  Колонка 2

Пример 3. Применение стилей для выравнивания

    Выравнивание

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .

Выравнивание по центру

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

Рис. 2. Добавление формулы в документ

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

    Выравнивание     (18.6)

В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.

Выравнивание элементов формы

С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

    Выравнивание     Имя E-mail Комментарий

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align=»right» . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

Атрибут align

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

Синтаксис

Значения

В табл. 1 перечислены возможные значение атрибута align и результат его использования.

Табл. 1. Использование значений align

Код HTML	Описание	Пример
	Выравнивание нижней границы изображения по окружающему тексту..	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	Выравнивает изображение по левому краю окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	Выравнивание середины изображения по базовой линии текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	Выравнивает изображение по правому краю окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Значение по умолчанию

HTML 4.01 IE Cr Op Sa Fx

    Тег INPUT, атрибут align   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Примечание

Браузеры также поддерживают значения absbottom , absmiddle , baseline и texttop , которые не включены в спецификацию HTML 4.01.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.