Горизонтальная форма html css

Содержание

Формы
Однострочная форма
Горизонтальная форма
Bootstrap 4. Компонент «Формы»
Вертикальная форма
Горизонтальная форма
Форма в одну строку
Использование сетки
Иконки для полей формы
Подсказки для полей формы
Валидация на стороне сервера
Валидация на стороне клиента

Формы

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

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

Пример 1. Форма для входа на сайт

  Вход на сайт Логин
  
Пароль
 
 Запомнить меня

Форма выглядит скучно (рис. 1), поскольку какое-либо оформление ещё не включено.

Для начала добавим к текстовому полю и полю с паролем класс form-control , это изменит стиль текстовых полей. Далее нужно сгруппировать заголовок и поле за ним, чтобы расстояние между ними было меньше обычного. Добавим и внутрь элемента с классом form-group . Кроме того изменим чекбокс с текстом, добавив их внутрь с классом checkbox и зададим другой вид кнопки. В примере 2 показаны изменения формы.

Пример 2. Применение классов

  Вход на сайт Логин  Пароль   Запомнить меня

В результате форма выглядит иначе (рис. 2).

Однострочная форма

Чтобы сделать форму компактнее, к элементу достаточно добавить класс form-inline . Элементы формы после этого вытянутся в одну строку (рис. 3). Также из кода следует убрать и .

В примере 3 показано создание такой формы.

Пример 3. Однострочная форма

Логин  Пароль   Запомнить меня

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

Горизонтальная форма

Такой вид формы часто встречается на сайтах, когда поле и метка к нему располагаются на одной строке (рис. 4).

Рис. 4. Вид горизонтальной формы

Для создания формы такого вида требуется проделать несколько действий:

к добавить класс form-horizontal ;
к добавить класс control-label , тогда метка поля будет выравниваться по правому краю и по центральной горизонтальной оси поля;
обернуть и в с классом form-group ;
использовать модульную сетку.

Мы уже имели дело с 12-колоночной модульной сеткой, применим эти навыки для управления дизайном формы. Метка будет занимать две колонки, а ширина самого поля — оставшиеся десять колонок. Вместо добавления дополнительного добавим класс col-sm-2 непосредственно к , так немного сократится число элементов кода. Что касается чекбокса и кнопки, то добавим к ним класс col-sm-offset-2 , он сдвинет поля прямо под текстовое поле (пример 4).

Пример 4. Горизонтальная форма

Логин  
 Пароль  
  Запомнить меня

В классах мы использовали префикс sm, чтобы на смартфонах форма выглядела традиционно (рис. 2), а на больших экранах — как горизонтальная.

Источник

Bootstrap 4. Компонент «Формы»

Компонент «Формы» — это набор CSS-классов, которые предназначены для оформления HTML форм: form-group , form-control , input-group , input-group-prepend , input-group-text , form-row , form-inline , invalid-feedback , valid-feedback , is-invalid , is-valid .

Поместить каждую группу элементов (например, input и связанный с ним label ) в элемент div с классом form-group . Этот класс добавляет нижние отступы к группам элементов.
Добавить к каждому текстовому элементу управления формы input , select и textarea класс form-control . Данный класс добавляет к элементам формы стили визуального оформления, размеры и многое другое.

В Bootstrap три вида форм: вертикальная, горизонтальная (с использованием классов .row и .col ) и в одну строку ( .form-inline ).

Вертикальная форма

 class="form-group"> for="input-email">Почта type="email" class="form-control" id="input-email" placeholder="Введите email">  class="form-group"> for="input-password">Пароль: type="password" class="form-control" id="input-password" placeholder="Введите пароль">  class="form-group form-check"> type="checkbox" class="form-check-input" id="remember"> class="form-check-label" for="remember">Запомнить меня  class="form-group"> type="submit" class="btn btn-primary">Войти

Горизонтальная форма

 class="form-group row"> for="input-email" class="col-sm-2 col-form-label">Почта class="col-sm-10"> type="email" class="form-control" id="input-email" placeholder="Введите email">   class="form-group row"> for="input-password" class="col-sm-2 col-form-label">Пароль class="col-sm-10"> type="password" class="form-control" id="input-password" placeholder="Введите пароль">   class="form-group row"> class="col-sm-2">  class="col-sm-10"> class="form-check"> class="form-check-input" type="checkbox" id="remember"> class="form-check-label" for="remember"> Запомнить меня    class="form-group row"> class="col-sm-2">  class="col-sm-10"> type="submit" class="btn btn-primary">Войти

