Version: 2.0 |

Form

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders a Bootstrap form.

Properties

Name Type Description Notes Default Value
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
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
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
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
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
NumberOfColumns Int32 Gets or sets the number of form grid columns.
attribute
inner element
static value
bindable
default
12
Size Size Gets or sets the size of controls in the form.
attribute
inner element
static value
bindable
default
Default
Type FormType Gets or sets the type of the form.
attribute
inner element
static value
bindable
default
Default

Events

Name Type Description

Usage & Scenarios

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

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

HTML Rendered by the Control

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 type of the form - Vertical, Horizontal or Inline.

<bs:Form Type="Inline">
  
  <bs:FormGroup LabelText="TextBox">
    <dot:TextBox Text="{value: Text}" />
    <!-- the "form-group" CSS class is added automatically to the TextBox control -->
  </bs:FormGroup>
  
  <bs:FormGroup LabelText="ComboBox">
    <dot:ComboBox DataSource="{value: Items}" SelectedValue="{value: Item}" />
    <!-- the "form-group" CSS class is added automatically to the ComboBox control -->
  </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" />
    <bs:RadioButton Checked="{value: Boolean2}" CheckedValue="{value: false}" IsInline="true" />
  </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: Static Values

The FormStaticValue control is used to place the plain text next to a form label within a form.

<bs:Form Type="Vertical">
  <bs:FormGroup LabelText="E-mail Address">
    <bs:FormStaticValue>[email protected]</bs:FormStaticValue>
  </bs:FormGroup>
</bs:Form>

Sample 3: 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" Inline="true" Checked="{value: CheckBox1Checked}" />
    <bs:CheckBox Text="Simple Test 2" Inline="true" Checked="{value: CheckBox2Checked}" />
    <bs:CheckBox Text="Simple Test 3" Inline="true" 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; }

    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message