Form

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders a Bootstrap form.

Usage & Scenarios

Renders a Bootstrap form. Each form field is wrapped in the FormGroup control.

https://getbootstrap.com/docs/4.3/components/forms/

Sample 1: Form Controls

The Form is an easy to use control which uses the Bootstrap styles to render a form.

The Type property specifies the layout of the form - Default, Horizontal or Inline.

<bs:Form Type="Default">
              
  <bs:FormGroup LabelText="TextBox">
    <bs:TextBox Text="{value: Text}" />
  </bs:FormGroup>
  
  <bs:FormGroup LabelText="ComboBox">
    <bs:ComboBox DataSource="{value: Items}" SelectedValue="{value: Item}" />
  </bs:FormGroup>
    
  <bs:FormGroup LabelText="CheckBox">
    <bs:CheckBox Checked="{value: Boolean1}" IsInline="true" />
  </bs:FormGroup>
  
  <bs:FormGroup LabelText="RadioButton">
    <bs:RadioButton Checked="{value: Boolean2}" CheckedValue="{value: true}" IsInline="true" Text="yes" />
    <bs:RadioButton Checked="{value: Boolean2}" CheckedValue="{value: false}" IsInline="true" Text="no" />
  </bs:FormGroup>

</bs:Form>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Form.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string Text { get; set; }

        public string[] Items => new[] { "one", "two", "three" };

        public string Item { get; set; } = "one";

        public bool Boolean1 { get; set; }

        public bool Boolean2 { get; set; }
    }
}

Sample 2: Horizontal Form Label Sizing

If the form is in the Horizontal mode, the labels are placed next to the form fields.

In this case, you have to specify how wide the labels should be (how many columns they will occupy). You can use the LabelSize to provide a default size for all screens, and use LabelSizeSM, LabelSizeMD, LabelSizeLG and LabelSizeXL properties to override the label width for a particular screen size.

If you have customized Bootstrap grid system to have different number of columns, use the NumberOfColumns property on the Container control.

<bs:Form Type="Horizontal" LabelSizeXS="2" LabelSizeLG="8">
  <bs:FormGroup LabelText="Label size would be different on different screen sizes">
    <bs:CheckBox Text="Simple Test 1" Checked="{value: CheckBox1Checked}" />
    <bs:CheckBox Text="Simple Test 2" Checked="{value: CheckBox2Checked}" />
    <bs:CheckBox Text="Simple Test 3" Checked="{value: CheckBox3Checked}" />
  </bs:FormGroup>
</bs:Form>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Form.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool CheckBox1Checked { get; set; }
        public bool CheckBox2Checked { get; set; }
        public bool CheckBox3Checked { get; set; }

    }
}

Properties

Name Type Description Notes Default Value
property icon LabelSize Int32? Gets or sets the size of the label area in child form groups on all screen sizes. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
null
property icon LabelSizeLG Int32? Gets or sets the size of the label area in child form groups on large screen. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
null
property icon LabelSizeMD Int32? Gets or sets the size of the label area in child form groups on medium screen. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
null
property icon LabelSizeSM Int32? Gets or sets the size of the label area in child form groups on small screen. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
null
property icon LabelSizeXL Int32? Gets or sets the size of the label area in child form groups on extra large screen. This applies only to the Horizontal forms.
attribute
inner element
static value
bindable
default
null
property icon NumberOfColumns Int32 Gets or sets the number of form grid columns.
attribute
inner element
static value
bindable
default
12
property icon Size Size Gets or sets the size of controls in the form.
attribute
inner element
static value
bindable
default
Default
property icon Type FormType Gets or sets the type of the form.
attribute
inner element
static value
bindable
default
Default

HTML produced by the control