Как сделать инпуты в столбец

Добавил пользователь Евгений Кузнецов
Обновлено: 05.10.2024

Миниатюрные CSS-решения

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

Изменение цвета каретки

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

Перевод вводимых данных в верхний регистр букв

Атрибут autocapitalize позволяет выполнять для виртуальной клавиатуры автоматический перевод данных поля в верхний регистр. Он применяется для

Стоит отметить, что как и inputmode , этот атрибут не будет оказывать на данные никакого эффекта в desktop-версиях. Информации о поддержке мобильными браузерами autocapitalize крайне мало, однако по публикациям на официальных сайтах следует, что атрибут работает как минимум в Safari и Google Chrome.

Добавление готовых вариантов для ввода

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

Для добавления в поле доступных опций в его атрибуте list указывается идентификатор списка, которым, в свою очередь, должен обладать :

Атрибут широко поддерживается браузерами за исключением Safari, Opera Mini и некоторых других. Для старых версий существует полифилл.

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

Анатомия инпута

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

Ключевые элементы инпута:

Container — область интерактивного ввода
Input text — вводимый пользователем текст
Label Text — наименование, которое говорит пользователям какую информацию нужно заполнить в поле.
Placeholder text — это пример информации, который заменяется текстом, который вводит пользователь.
Helper or Validation text (необязательный) — вспомогательный текст, который дает дополнительную информацию о текстовом поле./li>
Leading icon (необязательный) — визуальное отображение целей инпута (в виде иконки)
Trailing icon (необязательный) — дополнительный элемент управления по вводимому тексту, например, очистить, скрыть/показать и т.д.

Типы текстового поля

Большинство из них основаны на базовом инпуте и были изменены, чтобы лучше работать с разными типами информации, например, номера карт. Вот лишь несколько примеров типов ввода, которые наиболее часто используются во всех создаваемых нами UI:

(Мы намеренно не упоминаем о чекбоксах и радиобаттонах, поскольку рассмотрим их позже в отдельной статье):

Используйте соответствующий тип ввода для сбора данных

Это поможет пользователям вводить информацию в нужном формате и избежать ощибок

Инпуты должны меняться в зависимости от состояния и от взаимодействия с пользователем

Это можно сделать с помощью визуальных подсказок, которые будут сообщать состояние инпута. Существует несколько состояний: inactive, hover, disabled, focused, validation, error. Все состояния должны четко различаться и быть единообразными на всех шагах взаимодействия с пользователем.

Выбор стиля инпута

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

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

Лейбл, выровненный по левому краю

Подходят, если запрашиваемые данные неизвестны пользователям.

Преимущества: Легко масштабируемые лейблы, правильное использование вертикального пространства

Недостатки: Расстояние между лейблом и соответствующим инпутом усложняет обработку информации пользователем.

Лейбл, выровненный по правому краю

Заполняются быстрее почти в 2 раза

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

Недостатки: Сложнее быстро отсканировать форму и понять, какая информация для ввода требуется.

Лейбл, выровненный по верхнему краю

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

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

Недостатки: Требуется больше пространства по вертикали.

Длина инпута должна быть пропорциональна ожидаемой вводимой информацией.

Использование одинаковой длины всех инпутов визуально приятней, но затруднит их заполнение пользователем.

Вспомогательный текст в инпутах не являются заменой лейбла

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

Помогайте пользователям заполнить инпут

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

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

Используйте встроенную проверку

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

Уменьшайте количество полей

Это уменьшит зрительную нагрузку, и упростит вид.

Не разбивайте инпуты, как Полное имя и Дата, на несколько полей.
Не запрашивайте одну и ту же информацию несколько раз.
Максимально сокращайте лейблы и вспомогательный текст
Рассмотрите возможность использования “положительной валидации”, она может добавить обрадобвать пользователя.

Скрывайте нередевантные инпуты

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

Используйте условную логику

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

