Form

The dxForm widget represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns.

Form interactive configuration
Copy Code
Copy to Codepen
$("#form").dxForm({
});

You can create the widget using one of the following approaches.

  • jQuery
    Use the dxForm jQuery plug-in.

    HTML
    <div id="form">
    </div>
    JavaScript
    var companyData = {
        id: "1",
        name: "Super Mart of the West",
        city: "Bentonville",
        state: "Arkansas",
        zip: 72716,
        phone: "(800) 555-2797",
        fax: "(800) 555-2171",
        website: "http://www.nowebsitesupermart.com"
    }
    $("#form").dxForm({
        formData: companyData,
        colCount: 2
    });
  • Knockout
    Add a div element and apply dxForm binding to this element.

    HTML
    <div data-bind="dxForm: {
        formData: companyData,
        colCount: 2
    }"></div>
    JavaScript
    var myViewModel = {
        companyData: {
            id: "1",
            name: "Super Mart of the West",
            city: "Bentonville",
            state: "Arkansas",
            zip: 72716,
            phone: "(800) 555-2797",
            fax: "(800) 555-2171",
            website: "http://www.nowebsitesupermart.com"
        }
    }
    ko.applyBindings(myViewModel);
  • AngularJS
    Add a div element and apply the dx-form directive to this element.

    HTML
    <div ng-controller="demoController">
        <div dx-form="{
            formData: companyData,
            colCount: 2
        }"></div>
    </div>
    JavaScript
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.companyData = {
            id: "1",
            name: "Super Mart of the West",
            city: "Bentonville",
            state: "Arkansas",
            zip: 72716,
            phone: "(800) 555-2797",
            fax: "(800) 555-2171",
            website: "http://www.nowebsitesupermart.com"
        };
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the Installation article.

Show Example:
AngularJS
Knockout
jQuery

Configuration

An object defining configuration options for the dxForm widget.

Methods

This section describes members used to manipulate a widget.

Events

This section describes events fired by this widget.

Simple Item

This article describes configuration options of a simple form item.

A simple form item is an editor-label pair usually bound to a formData object field used to display and modify this field.

You can also create a simple item without binding it to a formData field. For example, it can be a check box that allows a user to confirm his agreement to process entered data.

For detailed information on creating simple items, see the Create Simple Items topic.

Group Item

This article describes configuration options of a group form item.

A group form item is a section consisting of a caption and child form items. You can customize the layout options for each group separately.

For detailed information on creating group items, see the Create Group Items topic.

Tabbed Item

This article describes configuration options of a tabbed form item.

For detailed information on creating tabbed items, see the Create Tabbed Items topic.

Empty Item

This article describes configuration options of an empty form item.

For detailed information on creating empty items, see the Create Empty Items topic.