# Формы

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