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

Как выровнять поля html form?

Результат: Как делать, чтобы все ровно было? И какие есть способы выровнять?

Отслеживать
задан 4 мая 2016 в 13:12
1,301 5 5 золотых знаков 21 21 серебряный знак 38 38 бронзовых знаков
Что вы понимаете под «всё ровно»?
4 мая 2016 в 13:19

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

div.field < padding-bottom: 5px; >div.field label

  
Логин: 
 
Пароль: 
 

Отслеживать
ответ дан 4 мая 2016 в 13:37
1,010 6 6 серебряных знаков 6 6 бронзовых знаков

Самый простой способ, без использования стилей: использовать таблицу.

 
 
  
Логин:
 
Пароль:
 
 

Отслеживать
ответ дан 4 мая 2016 в 13:28
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак

Логин: 
Пароль: 

Отслеживать
ответ дан 4 сен 2020 в 19:31
ramzik2000 ramzik2000
1 1 1 бронзовый знак
4 сен 2020 в 19:34

• html
• html5

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

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

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена 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 .

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

С технологией флексбоксов стало намного проще не только адаптивно верстать сайты, но и выравнивать элементы. Раньше с этим было трудновато. Давайте посмотрим как можно легко и красиво на флексбоксах выровнять элементы формы.

HTML разметка формы

Обернем форму в блок с классом form__wrapper. Сформируем ряды формы из маркированных списков. Один ряд соответствует одному тегу li. Внутри тегов li поместим метки (label) и поля ввода (input). В общей сложности у нас будет 4 ряда, в последнем из которых — кнопка (button).

CSS стили для формы

Пускай контейнер для формы будет шириной в 300 пикселей с отступом в 20 пикселей от нижнего края браузера и по горизонтали расположен в центре.

.form__wrapper width: 300px;
margin: 20px auto;
background-color: #f5f5f5;
border-radius: 5px;
font-size: 16px;
>

Убираем маркерные дефолтные точки.

ul list-style-type: none;
>

Чтобы текст и поля ввода не прилипали к краям контейнера и друг к другу, зададим общему ряду, блоку для меток и инпуту внутренние отступы.

.form__line padding: 8px;
>

.form__line > label padding: 8px 16px 8px 0;
>

.form__line > input padding: 8px;
>

Немного приукрасим кнопку.

.form__row > button background: #808080;
color: #fff;
border: 5px;
padding: 8px;
>

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

Флекс форма

Далее сделаем из обычной формы, флекс форму (гибкую). Свойство justify-content прибъет к левому краю, хаотично разбросанные поля ввода. Создадим из класса form__line, четыре flex-контейнера.

.form__line display: flex;
justify-content: flex-end;
>

Первые три flex-контейнера заполнят flex-элементы (label + input), а последний контейнер — кнопка.

Добавим сокращенную запись flex: 1 к меткам, а для полей ввода flex: 2. Эти свойства управляют размерами элементов, делят между собой свободное пространство в соотношении 1 к 2. В этой статье, вы можете почитать о том, как работают flex-grow, flex-shrink и flex-basis.

.form-line > label flex: 1;
>
.form-line > input flex: 2;
>

При уменьшении окна браузера форма получается адаптивной.

Готовая флекс форма

Создано 31.01.2020 10:32:48

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

Как структурировать HTML-формы

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

Уровень подготовки:	Основы компьютерной грамотности, и базовые знания HTML.
Цель:	Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании.

Гибкость HTML форм делает их одной из самых сложных структур в HTML; вы можете создать любую форму, используя элементы и атрибуты форм. Использование правильной структуры, при создании HTML форм, поможет гарантировать их удобство и доступность.

Элемент

Мы уже встречались с этим в предыдущей статье.

Предупреждение: Внимание: Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера.

Элементы и

form> fieldset> legend>Fruit juice sizelegend> p> input type="radio" name="size" id="size_1" value="small" /> label for="size_1">Smalllabel> p> p> input type="radio" name="size" id="size_2" value="medium" /> label for="size_2">Mediumlabel> p> p> input type="radio" name="size" id="size_3" value="large" /> label for="size_3">Largelabel> p> fieldset> form> 

