> For the complete documentation index, see [llms.txt](https://v1-6-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v1-6-0.pipui.ru/components/form.md).

# Формы

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

{% embed url="<https://codepen.io/pipui/pen/xxJRyVW>" %}
Пример формы авторизации
{% endembed %}

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

{% embed url="<https://codepen.io/pipui/pen/GRBNPNd>" %}
Пример стилизации стандартных полей ввода
{% endembed %}

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

{% embed url="<https://codepen.io/pipui/pen/MWBbZpW>" %}
Пример стилизованных переключателей
{% endembed %}

Помимо форм, стилизованных по умолчанию, имеются и атрибуты для их стилизации. Для создания такого компонента, необходимо обернуть элемент формы в блок с классом <mark style="color:orange;">`.input-block`</mark> и задать дополнительный набор элементов

Класс <mark style="color:orange;">`.input-helper`</mark> внутри блока <mark style="color:orange;">`.input-block`</mark> создает скрытый блок информации, который появляется при наведении на <mark style="color:orange;">`.input-block`</mark>

{% embed url="<https://codepen.io/pipui/pen/eYjBbEp>" %}
Пример работы класса input-block
{% endembed %}

До и после формы ввода, можно добавить дополнительные компоненты, например, иконку или checkbox. Для этого необходимо обернуть поле ввода в класс <mark style="color:orange;">`.input-append`</mark>, для добавления компонента после формы или <mark style="color:orange;">`.input-prepend`</mark>, для добавления перед формой. Данные классы можно использовать как отдельно, так и вместе. Для определения самого блока компонента, используйте классы <mark style="color:orange;">`.append`</mark> и <mark style="color:orange;">`.prepend`</mark> соответствующе рядом с полем ввода

{% embed url="<https://codepen.io/pipui/pen/PoBbXJy>" %}
Пример работы append и prepend
{% endembed %}

Форма выбора файла так же может быть стилизована стандартными средствами CSS, посредством помещения самого поля выбора файла внутрь блока с классом <mark style="color:orange;">`.input-block-file`</mark>. Всё остальное его содержимое будет отображаться как обычно

{% embed url="<https://codepen.io/pipui/pen/eYjBbyJ>" %}
Пример стилизованной формы выбора файла
{% endembed %}

Помимо всего прочего, Вы можете обернуть форму типа textarea в класс <mark style="color:orange;">`.textarea`</mark> для поддержки пронумерованной формы и некоторых особенностей

{% embed url="<https://codepen.io/pipui/pen/mdjOapK>" %}
Пример пронумерованного поля ввода
{% endembed %}