HTMLForm

API Reference

Overview

Though the Webix library has its own Form component, there exists a possibility to create a separate form made with the help of pure HTML. This is done within the special HTMLForm component.


Initialization

There are three ways of embedding a form into the component:

1 . Through the "content" property:

Content property may either point the ID of DIV container where the form lies or to document.body if it is included directly into your web page 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",
    //coincides with id of a *div* container 
    content: "areaA",
    //or, in case the form isn't included into any div
    content: document.body
});
</script>

Related sample:  Initialization in Document Body

2 . With the help of the "template" property:

  • Template value may include the ID of a DIV container where form fields lie

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", //coincides with id of a *div* container
    ...
});
</script>

Related sample:  Initialization in Layout

  • or it points to external HTML file with form markup:

HTMLform, HTTP

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

Related sample:  Using HTTP-template

3 . Initialization from HTML or XML markup

The initialization from XML markup is available in Webix Pro edition only.

In this case, standard rules of markup initialization are used and the markup slightly alters:

  • HTML: form tag receives new attributes;
    • data-view to indicate the component (here it is an htmlform);
    • standard htmlform properties with 'data' prefix (data-id, data-height, etc.);
  • XML: There are special tags with 'x:' prefix:
    • < x:ui > to indicate a webix UI constructor
    • < x:htmlform > to indicate a component you want to initialize.

Form elements are created according to standard HTML.

HTMLform, HTML markup

<form data-view="htmlform" data-id="htmlform1" data-height="350">
    <input type="text" name="title" value="" placeholder="Book title" /><br/>
    ...
</form>

HTMLform, XML markup

<html xmlns:x>
    <x:ui>
        <x:htmlform id="htmlform1" height="350">
            <input type="text" name="title" value="" placeholder="Book title" /><br/>
               ...
        </x:htmlform>
    </x:ui>
</html>

Script part of the document includes the initializing code:

webix.ready(function(){
    webix.markup.init(document);
});

Regardless of the initialization pattern, all the common HTMLform functions work fine:

Related sample:  HTML initialization : HTML form

4. Initialization from an external file loaded by Ajax.

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

Working with HTMLform

Sending Form Data

Form data can be sent to server in either of the following ways:

1 . Using Webix Ajax helper:

webix.ajax().post("some.php", form.getValues()); 
//with callback
webix.ajax().post("some.php", form.getValues(), function(text, data, xhr){ });

2 . Using webix.send method that emulates HTML form submitting:

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

3 . Indirectly, via the bound master component or DataCollection:

The method is good when the form is used for editing the data of the main component (datatable, tree, list, etc.). In this case not the form data matters but the data of the main component. Form saves the data to the master component while the master handles the server side part.

//data from selected list item is pushed to the form
form.bind(list);
 
//pushes the data back to list item
form.save()

Data binding concept is described in a separate documentation article.

Related Articles

Back to top