Группировка связанных полей

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

Избегайте использования многоколоночных компоновок

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

Разбивайте сложные формы на несколько простых шагов

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

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

Сведите к минимуму возможность навигации за пределами формы

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

Показывайте соответствующий тип клавиатуры

Android или iOS предоставляет несколько различных типов клавиатур, каждая из которых предназначена для упрощения различного типа ввода. Чтобы упростить ввод данных, клавиатура, отображаемая при редактировании текстового поля, должна соответствовать типу содержимого в этом поле. Будьте внимательны к тому, где появится клавиатура. Чтобы не вводить прокрутку без необходимости, расположите текстовые поля в верхней области.

Прекратите создавать нелепые дизайны создания паролей

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

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

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

И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.

А вот та же форма, в оформлении которой использовали каскадные таблицы стилей.

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

Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.

Определение размеров формы (box-sizing).
Селекторы CSS для элементов ввода (input).
Базовые методы стилизации для текстовых полей ввода.
Стилизация прочих полей ввода.
Псевдоклассы UI.
Элементы ввода, недоступные для кастомизации.

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

1. Устанавливаем box-sizing

Я обычно устанавливаю * не только для форм, но и для веб-страниц. Благодаря этому ширина (width) всех элементов будет содержать внутренние отступы (padding).

Ширина .some-class без box-sizing:border-box будет больше 200px, что может стать проблемой. Поэтому большинство разработчиков используют border-box для всех элементов.

Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.

Совет: универсальный селектор * выбирает все элементы в документе.

2. Селекторы CSS для элементов ввода

Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

3. Базовые методы стилизации для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного текстового поля с плейсхолдером.

Выглядеть это будет так:

Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:

Padding (внутренние отступы)
Margin (внешние отступы)
Border (граница)
Box shadow (тень блока)
Border radius (для скругления границ)
Width (ширина)
Font (шрифт)

Давайте пройдемся по каждому из этих свойств.

Padding

Добавление некоторого внутреннего пространства может повысить четкость. Чтобы это сделать, применяем свойство padding.

Margin

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

Border

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

Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.

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

Box shadow

Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.

Border radius

Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.

Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.

Width

Используйте свойство width, чтобы установить ширину поля ввода.

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

4. Стилизация прочих типов полей ввода

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

Давайте рассмотрим подробнее каждое из них.

Текстовые области (text areas)

Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.

Посмотрите на пример:

Здесь я использовал resize:vertical, чтобы разрешить изменение размера исключительно по вертикали. Такая практика применяется в большинстве форм, поскольку позволяет избежать появления горизонтальной полосы прокрутки.

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

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).

Для стилизации чекбокса используйте следующий HTML-код.

Несколько вещей, на которые нужно обратить внимание:

Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):

See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.

Вот пользовательская радиокнопка:

See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.

В обоих примерах мы использовали одну и ту же концепцию (input:checked).

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

Раскрывающийся список

Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.

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

Но вы не можете стилизовать выпадающие элементы, потому что их стили зависят от операционной системы. Единственный способ изменить их вид — использовать JavaScript.

Кнопки

Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.

Давайте немного украсим нашу кнопку.

5. Псевдоклассы UI

Ниже приведен список псевдоклассов, которые широко используются с элементами форм.

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

:required
:valid и :invalid
:checked (этим мы уже пользовались)

Эти могут использоваться для создания эффектов для каждого состояния:

Примечание: не может содержать другие элементы. А значит, и псевдоэлементы :after или :before. Поэтому нам нужно использовать другой элемент — .

Мы можем сделать то же самое с псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.

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

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

See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.

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

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

Следующий код удаляет внешнюю границу для всех элементов:

Добавляем внешнюю границу для элементов в фокусе:

6. Элементы ввода, недоступные для кастомизации

Стилизация элементов форм всегда была сложной задачей. Есть некоторые элементы, с которыми не многое можно сделать в плане изменения стиля. Например:

Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.

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

Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.

