> For the complete documentation index, see [llms.txt](https://v2-0-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://v2-0-0.pipui.ru/components/form.md).

# Формы

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

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

{% embed url="<https://codepen.io/pipui/pen/NWLbQKP>" %}
Простой пример формы
{% endembed %}

## Input

```html
<input type="text" class="input" placeholder=".input">

<input type="text" class="input focus" placeholder=".input.focus">

<input type="text" class="input" readonly placeholder=".input:readonly">

<input type="text" class="input" disabled placeholder=".input:disabled">
```

{% embed url="<https://codepen.io/pipui/pen/dyqOxaB>" %}
Пример работы кода выше
{% endembed %}

## Select

```html
<select class="input">
    <option value="0">Item #1</option>
    <option value="1">Item #2</option>
</select>

<select class="input focus">
    <option value="0">Item #1</option>
    <option value="1">Item #2</option>
</select>

<select class="input" disabled>
    <option value="0">Item #1</option>
    <option value="1">Item #2</option>
</select>
```

### Multiple

Класс <mark style="color:orange;">`.input`</mark> поддерживает и мультиселекторы

```html
<select class="input" multiple>
    <option value="1">Item #1</option>
    <option value="2">Item #2</option>
    <option value="3">Item #3</option>
    <option value="4" disabled>Item #4 (disabled)</option>
    <option value="5">Item #5</option>
    <option value="6">Item #6</option>
</select>
```

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

## Textarea

```html
<textarea class="input" placeholder=".input"></textarea>
```

### Javascript

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

Для инициализации достаточно использовать следующий скрипт

```html
<textarea class="input" id="textarea1" placeholder=".input"></textarea>

<script>new PipUI.Textarea('#textarea1');</script>
```

## File

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

```html
<label class="input-file btn"><input type="file">Выберите файл</label>
```

## Checkbox

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

```html
<label><input type="checkbox" class="input"> Check it!</label>
```

## Radio

```html
<input type="radio" name="radio_example1" checked class="input">
<input type="radio" name="radio_example1" class="input">
```

## Switch

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

```html
<label class="input-switch"><input type="checkbox" class="input"></label>
```

## Input Block

Блоки помогают использовать дополнительные возможности внутри общего контейнера.

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

```html
<div class="input-block">
    <input type="text" class="input" placeholder=".input">
</div>
```

### Label

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

```html
<div class="input-block">
    <label for="input-example-1"></label>
    <input type="text" class="input" id="input-example-1" placeholder=".input">
</div>
```

### Helper

Вспомогательные блоки служат в качестве дополнительной информации, которая появляется при наведении на контейнер. Данный блок можно использовать вместе с [ярлыками](#label).

```html
<div class="input-block">
    <label for="input-example-1"></label>
    <input type="text" class="input" id="input-example-1" placeholder=".input">
    <div class="input-helper">Block Helper Here</div>
</div>
```

## Prepend / Append

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

Блок <mark style="color:orange;">`.prepend`</mark> выводит дополнительный контент перед полем ввода или селектором, а блок <mark style="color:orange;">`.append`</mark>, соответственно, после. Оба блока являются не обязательными в контейнере и могут использоваться как отдельно, так и вместе.

```html
<div class="input-block">
    <label for="input-block-example2">My Label</label>
    <div class="input-append-prepend">
        <div class="prepend">Hello</div>
        <input type="text" id="input-block-example2" placeholder=".input" class="input">
        <div class="append"><input type="checkbox" class="input"></div>
    </div>
    <div class="input-helper">Скрытая информация, появляющаяся при наведении</div>
</div>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.