Элементы

Форма

Вертикальный ритм полей, поля в ряд, разделы с заголовком, кнопки и сводка ошибок; скрипт показывает ошибки под полями при отправке.

form с версии 0.1.0 со скриптом

Примеры

Создание встречи с проверкой

<form class="form" action="#" method="post" novalidate data-ui-validate>
  <div class="form__errors" role="alert" hidden></div>
  <div class="form__section">
    <div class="form__head">
      <h3 class="form__title">Новая встреча</h3>
      <p class="form__desc">Ссылка на встречу уйдёт всем приглашённым на указанные e-mail.</p>
    </div>
    <div class="field">
      <label class="field__label" for="fm-title">Название</label>
      <input class="field__input" type="text" id="fm-title" name="title" required minlength="3" autocomplete="off" data-ui-error-required="Укажите название встречи">
    </div>
    <div class="form__row">
      <div class="field">
        <label class="field__label" for="fm-email">E-mail организатора</label>
        <input class="field__input" type="email" id="fm-email" name="email" required autocomplete="email">
      </div>
      <div class="field">
        <label class="field__label" for="fm-size">Участников</label>
        <input class="field__input" type="number" id="fm-size" name="size" min="2" max="50" value="5" required>
      </div>
    </div>
  </div>
  <div class="form__section">
    <div class="form__head">
      <h3 class="form__title">Подтверждение</h3>
    </div>
    <label class="check" for="fm-agree">
      <input type="checkbox" id="fm-agree" name="agree" value="1" required data-ui-error-required="Без согласия с правилами встречу создать нельзя">
      <span>Участники предупреждены о записи</span>
    </label>
  </div>
  <div class="form__actions">
    <button class="btn btn--primary" type="submit">Создать встречу</button>
    <button class="btn btn--ghost" type="reset">Сбросить</button>
  </div>
</form>

Две колонки и кнопки справа

<form class="form" action="#" method="post">
  <div class="form__row">
    <div class="field">
      <label class="field__label" for="fm2-name">Имя</label>
      <input class="field__input" type="text" id="fm2-name" name="name" autocomplete="given-name">
    </div>
    <div class="field">
      <label class="field__label" for="fm2-surname">Фамилия</label>
      <input class="field__input" type="text" id="fm2-surname" name="surname" autocomplete="family-name">
    </div>
  </div>
  <div class="form__actions form__actions--end">
    <button class="btn btn--ghost" type="button">Отмена</button>
    <button class="btn btn--primary" type="submit">Сохранить</button>
  </div>
</form>

Установка

bukatchuk-ui add form

Вместе с компонентом установятся: tokens, fonts, base, core, field, button.

Файлы

Файл	Назначение
`form.css`	стили
`form.js`	скрипт
`example.html`	образец разметки, в проект не копируется
`form.jinja.html`	вставка для Jinja

Варианты

Класс	Назначение
`form__actions--end`
`form__actions--split`

Клавиши

Клавиша	Действие
`Enter`	отправить форму; невалидная форма переводит фокус на первое поле с ошибкой
`Tab`	обычный порядок; ссылки из сводки ведут к полям

Макрос для Jinja

{#- Форма. Оболочка: {% call form(action, validate=True) %}…{% endcall %}. Внутри — section(title, desc),
    row(), actions(). validate=True добавляет novalidate и data-ui-validate: ошибки покажет скрипт form.
    Сводка ошибок выводится первой, пока пуста и скрыта. -#}
{% macro form(action='', method='post', validate=True, id=None) -%}
<form class="form"{% if id %} id="{{ id }}"{% endif %} action="{{ action }}" method="{{ method }}"{% if validate %} novalidate data-ui-validate{% endif %}>
  {%- if validate %}
  <div class="form__errors" role="alert" hidden></div>
  {%- endif %}
  {{ caller() }}
</form>
{%- endmacro %}

{% macro section(title=None, desc=None) -%}
<div class="form__section">
  {%- if title or desc %}
  <div class="form__head">
    {%- if title %}<h3 class="form__title">{{ title }}</h3>{% endif %}
    {%- if desc %}<p class="form__desc">{{ desc }}</p>{% endif %}
  </div>
  {%- endif %}
  {{ caller() }}
</div>
{%- endmacro %}

{% macro row() -%}
<div class="form__row">{{ caller() }}</div>
{%- endmacro %}

{% macro actions(align=None) -%}
<div class="form__actions{% if align %} form__actions--{{ align }}{% endif %}">{{ caller() }}</div>
{%- endmacro %}