Форма

Поля, в которые человек вводит текст, в тех состояниях, в которые их ставит настоящая форма. Все они лежат в rst-box с отступами, потому что именно это предполагают эти партиалы.

Каждый пример работает, но его ссылки никуда не ведут. HTML показывает разметку для копирования.

field

Подпись, поле, необязательная подсказка, пояснение и ошибка. Обычный текстовый элемент с явным ID.

Без ничего

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_bare">Название</label>
  <input rst-input type="text" id="f_bare" name="f_bare">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field" dict "ID" "f_bare" "Name" "f_bare" "Label" "Название"}}

С подсказкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_hint">Слаг <span rst-field-hint>(строчными буквами, без пробелов)</span></label>
  <input rst-input type="text" id="f_hint" name="f_hint">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_hint"
    "Name" "f_hint"
    "Label" "Слаг"
    "Hint" "строчными буквами, без пробелов"}}

Со справкой под элементом управления

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_help">Электронная почта</label>
  <input rst-input type="email" id="f_help" name="f_help" autocomplete="email" aria-describedby="f_help-help">
  <p rst-field-help id="f_help-help">Мы используем его только для того, чтобы присылать вам ответы.</p>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_help"
    "Name" "f_help"
    "Label" "Электронная почта"
    "Type" "email"
    "Help" "Мы используем его только для того, чтобы присылать вам ответы."
    "Autocomplete" "email"}}

Обязательное

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_required">Полное имя</label>
  <input rst-input type="text" id="f_required" name="f_required" required>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_required"
    "Name" "f_required"
    "Label" "Полное имя"
    "Required" true}}

С ошибкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_error">Электронная почта</label>
  <input rst-input type="email" id="f_error" name="f_error" value="grace@" aria-invalid="true" aria-describedby="f_error-error">
  <p rst-field-error id="f_error-error" role="alert">Это не похоже на адрес электронной почты.</p>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_error"
    "Name" "f_error"
    "Label" "Электронная почта"
    "Type" "email"
    "Error" "Это не похоже на адрес электронной почты."
    "Value" "grace@"}}

Короткое

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_short">Почтовый индекс</label>
  <input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_short"
    "Name" "f_short"
    "Label" "Почтовый индекс"
    "Short" true
    "Value" "D02 XY45"}}

Главное поле

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_primary">Название</label>
  <input rst-input="primary" type="text" id="f_primary" name="f_primary" value="Ежеквартальное заседание совета">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_primary"
    "Name" "f_primary"
    "Label" "Название"
    "Primary" true
    "Value" "Ежеквартальное заседание совета"}}

field-text

Одно текстовое поле с подписью, идентификаторы выводятся из Name. Звёздочка обязательности помечена aria-hidden: программный сигнал — атрибут required у поля.

Без ничего

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_bare">Название</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-text" dict "Name" "ft_bare" "Label" "Название"}}

С подсказкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_hint">Заголовок</label>
  <input rst-input id="ft_hint" name="ft_hint" type="text" aria-describedby="ft_hint-hint">
  <small rst-field-hint id="ft_hint-hint">Показывается в списке.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_hint"
    "Label" "Заголовок"
    "Hint" "Показывается в списке."}}

Обязательное

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_required">Отображаемое имя <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_required"
    "Label" "Отображаемое имя"
    "Required" true
    "Autocomplete" "nickname"}}

С ошибкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_error">Название</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="Примечания к выпуску" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">Запись с таким названием уже существует.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_error"
    "Label" "Название"
    "Value" "Примечания к выпуску"
    "Error" "Запись с таким названием уже существует."}}

Главное поле

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_primary">Что это?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="Ежеквартальное заседание совета">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_primary"
    "Label" "Что это?"
    "Value" "Ежеквартальное заседание совета"
    "Primary" true}}

Добавьте Primary к главному полю формы — например, к заголовку или имени, — чтобы поле стало заметнее.

field-url

