Horizontal Form

This page is an example to show how to use a horizontal form.

First of all, you need to declare the horizontal field constructor as implicit. You have to specify its column widths for the form-group. 

@implicitFieldConstructor = @{ b4.horizontal.fieldConstructor("col-md-2", "col-md-10") }

Or simply use the specific inline form: 

@b4.horizontal.form(call, "col-md-2", "col-md-10", ...) { implicit hfc =>
  ...
}

Simple inputs

@b4.horizontal.form(routes.Application.handleRequest, "col-md-2", "col-md-10") { implicit hfc =>
  @b4.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." )
  @b4.email( fooForm("foo"), '_label -> "Email", 'placeholder -> "example@mail.com" )
  @b4.password( fooForm("foo"), '_label -> "Password", 'placeholder -> "Password" )
  @b4.file( fooForm("foo"), '_label -> "File" )
}

More options

This is a help text
Maximum length: 20
@b4.horizontal.form(routes.Application.handleRequest, "col-md-2", "col-md-10") { implicit hfc =>
  @b4.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." )
  @b4.text( fooForm("foo"), '_label -> "Help", '_help -> "This is a help text", 'placeholder -> "A simple text showing a help..." )
  @b4.text( fooForm("foo"), '_label -> "Constraints", '_showConstraints -> true, 'placeholder -> "A simple text showing its constraints..." )
  @b4.text( fooForm("foo"), 'placeholder -> "Without label" )
  @b4.text( fooForm("foo"), '_label -> "A big text", 'class -> "form-control-lg", 'placeholder -> "An awesome field..." )
}

Textareas, checkboxes, radio buttons and selects

@b4.horizontal.form(routes.Application.handleRequest, "col-md-2", "col-md-10") { implicit hfc =>
  @b4.textarea( fooForm("foo"), '_label -> "Textarea", 'rows -> 3 )
  @b4.checkbox( fooForm("foo"), '_text -> "Checkbox", 'checked -> true )
  @b4.radio( fooForm("foo"), options = Seq("M"->"Male","F"->"Female"), '_label -> "Radio Group" )

  @fruits = @{ Seq("A"->"Apples","P"->"Pears","B"->"Bananas") }
  ...
  @b4.select( fooForm("foo"), options = fruits, '_label -> "Select" )
  @b4.select( fooForm("foo"), options = fruits, '_label -> "Multiple Select", 'multiple -> true )
}

Disabled and readonly attributes

Checkboxes, radio buttons and selects also support readonly attribute adding a hidden input.

@b4.horizontal.form(routes.Application.handleRequest, "col-md-2", "col-md-10") { implicit hfc =>
  @b4.text( fooForm("foo"), '_label -> "Disabled", 'disabled -> true, 'placeholder -> "Disabled text..." )
  @b4.checkbox( fooForm("foo"), '_text -> "Readonly checkbox", 'readonly -> true, 'value -> true )
  @b4.select( fooForm("foo"), options = fruits, '_label -> "Select", 'multiple -> true, 'readonly -> true, 'value -> "B,P" )
}

Validation states

Note! warning state is no more supported by Bootstrap 4, so if you use it you would need to add your own styling.

Great!
Be carefull with this...
An error occurred!
Another help text
Great!
Be carefull with this...
An error occurred!
Another help text
@b4.horizontal.form(routes.Application.handleRequest, "col-md-2", "col-md-10") { implicit hfc =>
  @b4.text( fooForm("foo"), '_label -> "Success", '_success -> true, 'placeholder -> "Success text..." )
  @b4.text( fooForm("foo"), '_label -> "Warning", '_warning -> "Be carefull with this...", 'placeholder -> "Warning text..." )
  @b4.text( fooForm("foo"), '_label -> "Error", '_error -> "An error occurred!", '_help -> "Another help text", 'placeholder -> "Error text..." )
}
// With feedback tooltips
@b4.horizontal.form(routes.Application.vertical, "col-md-2", "col-md-10", '_feedbackTooltip -> true) { implicit hfc =>
  @b4.text( fooForm("foo"), '_label -> "Success", '_showIconValid -> true, 'placeholder -> "Success text..." )
  @b4.text( fooForm("foo"), '_label -> "Warning", '_warning -> "Be carefull with this...", '_showIconWarning -> true, 'placeholder -> "Warning text..." )
  @b4.text( fooForm("foo"), '_label -> "Error", '_error -> "An error occurred!", '_showIconOnError -> true, '_help -> "Another help text", 'placeholder -> "Error text..." )
}

Bootstrap 4 custom forms

@b4.horizontal.form(routes.Application.handleRequest, "col-md-2", "col-md-10") { implicit vfc =>
  @b4.checkbox( fooForm("foo_check_custom_1"), '_text -> "Checkbox", 'checked -> true, '_custom -> true )
  @b4.radio( fooForm("foo_radio_custom_1"), options = Seq("M"->"Male","F"->"Female"), '_label -> "Radio Group", '_custom -> true )
  @b4.select( fooForm("foo_select_custom_1"), options = fruits, '_label -> "Select", '_custom -> true )
  @b4.file( fooForm("foo_file_custom_1"), '_label -> "File", 'placeholder -> "Select a file...", '_custom -> true )
}

Or

@b4.horizontal.form(routes.Application.handleRequest, "col-md-2", "col-md-10", '_custom -> true) { implicit vfc =>
  @b4.checkbox( fooForm("foo_check_custom_1"), '_text -> "Checkbox", 'checked -> true )
  @b4.radio( fooForm("foo_radio_custom_1"), options = Seq("M"->"Male","F"->"Female"), '_label -> "Radio Group" )
  @b4.select( fooForm("foo_select_custom_1"), options = fruits, '_label -> "Select" )
  @b4.file( fooForm("foo_file_custom_1"), '_label -> "File", 'placeholder -> "Select a file..." )
}

Customize them

@
This needs some JavaScript and CSS
Action Another action Something else here
 
Separated link
@b4.horizontal.form(routes.Application.handleRequest, "col-md-2", "col-md-10") { implicit hfc =>
  @b4.inputWrapped( "email", fooForm("foo"), '_label -> "Input group", 'placeholder -> "Custom input group for email..." ) { input =>
    <div class="input-group">
      <span class="input-group-prepend">
        <span class="input-group-text">@@</span>
      </div>
      @input
    </div>
  }
  @b4.inputWrapped( "text", fooForm("foo"), '_label -> "Fully customized", 'placeholder -> "A complicated one..." ) { input =>
    <div class="input-group">
      <span class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-star"></i></span>
      </div>
      @input
      <div class="input-group-append">
        <!-- Button and dropdown menu -->
      </div>
    </div>
  }
  @b4.inputWrapped( "text", fooForm("foo"), '_label -> "Number", 'value -> 0, '_help -> "This needs some JavaScript and CSS" ) { input =>
    <div class="input-number input-group">
      <span class="input-group-prepend">
        <span class="input-group-text input-number-minus"><i class="fa fa-minus"></i></span>
      </div>
      @input
      <span class="input-group-append">
        <span class="input-group-text input-number-plus"><i class="fa fa-plus"></i></span>
      </div>
    </div>
  }
}

More helpers

This is a link

Cancel

  @b4.static("Static HTML"){ <a href="#"><i class="fa fa-star"></i> This is a link</a> }
  @b4.submit('class -> "btn btn-secondary"){ <i class="fa fa-ok"></i> Submit me! }
  @b4.free() {
    <button type="submit" class="btn btn-primary"> <i class="fa fa-ok"></i> Save changes</button>
    <a class="btn btn-secondary" href> <i class="fa fa-remove"></i> Cancel</a>
  }
}

Designed and developed by adrianhurt

Code licensed under Apache License v2.0

© 2014-2019 Adrian Hurtado (adrianhurt)

View on Github

Change Log