Forms

Xamstrap includes different classes like form-basic, form-horizontal, form-inline and input-group that can help you to arrange label, entry and button in order to create forms.

Form Basic

Using form-basic class a simple basic form will be create, where elements are stacked and form all the screen size it will maintain same behavior. Below sample will illustrate how to use form-basic class.

Sample Code

  <Control:Div Attached:ResponsiveProperty.Class="form-basic" >       
    <Label Text="Email Address"  FontSize="17"></Label>
    <Entry Placeholder="Email"></Entry>
    
    <Label Text="Password"  FontSize="17"></Label>
    <Entry Placeholder="Password" IsPassword="True"></Entry>
    
    <Button Text="Submit" Attached:ResponsiveProperty.Class="btn-sm btn-primary"></Button>
  </Control:Div>

Form Inline

Using form-inline class an inline form will be created, where elements are stacked for extra small(xs), small(sm) screen size. For medium(md), large(lg) and extra large(xl) screen size elements are placed side-by-side until the screen edge and the remaining wrap to new line.

> Fig(1) Output in case of xs and sm screen size. > Fig(2) Output in case of screen size greater then and equal to medium.

Sample Code

  <Control:Div Attached:ResponsiveProperty.Class="form-inline">
    <Label Text="First Name" Margin="0,20,0,0"  FontSize="17"></Label>
    <Entry Placeholder="Ex. John"  Margin="0,10,0,0" WidthRequest="150"></Entry>

    <Label Text="Last Name" Margin="0,20,0,0"  FontSize="17"></Label>
    <Entry Placeholder="Ex. Doe"  Margin="0,10,0,0" WidthRequest="150"></Entry>
    
     <Label Text="User Name" Margin="0,20,0,0"  FontSize="17"></Label>
    <Entry Placeholder="Ex. john7676"  Margin="0,10,0,0" WidthRequest="150"></Entry>

    <Label Text="Email" Margin="0,20,0,0"  FontSize="17"></Label>
    <Entry Placeholder="Ex. johndoe@example.com"  Margin="0,10,0,0" WidthRequest="150"></Entry>

    <Button Text="Sign Up" Attached:ResponsiveProperty.Class="btn-sm btn-primary"></Button>
  </Control:Div>

Form Horizontal

Use Xamstrap's predefined class form-horizontal to align labels and entries in a horizontal layout.For exrta samll(xs) screen size elements will be stacked and for all other label and entry will be placed side-by-side.

> Fig(1) xs(extra Small) > Fig(2) sm(small)

  <Control:Div Attached:ResponsiveProperty.Class="form-horizontal">
    <Label Text="Name" Attached:ResponsiveProperty.Class="col-sm-3"  FontSize="17"></Label>
    <Entry Placeholder="Full Name" Attached:ResponsiveProperty.Class="col-sm-9"></Entry>
  </Control:Div>
  
  <Control:Div Attached:ResponsiveProperty.Class="form-horizontal">
    <Label Text="Email" Attached:ResponsiveProperty.Class="col-sm-3"  FontSize="17"></Label>
    <Entry Placeholder="Email Address" Attached:ResponsiveProperty.Class="col-sm-9"></Entry>
  </Control:Div>

  <Control:Div Attached:ResponsiveProperty.Class="row">
    <Button Text="Send Invitation" Attached:ResponsiveProperty.Class=" col-sm-offset-3 btn-sm btn-primary" WidthRequest="200"></Button>
  </Control:Div>

Input Group

input-group class will divide total screen size equally between the elements and all are placed side by side.

> Fig(1) xs(extra small) > Fig(2) sm(small)

Sample Code

  <Control:Div Attached:ResponsiveProperty.Class="input-group" Margin="0,0,0,10">
    <Label Text="@" FontSize="Large"></Label>
    <Entry Placeholder="Email" Margin="0,10,0,0"></Entry>
    <Button Text="Submit" Attached:ResponsiveProperty.Class="btn-sm btn-primary" WidthRequest="100"></Button>
  </Control:Div>