Форма в одну строку

class="form-inline"> for="input-email" class="sr-only">Почта type="email" class="form-control mb-2 mr-sm-2" id="input-email" placeholder="Введите email"> for="input-password" class="sr-only">Пароль: type="password" class="form-control mb-2 mr-sm-2" id="input-password" placeholder="Введите пароль"> class="form-check mb-2 mr-sm-2"> type="checkbox" class="form-check-input" id="remember"> class="form-check-label" for="remember">Запомнить меня  type="submit" class="btn btn-primary">Войти

Использование сетки

 class="row"> class="col"> type="text" class="form-control" placeholder="Имя">  class="col"> type="text" class="form-control" placeholder="Фамилия">  class="col"> type="email" class="form-control" placeholder="Почта">  class="col"> type="password" class="form-control" placeholder="Пароль">

 class="form-row"> class="col"> type="text" class="form-control" placeholder="Имя">  class="col"> type="text" class="form-control" placeholder="Фамилия">  class="col"> type="email" class="form-control" placeholder="Почта">  class="col"> type="password" class="form-control" placeholder="Пароль">

 class="form-row"> class="form-group col-md-6"> for="input-email">Почта type="email" class="form-control" id="input-email" placeholder="Введите email">  class="form-group col-md-6"> for="input-password">Пароль type="password" class="form-control" id="input-password" placeholder="Введите пароль">   class="form-row"> class="form-group col-md-3"> for="input-zip">Индекс type="text" class="form-control" id="input-zip" placeholder="Почтовый индекс">  class="form-group col-md-3"> for="input-city">Город type="text" class="form-control" id="input-city" placeholder="Город доставки">  class="form-group col-md-6"> for="input-address">Адрес type="text" class="form-control" id="input-address" placeholder="Адрес доставки">   type="submit" class="btn btn-primary">Отправить

Пример вертикального выравнивания элементов формы. Ширина каждого элемента определяется содержимым:

 class="row align-items-center"> class="col-auto"> for="input-email" class="sr-only">Почта type="email" class="form-control mb-2" id="input-email" placeholder="Введите email">  class="col-auto"> for="input-password" class="sr-only">Пароль type="password" class="form-control mb-2" id="input-password" placeholder="Введите пароль">  class="form-check mb-2"> class="form-check-input" type="checkbox" id="remember"> class="form-check-label" for="remember"> Запомнить  class="col-auto"> type="submit" class="btn btn-primary mb-2">Войти  class="col-auto"> Поля со звездочкой обязательны

Если не использовать класс align-items-center , то эта форма выглядела бы так:

Иконки для полей формы

 class="form-row"> class="form-group col-md-4"> for="input-name" class="sr-only">ФИО class="input-group"> class="input-group-prepend"> class="input-group-text"> class="fas fa-user">    type="text" class="form-control" id="input-name" placeholder="Фамилия, имя">   class="form-group col-md-4"> for="input-email" class="sr-only">Почта class="input-group"> class="input-group-prepend"> class="input-group-text"> class="fas fa-envelope">    type="email" class="form-control" id="input-email" placeholder="Введите email">   class="form-group col-md-4"> for="input-password" class="sr-only">Пароль class="input-group"> class="input-group-prepend"> class="input-group-text"> class="fas fa-lock">    type="password" class="form-control" id="input-password" placeholder="Введите пароль">   class="form-group col-md-12"> for="input-address" class="sr-only">Адрес class="input-group"> class="input-group-prepend"> class="input-group-text"> class="fas fa-map-marker-alt">    type="text" class="form-control" id="input-address" placeholder="Адрес доставки">    type="submit" class="btn btn-primary">Отправить