Примечание: вы можете найти этот пример в fieldset-legend.html (также посмотрите на результат).

Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.

Элемент

label for="name">Name:label> input type="text" id="name" name="user_name" /> 

При правильно связанном элементе с элементом через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие «Name, edit text».

Если не правильно установлен, скринридер прочитает это как «Edit text blank», что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.

Обратите внимание на то, что виджет формы может быть вложен в элемент , как на примере:

label for="name"> Name: input type="text" id="name" name="user_name" /> label> 

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

Лейблы тоже кликабельны!

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

form> p> label for="taste_1">I like cherrylabel> input type="checkbox" id="taste_1" name="taste_cherry" value="1" /> p> p> label for="taste_2">I like bananalabel> input type="checkbox" id="taste_2" name="taste_banana" value="2" /> p> form> 

Примечание: вы можете посмотреть этот пример тут checkbox-label.html (также можно посмотреть код вживую).

Несколько лейблов

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

Рассмотрим этот пример:

p>Required fields are followed by abbr title="required">*abbr>.p> div> label for="username">Name:label> input type="text" name="username" /> label for="username">abbr title="required">*abbr>label> div> div> label for="username"> span>Name:span> input id="username" type="text" name="username" /> abbr title="required">*abbr> label> div> div> label for="username">Name: abbr title="required">*abbr>label> input id="username" type="text" name="username" /> div> 

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

• В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь «edit text blank» и отдельно читаемые тексты-подсказки. Множественные элементы могут быть неправильно интерпретированы программой чтения с экрана.
• Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как «name star name edit text», однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
• Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как «name star edit text».

Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.

Примечание: вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!

Часто используемые с формами HTML-структуры

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

В добавок к элементу часто используют HTML-заголовки (например, (en-US), (en-US)) и секционирование (например, ) для структурирования сложных форм.

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

Активное обучение: построение структуры формы

Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами (en-US) ). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.

1. Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
2. Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента :

link href="payment-form.css" rel="stylesheet" /> 

form>form> 

h1>Payment formh1> p> Required fields are followed by strong>abbr title="required">*abbr>strong >. p> 

section> h2>Contact informationh2> fieldset> legend>Titlelegend> ul> li> label for="title_1"> input type="radio" id="title_1" name="title" value="M." /> Mister label> li> li> label for="title_2"> input type="radio" id="title_2" name="title" value="Ms." /> Miss label> li> ul> fieldset> p> label for="name"> span>Name: span> strong>abbr title="required">*abbr>strong> label> input type="text" id="name" name="username" /> p> p> label for="mail"> span>E-mail: span> strong>abbr title="required">*abbr>strong> label> input type="email" id="mail" name="usermail" /> p> p> label for="pwd"> span>Password: span> strong>abbr title="required">*abbr>strong> label> input type="password" id="pwd" name="password" /> p> section> 

section> h2>Payment informationh2> p> label for="card"> span>Card type:span> label> select id="card" name="usercard"> option value="visa">Visaoption> option value="mc">Mastercardoption> option value="amex">American Expressoption> select> p> p> label for="number"> span>Card number:span> strong>abbr title="required">*abbr>strong> label> input type="number" id="number" name="cardnumber" /> p> p> label for="date"> span>Expiration date:span> strong>abbr title="required">*abbr>strong> em>formatted as mm/yyem> label> input type="date" id="date" name="expiration" /> p> section> 

p>button type="submit">Validate the paymentbutton>p> 

Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):

Протестируйте себя!

Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure (en-US) .

Заключение

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

Смотрите также

• A List Apart: Sensible Forms: A Form Usability Checklist

• Назад
• Обзор: Forms
• Далее

В этом разделе

• Ваша первая HTML форма
• Как структурировать HTML-формы
• Стандартные виджеты форм
• The HTML5 input types (en-US)
• Other form controls (en-US)
• Стили HTML-форм
• Advanced form styling (en-US)
• UI pseudo-classes (en-US)
• Проверка данных формы
• Отправка данных формы

Дополнительные темы

• Как создавать пользовательские виджеты форм
• Sending forms through JavaScript
• Property compatibility table for form widgets (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.