как сделать форму в столбик css
Выравнивание полей формы с помощью CSS
Задача
Добиться, чтобы поля ввода находились друг под другом, и при этом их положение определялось максимальной длиной заголовка поля слева. Решение не должно использовать таблиц и JavaScript.
Решение
Выровняем содержимое каждого дива по правому краю и назначим ему обновление потока.
Заставим каждый элемент label «утечь» влево.
Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.
Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:
Добавим в CSS обтекание для этого блока:
Теперь видно, что из-за float элементы перестали находится на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height.
Также зададим отступ между заголовком и полем:
Работающий вариант можно посмотреть здесь. А также заходите на сайт piumosso ))
Построение форм
Формы являются неотъемлемой частью Интернета, так как они предлагают сайтам метод сбора информации от пользователей и обработки запросов, а также элементы управления практически для любого мыслимого применения. С помощью элементов управления или полей, формы могут запросить небольшой объём информации — часто это поисковый запрос, имя пользователя или пароль. Или большой объём информации — возможно, данные о посылке, платёжная информация или предложение работы.
Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.
Инициализация формы
Чтобы добавить форму на страницу мы будем использовать элемент
Демонстрация формы для входа
На практике
С пониманием того как строить формы, давайте создадим страницу регистрации для нашего сайта Styles Conference, чтобы мы могли начать собирать интерес и продавать билеты на мероприятие.
Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент
Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:
Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.
В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:
В данный момент наш маркированный список не содержит маркеры списка. Все стили браузера по умолчанию были выключены сбросом CSS, мы добавили всё обратно в уроке 1. Давайте создадим несколько пользовательских стилей специально для этого списка.
Чтобы сделать это, добавим класс why-attend к маркированному списку.
Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:
Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу
Далее, внутри элемента
Для поля комментариев используется элемент
В разделе Регистрация нашего файла main.css мы хотим добавить следующие стили:
Вы заметите, что большинство из этих свойств и значений вращаются вокруг блочной модели, которую мы рассмотрели в уроке 4. Мы, прежде всего, настроили размеры разных полей формы, гарантируя, что они располагаются должным образом. Помимо добавления некоторых стилей блочной модели, мы настроили color и font-weight у нескольких элементов.
Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.
Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:
Эти новые стили определяют размер и фон нашей кнопки, затем комбинируются с существующими стилями класса btn и создают финальную презентацию нашей кнопки.
Наша страница Регистрация закончена и посетители теперь могут начать бронировать билеты.
Рис. 10.07. Наша страница регистрации с формой
Демонстрация и исходный код
Ниже вы можете скачать исходный код сайта на данный момент.
Резюме
Формы играют большую роль в том, как пользователи взаимодействуют с сайтами, предоставляют им информацию и работают с ними. Мы предприняли все правильные шаги, чтобы не только узнать как создавать формы, но и как их стилизовать.
Напомним быстро, что мы обсудили в этом уроке:
Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.
Способы построения колонок в CSS
Мы рассмотрим варианты построения макета на основе 4 колонок. Во-первых, такое распределение информации является очень популярным, во-вторых, они хорошо перестраиваются в 2 колонки для планшетов и в одну для телефонов. В третьих, все размеры в примерах указаны в процентах, и при небольшом изменении ширины вы получите 2-х, 3-х или 5-6-колоночный макет.
Остальные стили будут зависеть от способа формирования колонок.
Все примеры находятся на ресурсе codepen.io и могут быть открыты для редактирования на нем с помощью кнопки 
. Кроме того, примеры подразумевают наличие правил для различных разрешений экрана. Чтобы протестировать изменение внешнего вида при различных разрешениях экрана, переключитесь в Full Page View, щелкнув на кнопке Change View в правом верхнем углу. Кнопка Settings позволит вам посмотреть настройки для различных вкладок, например, увидеть ссылку на GoogleFonts для загрузки шрифта из примера.
Надеюсь, что с общими параметрами и настройками примеров все понятно, поэтому перейдем сразу к практике.
Варианты, основанные на Flexbox-модели
Flexbox-модель стала очень популярной за счет своей гибкости и легкости перестраивания размеров под любые разрешения экранов. Именно поэтому ее использует такие популярные фреймворки, как Bootstrap, Foundation, и другие.
Мы рассмотрим здесь 3 варианта построения колонок на основе Flexbox-модели, основанные на разных принципах.
Вариант 1. Колонки а-ля Bootstrap-4
Вариант 2. Колонки, распределяемые по ширине за счет свойства justify-content: space-between
Вариант 3. Колонки с внешними отступами
Варианты 4-хколоночного макета на основе Grid
Способ 1. Использование grid-template-columns: 1fr 1fr 1fr 1fr и колонок с внешними отступами
Способ 2. Использование повторения и колонок с внутренними отступами
Обратите внимание на стили в медиа-запросах. Они по сути похожи, но отличаются вариантами записи.
Использование колонок со свойством display: inline-block
Способ 1. Колонки только с внутренними отступами
По сравнению со строчными элементами строчно-блочные (а именно так можно перевести значение свойства display: inline-block ) позволяют нормально отобразить все отступы и ширину элемента, но выстраиваются в одну линию друг рядом с другом, а не один под другим, как блочные теги. Поэтому их вполне можно использовать для построения колонок. Тем не менее у них есть ряд особенностей, которые могут привести к непониманию того, почему последний элемент (колонка) съезжает вниз.
Собственно, в примере ниже учтено то, что после каждого inline-block-элемента образуется отступ в 1 пробельный символ, а также то, что колонки разной высоты выравниваются по нижней, а не по верхней линии.
Способ 2. Колонки с внутренними и внешними отступами
Смотрим на реализацию. Обращаем внимание на свойства в медиа-запросах.
Использование CSS свойства columns
Использование свойств display: table + display: table-cell для колонок
Таблицы в свое время использовались для верстки сайтов, хотя для этой цели не разрабатывались. Плюсом их использования было то, что все ячейки таблицы всегда имеют одинаковую высоту и размещаются плотно друг к другу. Поэтому раньше колонки формировали с помощью тегов
Внутри колонок есть внутренние отступы ( padding ), т.к. их можно задавать для ячеек. А вот внешние ( margin ) задавать бесполезно (можете раскомментировать строку 28 на вкладке CSS и убедиться самостоятельно. Для того чтобы задать внешние, необходимо использовать свойство, характерное для стилевого оформления таблиц, а именно border-spacing (раскомментируйте строку 19 примера).
CSS Grid. Практические примеры
Ежемесячная рассылка CSSSR
Новости, свежие статьи и многое другое
Поделиться
Будущее наступило: CSS Grid поддерживается всеми современными браузерами, девтулзы для работы с ним доступны и в Firefox, и в Хроме, а с автопрефиксером и осторожностью можно использовать гриды даже в IE 10/11.
Но, знакомясь с туториалами, я заметил, что большинство из них фокусируются либо на том, как работают конкретные свойства, либо на том, как сверстать постер или журнальный разворот. Да, это интересно, помогает погрузиться в тему и показывает всю мощь нового инструмента, но как использовать полученные знания в работе?
В этой статье я хочу поделиться накопленным за последний год опытом использования CSS Grid в коммерческих проектах. Ниже я разберу примеры, как применять гриды для вёрстки всей страницы, групп элементов и отдельных компонентов.
Для демонстрации я буду пользоваться девтулзами Хрома:
Если вы пока мало знакомы с гридами, статья всё равно может оказаться полезной, но за подробным описанием свойств и их возможных значений советую обращаться к гайду от CSS-Tricks.
Колоночная сетка
Начнём с того, как использовать гриды для вёрстки всей страницы. Если вы привыкли верстать стандартной колоночной сеткой (например, из бутстрапа), то гриды с лёгкостью позволяют придерживаться такого подхода.
Для этого достаточно создать грид-контейнер с 12 равными по ширине колонками, а дальше у детей указывать, какие колонки им занять:
Чтобы адаптировать такую вёрстку под маленькие разрешения, можно заменить сетку на 6-колоночную и обновить позиции элементов:
Пример использования такого подхода можно увидеть на нашем лендинге:
С CSS Grid можно не ограничиваться колонками и задать количество строк ( grid-template-rows ) тоже, чтобы иметь возможность точно позиционировать каждый элемент ( grid-row ).
Разметка страницы на области
Возможности CSS Grid не заканчиваются на колоночной сетке и включают новый способ размечать страницу. С помощью grid-template-areas можно разделить страницу на области, а части страницы раскидать по этим областям:
На флексах для такого простого лейаута пришлось бы делать несколько вложенных обёрток, а информация о размерах блоков размазалась бы по обёрткам и их детям. C CSS Grid всё это лежит в одном месте — в контейнере. При этом описание областей в CSS даёт представление о том, как результат будет выглядеть в браузере.
Более того, в такую разметку легко добавить адаптив, ничего не меняя в детях:
Вот полный код примера:
Витрина карточек
От лейаута страницы переходим к её содержимому.
Витрина — пожалуй, самый часто встречаемый контейнер для однородных элементов. С помощью неё могут отображаться товары интернет-магазина, новости, фотографии в альбоме, в общем, что угодно прямоугольной формы.
Верстая такую витрину на флексах, я каждый раз сталкивался с одними и теми же проблемами:
Гриды решают все эти проблемы буквально в 3 строки:
Вот полный код примера:
Другие варианты витрин на гридах:
Форма
Типичная форма состоит из 2 столбцов: в левом идут названия полей, в правом — инпуты. Проблема с таким расположением иногда заключается в том, что мы не знаем, какой длины будут названия полей, но хотим, чтобы все строки формы были выровнены.
Сделать такое на флексах можно, только захардкодив ширину левой колонки, чтобы в каждой строке она была одинаковой. Можно сделать на table, но это будет использованием не по назначению. И тут на помощь приходит CSS Grid:
Чтобы сделать форму вертикальной на мобильных, мы можем заменить сетку на 1-колоночную и уменьшить отступ между лейблом и инпутом, образовавшийся из-за grid-gap :
И на десктопном, и на мобильном разрешениях кнопка сабмита занимает полную ширину контейнера. Это происходит благодаря следующей строчке:
Эта запись означает, что кнопка будет расположена между самой первой вертикальной линией сетки (1) и самой последней (-1). То есть она будет занимать целую строку, независимо от того, сколько в сетке столбцов.
Вот полный код примера:
Группировка ячеек
Элемент с display: contents при рендеринге заменяется своими детьми, поэтому если такой элемент лежит внутри грид-контейнера, то его дети будут располагаться на сетке так, будто они сами лежат внутри грид-контейнера.
Так как сам элемент с display: contents не рендерится, то и визуальных свойств у него быть не может. Но зато он может реагировать на события мыши и определять css-переменные. Вот пример, как с помощью такого элемента реализовать ховер на группу ячеек грида:
Карточка с вариациями отображения
Теперь переходим к конечным компонентам, при вёрстке которых нас тоже может выручить грид.
Один из таких компонентов — информационная карточка (например, товара или объявления). Часто у таких карточек есть не один вариант отображения, а сразу несколько. Например, нам нужно реализовать адаптив, красиво утрамбовывая элементы карточки в меньший объём. Или предоставить несколько вариантов отображения для разных мест размещения: на витрине, в рекламе или в попапе предпросмотра.
Гриды позволяют красиво решать такие задачи, даже не меняя HTML-разметку. Для примера разберём вот такую карточку объявления о сдаче в аренду квартиры:
Все 3 состояния используют одну HTML-разметку, но в CSS у них разная конфигурация областей и положения элементов. Обратите внимание, что на размерах M и S некоторые блоки располагаются друг поверх друга. Это тоже сделано на гридах, но уже с помощью наложения.
Наложение элементов в одной области
Частичное наложение элементов
В данном примере кнопка частично накладывается на фото, но избегает наложения на текст справа от неё. С абсолютным позиционированием достигнуть такого эффекта было бы сложнее, так как кнопка была бы вырвана из потока и наезжала на текст.
Столбчатая диаграмма
Ещё один пример из практики — график столбиками (bar chart). Тут использование грида позволяет каждому сегменту графика пропорционально растягивать всю колонку:
В реальной жизни количество сегментов было динамическое, так что значение для свойства grid-template-columns формировалось в JS. Тут для упрощения возьмём график из 3 сегментов с разным количеством столбиков в каждом. Для каждой вертикальной и горизонтальной линии указываем название, чтобы проще было располагать на этих линиях элементы:
Теперь можно довольно легко добавить вариации положений основных элементов графика: лейблов, оси, единиц измерения. Благодаря именованным линиям, можно явно описывать, на какую линию мы хотим переместить элемент:
Попробовать переключение в деле можно, покликав на кнопки под графиком:
Ложки дёгтя
Используя CSS Grid, стоит учитывать и некоторые ограничения:
Заключение
По итогам года с гридами могу сказать, что использование CSS Grid не только упростило мою работу, но и сделало её интереснее. Гриды не пытаются заменить флексбокс или таблицы, а дают верстальщикам современный и мощный инструмент. Когда удаётся использовать гриды для подходящей задачи, решение обычно получается простым и наглядным.
Надеюсь, на этих примерах мне удалось показать пользу гридов, а кого-то даже вдохновить их попробовать.