HTMLForm

Справочник по API

• Методы, свойства и события
• Примеры

Обзор

Не смотря на то, что у библиотеки Webix есть свой компонент Form, также существует возможность создавать отдельные формы с помощью только HTML. Для этого используется специальный компонент HTMLForm.

Инициализация

Существует три способа встроить форму в компонент:

1 . С помощью свойства content:

Свойство content может ссылаться как на ID контейнера DIV в котором находится форма, так и на document.body, если оно включено непосредственно в body вашей веб-страницы.

HTMLForm, свойство content

<div id="areaA">
    <input type="text" name="title" value="" placeholder="Book title" /><br/>
    <input type="text" name="author" value="" placeholder="Author" /><br/>
</div>
<script type="text/javascript">
webix.ui({
    view:"htmlform",
    // совпадает с ID контейнера div 
    content: "areaA",
    // или, если форма не включена в div
    content: document.body
});
</script>

Related sample:  Initialization in Document Body

2 . С помощью свойства template:

• Значение свойства template может включать ID контейнера DIV в котором находится форма:

HTMLform, свойство template

<div id="tpl">
    <input type="text" name="title" value="" placeholder="Book title" /><br/>
    <input type="text" name="author" value="" placeholder="Author" /><br/>
</div>
<script type="text/javascript">
webix.ui({
    view:"htmlform",
    template: "html->tpl", // совпадает с ID контейнера div
    ...
});
</script>

Related sample:  Initialization in Layout

• или ссылаться на внешний файл HTML с разметкой формы:

HTMLform, HTTP

webix.ui({
    id: "htmlform1",
    view:"htmlform",
    template: "http->data/form.html",
    ...
});

Related sample:  Using HTTP-template

3. Инициализация из внешнего файла, загруженного через Ajax.

webix.ui({
    view:"htmlform",
    src:"myform.php"
});

Работа с HTMLform

• Валидация данных)
• Работа с Form и HTMLForm)
• Интеграция Uploader и Form)
• Связывание данных)

Отправка данных Form

Данные формы можно послать на сервер одним из следующих способов:

1 . Используя Webix Ajax helper:

webix.ajax().post("some.php", form.getValues()); 
// с колбэком
webix.ajax().post("some.php", form.getValues(), function(text, data, xhr){ });

2 . Используя метод webix.send, который эмулирует отправку HTML формы:

webix.send("come.php", form.getValues());

3 . Не напрямую, через компонент bound master или DataCollection:

Метод удобен, когда форма используется для редактирования данных основного компонента (DataTable, Tree, List, и т.д.). В этом случае важны данные главного компонента, а не формы. Форма сохраняет данные в главном компоненте, в то время как мастер обрабатывает серверную часть.

// данные из выбранного элемента списка помещаются в форму
form.bind(list);
 
// отправляет данные обратно в элемент списка
form.save()

Концепция Data binding подробно рассмотрена в отдельной статье.

Статьи по теме

• Form

Наверх