Заключение

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

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.

Проблема

Прежде чем кидаться решать проблему — ее нужно осознать. С чего бы начать? Все зависит от поставленной вам задачи. Например: если требуется, чтобы инпут расширялся в ширину — это одна проблема. Если нужно чтобы он рос в высоту — это проблема другая. А если нужно чтобы сразу во все стороны, тут можно начинать страдать, дело-то непростое.

Главная проблема состоит в том, что элементы ввода не умеют растягиваться по своему содержимому. Это очень досадно и конечно мир был бы лучше, если бы они умели, но увы. Более того, однострочное текстовое поле — input вообще бессмысленно растягивать в высоту, содержимое все равно не ляжет в несколько строк, так уж он устроен. Поэтому дальше начинаются любимые фронтендерами лайфхаки.

Варианты решения

Самый первый, приходящий в топ выдачи гугла — это просто взять и заменить инпут на div с атрибутом contenteditable — и вот оно, проблема решена! Вот вам адаптивный по высоте/ширине див и редактируемое содержимое. Но если для вас (как и для меня) это не вариант, то смотрим дальше.

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

Ну и третий вариант, который мне больше всего пришелся по душе — это все-таки вычислять содержимое текстового инпута и адаптировать его ширину/высоту, чтобы все помещалось. Давайте на него посмотрим чуть более внимательно.

Выбираем правильный инпут

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

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

Тут следует обратить внимание на три обязательных параметра, без которых ничего не сработает: box-sizing, height, min-height.

box-sizing: border-box

В обязательном порядке box-sizing должен быть в значении border-box, чтобы когда вы добавите паддинг в текстовом поле, а вы его обязательно добавите, он не увеличивал дополнительно высоту или ширину текстового поля, а откладывался бы вовнутрь.

height и min-height (width и min-width)

Тут все просто: height — чтобы изначально textarea выглядела бы как input. min-height — чтобы при сбросе значения высоты текстовое поле не прыгало, а оставалось минимально необходимого размера. Все это справедливо и для свойств width и min-width.

Немного теории

Принцип действия очень простой. У каждого DOM-элемента, который может содержать контент, есть readonly-свойство scrollHeight (scrollWidth) которое и содержит так нужную нам, истинную высоту элемента, такую, при которой все содержимое этого элемента будет видно пользователю. Все, что нам требуется — при изменении текстового поля, вычислять значение scrollHeight/scrollWidth и присваивать его текстовому полю.

А для того, чтобы текстовое поле могло еще и возвращаться к своему исходному виду, перед изменением, будем сбрасывать установленную ранее высоту до нуля, для того чтобы свойство scrollHeight корректно бы показало нам, есть ли контент, не умещающийся в текстовом поле.

Немного vanilla JS-практики

Специально не использовала никаких фреймворков, для большей гибкости. Любым удобным способом получаем текстовое поле со страницы и добавляем обработчик события input

Это ввод с клавиатуры. Не стоит забывать, что текстовые поля бывают заполняются автоматически, извне. Для этого добавляем отдельный метод вставки значения:

Ну и давайте для ширины тоже сделаем. Все то же самое, только тут уже берем input, и высоту меняем на ширину.

Результат

Вот такие поля получились. Несложно и недолго.

Адаптивный инпут, растущий в высоту:

Адаптивный инпут, растущий в ширину:

Angular Директива

Для тех, кто дочитал аж до сюда — бонус. Если лень самостоятельно упаковать все это в директиву, я уже все сделала за вас, смотрите:

Здесь используется уже знакомый вам декоратор @HostListener. А если еще не знакомый, то обязательно почитайте статью об этом.

Пример использования:

Да, можно обойтись одним элементом — textarea. Просто, если нужна адаптивность в ширину — добавим CSS-свойство white-space: nowrap — запрет на перенос строк.

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

Читайте также: