Формы

Формы и компоненты форм

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

Пример формы авторизации

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

Пример стилизации стандартных полей ввода

Вы так же можете использовать и стилизованные элементы checkbox и radio, как это представлено ниже

Пример стилизованных переключателей

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

Класс .input-helper внутри блока .input-block создает скрытый блок информации, который появляется при наведении на .input-block

Пример работы класса input-block

До и после формы ввода, можно добавить дополнительные компоненты, например, иконку или checkbox. Для этого необходимо обернуть поле ввода в класс .input-append, для добавления компонента после формы или .input-prepend, для добавления перед формой. Данные классы можно использовать как отдельно, так и вместе. Для определения самого блока компонента, используйте классы .append и .prepend соответствующе рядом с полем ввода

Пример работы append и prepend

Форма выбора файла так же может быть стилизована стандартными средствами CSS, посредством помещения самого поля выбора файла внутрь блока с классом .input-block-file. Всё остальное его содержимое будет отображаться как обычно

Пример стилизованной формы выбора файла

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

Пример пронумерованного поля ввода