# pt-form

Паттерн `pt-form` — это визуальное представление веб-формы, которая принимает и отправляет данные пользователя.

```html
<div class="pt-form">
    <div class="pt-form__section">
        <div class="pt-form__item"></div>
        <div class="pt-form__item"></div>
    </div>
    <div class="pt-form__section">
        <div class="pt-form__item"></div>
        <div class="pt-form__item"></div>
    </div>
</div>
```

## Живые примеры и дизайн

[pt-form на whitepaper.tools](http://whitepaper.tools/doc.html#/pt-form)


## Модификаторы блока

Модификаторы     | Значение                           | Описание
---------------- | ---------------------------------- | --------------------------------------------------
`view`           | `default`                          | Фон всей формы
`border`         | `around` `all`(depricated)        | Обводка всей формы
`bordered`       | —                                  | Разделение строк формы полоской
`vertical-align` | `bottom` `center` `baseline` `top` | Выравнивание конента в элементах item по вертикали
`space-a`        | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Отступы со всех сторон у вложенных элементов `item`
`space-h`        | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Отступы по горизонтали у вложенных элементов `item`
`space-v`        | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Отступы по вертикали у вложенных элементов `item`
`structure`      | `10-90` `20-80` `30-70` `40-60` `50-50` `60-40` `70-30` `80-20` `90-10` | Задает пропорцию между лейблом и контролами внутри элементов item

___


## Элементы блока

Элемент   | Описание
--------- | -----------------------------------------
`item`    | Строчка формы
`section` | Логическая группа строк формы
`label`   | Лейбл для инпута или другого контрола
`control` | Контейнер для инпута или другого контрола

___


### Элемент section

Обёртка для логической группы элементов `item`. Форма может не иметь section

Модификаторы элемента `section` | Значение                                      | Описание
------------------------------- | --------------------------------------------- | ----------------------------
`space-v`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Вертикальные отсутпы
`border`                        | `top` `bottom` `both`                         | Разделители сверху или снизу

___


### Элемент item

Основные дочерние элементы паттерна — элементы `item`.

Модификаторы элемента `item` | Значение | Описание
---------------------------- | -------- | --------------------------------------
`no-structure`               | –        | Отмена выстраивания элементов в строку

___


### Элементы label и control

Используются в паре, когда лейбл и контрол должны стоять в одну строку. В этом случае у их родительского `pt-form` должен быть модификатор `structure`.

```html
<div class="pt-form pt-form_structure_30-70">
    <div class="pt-form__item">
        <div class="pt-form__label"></div>
        <div class="pt-form__control"></div>
    </div>
</div>
```

Если для конкретной строки не нужно ставить контрол и лейбл в одну строку, но в остальных такое используется, то для конкретного item можно применить модификатор `no-structure`

```html
<div class="pt-form pt-form_structure_30-70">
    <div class="pt-form__item">
        <div class="pt-form__label"></div>
        <div class="pt-form__control"></div>
    </div>
    <div class="pt-form__item pt-form__item_no-structure">
        <div class="pt-form__label"></div>
        <div class="pt-form__control"></div>
    </div>
</div>
```

Модификаторы элемента `control` | Значение                    | Описание
------------------------------- | --------------------------- | --------------------------------------
`distribute`                    | `default` `between` `right` | Распределение элементов по горизонтали
`vertical-align`                | `top` `center` `bottom`     | Распределение элементов по вертикали