Form ▸ Overview

The Form component builds a data entry UI for an object assigned to the formData property. The component displays and aligns label-editor pairs for each field in the bound object.

You can use the editors on the right to modify the following properties:

labelMode: "outside" | "static" | "floating" | "hidden"
Specifies label display mode.
labelLocation: "top" | "left" | "right"
Specifies whether to place outer labels above, to the left, or to the right of corresponding editors. The latter location is not demonstrated in this example.
colCount
Specifies the number of columns in the layout. To build an adaptive layout where the column count depends on the container width, set this property's value to "auto".
minColWidth
Specifies the minimum column width. Use this property when the colCount property's value is "auto".
width
Specifies the Form component's width.
readOnly
Makes the Form editors read-only.
showColonAfterLabel
Specifies whether the Form displays a colon after a label.

To get started with the DevExtreme Form component, refer to the following tutorial for step-by-step instructions: Getting Started with Form.

Select company:

Options

Label mode:

Label location:

Columns count:

Min column width:

Form width:

@model DevExtreme.MVC.Demos.Models.ActiveCompany

<div id="form-demo">
    <div class="widget-container">
        <div id="companySelectText">Select company:</div>
        @(Html.DevExtreme().SelectBox()
            .ID("companySelectBox")
            .DisplayExpr("Name")
            .InputAttr("aria-label", "Company")
            .Label("Select company")
            .LabelMode(EditorLabelMode.Floating)
            .DataSource(d => d.Mvc().LoadAction("GetCompanies").Key("ID"))
            .Value(1)
            .OnValueChanged("selectBox_valueChanged")
        )
        @(Html.DevExtreme().Form()
            .ID("form")
            .ColCount(2)
            .FormData(Model)
            .LabelMode(FormLabelMode.Floating)
            .LabelLocation(FormLabelLocation.Left)
            .MinColWidth(300)
            .ReadOnly(false)
            .ShowColonAfterLabel(true)
        )
    </div>
    <div class="options">
        <div class="caption">Options</div>
        <div class="option">
            <span>Label mode:</span>
            @(Html.DevExtreme().SelectBox()
                .InputAttr("aria-label", "Label Mode")
                .DataSource(new[] { "outside", "static", "floating", "hidden" })
                .Value("floating")
                .OnValueChanged("labelMode_changed")
            )
        </div>
        <div class="option">
            <span>Label location:</span>
            @(Html.DevExtreme().SelectBox()
                .DataSource(new[] { "left", "top" })
                .InputAttr("aria-label", "Label Location")
                .Value("left")
                .OnValueChanged("labelLocation_changed")
            )
        </div>
        <div class="option">
            <span>Columns count:</span>
            @(Html.DevExtreme().SelectBox()
                .DataSource(new object[] { "auto", 1, 2, 3 })
                .Value(2)
                .InputAttr("aria-label", "Column Count")
                .OnValueChanged("colCount_changed")
            )
        </div>
        <div class="option">
            <span>Min column width:</span>
            @(Html.DevExtreme().SelectBox()
                .DataSource(new[] { 150, 200, 300 })
                .Value(300)
                .InputAttr("aria-label", "Min Column Width")
                .OnValueChanged("minColWidth_changed")
            )
        </div>
        <div class="option">
            <span>Form width:</span>
            @(Html.DevExtreme().NumberBox()
                .Value(null)
                .Max(550)
                .InputAttr("aria-label", "Width")
                .OnValueChanged("formWidth_changed")
            )
        </div>
        <div class="option">
            @(Html.DevExtreme().CheckBox()
                .Text("readOnly")
                .Value(false)
                .OnValueChanged("readOnly_changed")
            )
        </div>
        <div class="option">
            @(Html.DevExtreme().CheckBox()
                .Text("showColonAfterLabel")
                .Value(true)
                .OnValueChanged("showColonAfterLabel_changed")
            )
        </div>
    </div>
</div>

<script>
    function getFormInstance() {
        return $("#form").dxForm("instance");
    }

    function selectBox_valueChanged(data) {
        getFormInstance().option("formData", data.value);
    }

    function labelMode_changed(data) {
        getFormInstance().option("labelMode", data.value);

        const $companySelectText = $("#companySelectText");
        const companySelectBox = $("#companySelectBox").dxSelectBox("instance");
        if(data.value === "outside") {
            companySelectBox.option("labelMode", "hidden");
            $companySelectText.show();
        } else {
            companySelectBox.option("labelMode", data.value);
            $companySelectText.hide();
        }
    }

    function labelLocation_changed(data) {
        getFormInstance().option("labelLocation", data.value);
    }

    function colCount_changed(data) {
        getFormInstance().option("colCount", data.value);
    }

    function minColWidth_changed(data) {
        getFormInstance().option("minColWidth", data.value);
    }

    function formWidth_changed(data) {
        getFormInstance().option("width", data.value);
    }

    function readOnly_changed(data) {
        getFormInstance().option("readOnly", data.value);
    }

    function showColonAfterLabel_changed(data) {
        getFormInstance().option("showColonAfterLabel", data.value);
    }
</script>

using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class FormController : Controller {

        public ActionResult Overview() {
            return View(SampleData.ActiveCompanies.First());
        }

    }
}

using System.Collections.Generic;

namespace DevExtreme.MVC.Demos.Models.SampleData {
    public partial class SampleData {
        public static readonly IEnumerable<ActiveCompany> ActiveCompanies = new[] {
            new ActiveCompany() {
                ID = 1,
                Name = "Super Mart of the West",
                Address = "702 SW 8th Street",
                City = "Bentonville",
                State = "Arkansas",
                ZipCode = 72716,
                Phone = "(800) 555-2797",
                Fax = "(800) 555-2171",
                Website = "",
                Active = true
            },
            new ActiveCompany() {
                ID = 2,
                Name = "Electronics Depot",
                Address = "2455 Paces Ferry Road NW",
                City = "Atlanta",
                State = "Georgia",
                ZipCode = 30339,
                Phone = "(800) 595-3232",
                Fax = "(800) 595-3231",
                Website = "",
                Active = true
            },
            new ActiveCompany() {
                ID = 3,
                Name = "K&S Music",
                Address = "1000 Nicllet Mall",
                City = "Minneapolis",
                State = "Minnesota",
                ZipCode = 55403,
                Phone = "(612) 304-6073",
                Fax = "(612) 304-6074",
                Website = "",
                Active = true
            },
            new ActiveCompany() {
                ID = 4,
                Name = "Tom's Club",
                Address = "999 Lake Drive",
                City = "Issaquah",
                State = "Washington",
                ZipCode = 98027,
                Phone = "(800) 955-2292",
                Fax = "(800) 955-2293",
                Website = "",
                Active = true
            }
        };
    }
}

using System;
using System.Collections.Generic;
using System.Linq;

namespace DevExtreme.MVC.Demos.Models {
    public class ActiveCompany {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public int ZipCode { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }
        public string Website { get; set; }
        public bool Active { get; set; }
    }
}

.widget-container {
    margin-right: 320px;
    padding: 20px;
    max-width: 550px;
    min-width: 300px;
}
#form {
    margin-top: 25px;
}
#companySelectText {
    display: none;
}
.options {
    padding: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 260px;
    top: 0;
    background-color: rgba(191, 191, 191, 0.15);
}
.caption {
    font-size: 18px;
    font-weight: 500;
}
.option {
    margin-top: 10px;
}