Динамическая форма

Чтобы разместить динамическую форму, используйте элемент form с атрибутами data-type="dynamic-form" и end_point:

<form data-type="dynamic-form" end_point="http://exmaple.com/post-form.php">
    <div type="input-block">
        <span type="input" name="fio" label="Имя" input-type="text" placeholder="Иван Иванов" required="true"></span>
        <span type="input" name="phone" label="Телефон" input-type="text" placeholder="8-ХХХ-ХХХ-ХХ-ХХ" required="true"></span>
        <span type="radio" name="delivery" label="Выбор способа доставки">
            <span
                type="option"
                value="pickup"
                checked="true"
                label="Самовывоз, Бесплатно"
                meta="Сегодня">
            </span>
            <span
                type="option"
                value="courier1"
                checked="false"
                label="Курьером, 500₽"
                meta="1 день, Внутри МКАД">
            </span>
            <span
                type="option"
                value="courier2"
                checked="false"
                label="Курьером, 1500₽"
                meta="Сегодня, Снаружи МКАД">
            </span>
        </span>
        <span type="checkbox" name="sms" value="on" content="СМС оповещение о заказе"></span>
        <span type="textarea" name="comment" label="Комментарий" placeholder="Комментарий к заказу" required="false"></span>
        <button type="submit" text="Оформить заказ"></button>
    </div>
    <div type="result-block">
        <span type="text" field="description"></span>
        <span type="link" field="link"></span>
    </div>
</form>

end_point — URL ресурса, в котором происходит обработка данных формы. Параметры формы отправляются с помощью HTTP‑метода POST. Подробнее в разделе Особенности ресурса.

Элементы формы

<div type="input‑block">*

Блок с полями ввода.

Элементы, входящие в <div type="input‑block">.

<span type="...">*

Поле ввода, в котором можно реализовать:

Радиопереключатель

Чтобы разместить радиопереключатель, используйте элемент span с атрибутом type="radio". Он должен содержать минимум один вложенный элемент span с атрибутом type="option":

<span type="radio" name="delivery" label="Выбор способа доставки">
    <span
        type="option"
        value="pickup"
        checked="true"
        label="Самовывоз, Бесплатно"
        meta="Сегодня">
    </span>
    <span
        type="option"
        value="courier1"
        checked="false"
        label="Курьером, 500₽"
        meta="1 день, Внутри МКАД">
    </span>
    <span
        type="option"
        value="courier2"
        checked="false"
        label="Курьером, 1500₽"
        meta="Сегодня, Снаружи МКАД">
    </span>
</span>

Допустимые атрибуты:

`name`*	Название поля. По нему можно извлечь значение поля.
`value`*	Значение опции.
`label`*	Заголовок поля. Оно отображается на Турбо-странице.
`meta`*	Подпись к названию.
`checked`	Определяет элемент выбранным по умолчанию. Допустимые значения: true \| false.

* Обязательный атрибут.

Раскрывающийся список с меню

Чтобы разместить раскрывающийся список с меню, используйте элемент span с атрибутом type="select". Он должен содержать минимум один вложенный элемент span с атрибутом type="option":

<span type="select" name="city" label="Выберите город" value="moscow">
    <span
        type="option"
        value="moscow"
        text="Москва">
    </span>
    <span
        type="option"
        value="saint-petersburg"
        text="Санкт-Петербург">
    </span>
    <span
        type="option"
        value="yekaterinburg"
        text="Екатеринбург">
    </span>
</span>

Допустимые атрибуты:

`name`*	Название поля. По нему можно извлечь значение поля.
`label`*	Заголовок поля. Оно отображается на Турбо-странице.
`value`*	Значение пункта меню.
`text`*	Название пункта меню

* Обязательный атрибут.

Чекбокс

Чтобы разместить чекбокс, используйте элемент span с атрибутом type="checkbox":

<span
    type="checkbox"
    name="sms"
    value="on"
    content="СМС оповещение о заказе">
</span>

Допустимые атрибуты:

`name`*	Название поля. По нему можно извлечь значение поля.
`content`*	Текст.
`value`	Значение поля.

* Обязательный атрибут.

Многострочное текстовое поле

Чтобы разместить многострочное текстовое поле, используйте элемент span с атрибутом type="textarea":

<span
    type="textarea"
    name="text"
    label="Комментарий"
    placeholder="Комментарий к заказу"
    required="true">
</span>

Допустимые атрибуты:

`name`*	Название поля. По нему можно извлечь значение поля.
`label`*	Заголовок поля. Оно отображается на Турбо-странице.
`required`*	Указывает, что поле обязательное для заполнения.
`placeholder`	Текст, который отображается в поле по умолчанию.
`value`	Значение по умолчанию.

* Обязательный атрибут.

Однострочное текстовое поле

Чтобы разместить однострочное текстовое поле, используйте элемент span с атрибутом type="input":

<span
    type="input"
    name="fio"
    label="Имя"
    input-type="text"
    placeholder="Иван Иванов"
    required="true">
</span>

Допустимые атрибуты:

`name`*	Название поля. По нему можно извлечь значение поля.
`label`*	Заголовок поля. Оно отображается на Турбо-странице.
`input-type`*	Допустимые типы: `text` \| `date` \| `number`.
`required`*	Указывает, что поле обязательное для заполнения.
`placeholder`	Текст, который отображается в поле по умолчанию.

* Обязательный атрибут.

<button type="submit">*

Кнопка для отправки данных. Допустимые атрибуты:

text*

Текст на кнопке.

* Обязательный атрибут.

<div type="result‑block">*

Блок с результатом. Должен содержать элементы span с атрибутами type="text" и type="link". Например:

<div type="result-block">
    <span type="text" field="description"></span>
    <span type="link" field="link"></span>
</div>

В блоке отображается ответ, который возвращает ресурс. Подробнее об обработке данных в разделе Особенности ресурса.

Особенности и требования к ресурсу

Чтобы Турбо‑страницы могли взаимодействовать с ресурсом, разрешите Cross-Origin запросы для *.yandex.*, *.turbopages.org. Пример реализации проверки:

<?php 
/**
 * Определение возможности доступа к API.
 */
function turbo_get_allow_origin() {
    $http_origin = $_SERVER['HTTP_ORIGIN'];
    if (preg_match('/^(https:\/\/(?:.*\.)?yandex\.(?:ru|by|uz|com|com\.tr))$/', $http_origin, $matches)) {
        return $matches[0];
    } else if (preg_match('/^(https:\/\/(?:.*\.)?turbopages.org)$/', $http_origin, $matches)) {
        return $matches[0];
    }
    return null;
}

$http_allow_origin = turbo_get_allow_origin();
if (is_null($http_allow_origin)) {
    // Если доступа нет, должен вернуться код ответа 403.
    http_response_code(403);
    exit('Access denied');
}
// Отправка CORS-заголовков.
header("Access-Control-Allow-Origin: " . $http_allow_origin);
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Origin, Content-Type, Content-Length, Accept-Encoding");
// Отправка заголовка о том, что данные возвращаются в формате JSON.
header("Content-Type: application/json;charset=utf-8");
?>

Ресурс должен возвращать ответ в формате JSON. Например:

[
    {
       "field": "description",
       "value": "Заказ успешно оформлен. Ваш номер заказа:"
    },
    {
       "field": "link",
       "value": "123456",
       "href": "https://example.com/cabinet/order/123456/"
    }
]

Результат обработки будет представлен на Турбо-странице:

Узнайте больше

Написать в службу поддержки

Динамическая форма

Элементы формы

Особенности и требования к ресурсу

Узнайте больше

Была ли статья полезна?