Подсказки для полей формы

 class="form-group"> for="input-email">Почта type="email" class="form-control" id="input-email" placeholder="Введите email">  class="form-group"> for="input-password">Пароль type="password" class="form-control" id="input-password" placeholder="Введите пароль"> id="password-help" class="form-text text-muted"> Пароль должен быть длиной 8-20 символов, содержать буквы и цифры и не должен содержать пробелов.  class="form-group"> type="submit" class="btn btn-primary">Регистрация

class="form-inline"> for="input-email" class="sr-only">Почта type="email" class="form-control" id="input-email" placeholder="Введите email"> class="form-group mx-sm-2"> for="input-password" class="sr-only">Пароль: type="password" class="form-control" id="input-password" placeholder="Введите пароль"> id="password-help" class="text-muted ml-sm-2"> Должен быть не менее 8 символов.  type="submit" class="btn btn-primary">Регистрация

Валидация на стороне сервера

Если при проверке данных формы на стороне сервера были обнаружены ошибки, нужно снова показать форму и добавить пояснения, какие поля заполнены правильно, а какие — с ошибкой:

 class="form-row"> class="col-md-4 mb-3"> for="input-name">Имя type="text" class="form-control is-valid" id="input-name" placeholder="Имя" value="Сергей" required> class="valid-feedback">Поле заполнено правильно.  class="col-md-4 mb-3"> for="input-surname">Фамилия type="text" class="form-control is-valid" id="input-surname" placeholder="Фамилия" value="Иванов" required> class="valid-feedback">Поле заполнено правильно.  class="col-md-4 mb-3"> for="input-email">Почта type="text" class="form-control is-invalid" id="input-email" placeholder="Почта" required> class="invalid-feedback">Это поле обязательно.   class="form-row"> class="col-md-3 mb-3"> for="input-zip">Почтовый индекс type="text" class="form-control is-invalid" id="input-zip" placeholder="Почтовый индекс" required> class="invalid-feedback">Это поле обязательно.  class="col-md-3 mb-3"> for="input-city">Город type="text" class="form-control is-invalid" id="input-city" placeholder="Город" required> class="invalid-feedback">Это поле обязательно.  class="col-md-6 mb-3"> for="input-address">Адрес type="text" class="form-control is-invalid" id="input-address" placeholder="Адрес" required> class="invalid-feedback">Это поле обязательно.   class="btn btn-primary" type="submit">Отправить

Валидация на стороне клиента

Благодаря HTML5, можно выполнить все стандартные задачи проверки входных данных на стороне клиента без JavaScript. Для этого достаточно определить тип input поля ( text , email , url и т.п.) и добавить атрибуты required , которые отвечают за обязательность заполнения.

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

class="needs-validation" novalidate> class="form-row"> class="col-md-4 mb-3"> for="input-name">Имя type="text" class="form-control" id="input-name" placeholder="Имя" value="Сергей" required> class="valid-feedback">Поле заполнено правильно.  class="col-md-4 mb-3"> for="input-surname">Фамилия type="text" class="form-control" id="input-surname" placeholder="Фамилия" value="Иванов" required> class="valid-feedback">Поле заполнено правильно.  class="col-md-4 mb-3"> for="input-email">Почта type="text" class="form-control" id="input-email" placeholder="Почта" required> class="invalid-feedback">Это поле обязательно.   class="form-row"> class="col-md-3 mb-3"> for="input-zip">Почтовый индекс type="text" class="form-control" id="input-zip" placeholder="Почтовый индекс" required> class="invalid-feedback">Это поле обязательно.  class="col-md-3 mb-3"> for="input-city">Город type="text" class="form-control" id="input-city" placeholder="Город" required> class="invalid-feedback">Это поле обязательно.  class="col-md-6 mb-3"> for="input-address">Адрес type="text" class="form-control" id="input-address" placeholder="Адрес" required> class="invalid-feedback">Это поле обязательно.   class="btn btn-primary" type="submit">Отправить

(function()  'use strict'; window.addEventListener('load', function()  var forms = document.getElementsByClassName('needs-validation'); var validation = Array.prototype.filter.call(forms, function(form)  form.addEventListener('submit', function(event)  if (form.checkValidity() === false)  event.preventDefault(); event.stopPropagation(); > form.classList.add('was-validated'); >, false); >); >, false); >)();

Источник

Читайте также: Загрузка файла