Поле для веб-адреса, которое принимает example.com с https:// и без него. На сервере используйте его вместе с form.URL.

Без ничего

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_bare">Сайт</label>
  <input rst-input id="fu_bare" name="fu_bare" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-url" dict "Name" "fu_bare" "Label" "Сайт"}}

С подсказкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_hint">Сайт компании</label>
  <input rst-input id="fu_hint" name="fu_hint" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" aria-describedby="fu_hint-hint">
  <small rst-field-hint id="fu_hint-hint">https можно не писать.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-url" dict
    "Name" "fu_hint"
    "Label" "Сайт компании"
    "Hint" "https можно не писать."}}

С ошибкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_error">Сайт</label>
  <input rst-input id="fu_error" name="fu_error" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" value="brightwater" aria-invalid="true" aria-describedby="fu_error-error">
  <small rst-field-error id="fu_error-error">Введите веб-адрес, например example.com.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-url" dict
    "Name" "fu_error"
    "Label" "Сайт"
    "Value" "brightwater"
    "Error" "Введите веб-адрес, например example.com."}}

field-money

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

Без ничего

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_bare">Цена билета <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_bare" name="fm_bare" type="text" inputmode="decimal">
  <input type="hidden" name="fm_bare.locale" value="en">
  <input type="hidden" name="fm_bare.currency" value="EUR">
  <input type="hidden" name="fm_bare.seed" value="">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_bare"
    "Label" "Цена билета"
    "Locale" "en"
    "Currency" "EUR"}}

С подсказкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_hint">Цена билета <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_hint" name="fm_hint" type="text" inputmode="decimal" aria-describedby="fm_hint-hint">
  <input type="hidden" name="fm_hint.locale" value="en">
  <input type="hidden" name="fm_hint.currency" value="EUR">
  <input type="hidden" name="fm_hint.seed" value="">
  <small rst-field-hint id="fm_hint-hint">Например, 12.50 или €12.50.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_hint"
    "Label" "Цена билета"
    "Locale" "en"
    "Currency" "EUR"
    "Hint" "Например, 12.50 или €12.50."}}

С ошибкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_error">Цена билета <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_error" name="fm_error" type="text" inputmode="decimal" value="12,.50" aria-invalid="true" aria-describedby="fm_error-error">
  <input type="hidden" name="fm_error.locale" value="en">
  <input type="hidden" name="fm_error.currency" value="EUR">
  <input type="hidden" name="fm_error.seed" value="">
  <small rst-field-error id="fm_error-error">Используйте точку для дробной части, например 12.50.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_error"
    "Label" "Цена билета"
    "Value" "12,.50"
    "Locale" "en"
    "Currency" "EUR"
    "Error" "Используйте точку для дробной части, например 12.50."}}

field-textarea

Обёртка field-text вокруг textarea.

Без ничего

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_bare">Заметки</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-textarea" dict "Name" "ta_bare" "Label" "Заметки" "Rows" 3}}

С подсказкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_hint">О себе</label>
  <textarea rst-textarea id="ta_hint" name="ta_hint" rows="3" aria-describedby="ta_hint-hint"></textarea>
  <small rst-field-hint id="ta_hint-hint">Показывается в вашем профиле.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_hint"
    "Label" "О себе"
    "Rows" 3
    "Hint" "Показывается в вашем профиле."}}

С ошибкой

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_error">Краткое описание</label>
  <textarea rst-textarea id="ta_error" name="ta_error" rows="3" aria-invalid="true" aria-describedby="ta_error-error">…</textarea>
  <small rst-field-error id="ta_error-error">Краткое описание должно быть не короче двадцати символов.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_error"
    "Label" "Краткое описание"
    "Value" "…"
    "Rows" 3
    "Error" "Краткое описание должно быть не короче двадцати символов."}}

Обязательное

Компьютер Телефон HTML Шаблон

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_required">Причина возврата <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_required"
    "Label" "Причина возврата"
    "Rows" 3
    "Required" true}}