Формы в наше время являются неотъемлемой частью сайта, где есть какие-либо поля ввода. 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 для поддержки пронумерованной формы и некоторых особенностей
Пример пронумерованного поля ввода