Play-Bootstrap 1.6-P28-B4 | Inline forms examples

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

First of all, you need to declare as implicit the inline field constructor.

@implicitFieldConstructor = @{ b4.inline.fieldConstructor() }

Or simply use the specific inline form:

@b4.inline.form(...) { implicit ifc =>
  ...
}

By default, the inline field constructor hides the label using the sr-only class, but you can show it with the _showLabel argument.

Note "form-inline" will be added automatically to any inline form. If you need to remove it, you can add '_disableDefaultClass -> true argument to the @b4.form helper.

Simple inputs

@b4.inline.form(routes.Application.handleRequest) { implicit ifc =>
  @b4.text( fooForm("foo"), '_hiddenLabel -> "Input Text", 'placeholder -> "A simple text..." )
  @b4.email( fooForm("foo"), '_hiddenLabel -> "Email", 'placeholder -> "example@mail.com" )
  @b4.password( fooForm("foo"), '_hiddenLabel -> "Password", 'placeholder -> "Password" )
  @b4.file( fooForm("foo"), '_hiddenLabel -> "File" )
}

More options

Show label

This is a help text

Maximum length: 20

@b4.inline.form(routes.Application.handleRequest) { implicit ifc =>
  @b4.text( fooForm("foo"), '_hiddenLabel -> "Input Text", 'placeholder -> "A simple text..." )
  @b4.text( fooForm("foo"), '_label -> "Show label", '_showLabel -> true, 'placeholder -> "Show label" )
  @b4.text( fooForm("foo"), '_hiddenLabel -> "Help", '_help -> "This is a help text", 'placeholder -> "A simple text showing a help..." )
  @b4.text( fooForm("foo"), '_hiddenLabel -> "Constraints", '_showConstraints -> true, 'placeholder -> "A simple text showing its constraints..." )
  @b4.text( fooForm("foo"), 'placeholder -> "Without label" )
  @b4.text( fooForm("foo"), '_hiddenLabel -> "A big text", 'class -> "form-control-lg", 'placeholder -> "An awesome field..." )
}

Textareas, checkboxes, radio buttons and selects

Checkbox

Male

Female

@b4.inline.form(routes.Application.handleRequest) { implicit ifc =>
  @b4.textarea( fooForm("foo"), '_hiddenLabel -> "Textarea", 'rows -> 3 )
  @b4.checkbox( fooForm("foo"), '_text -> "Checkbox", 'checked -> true )
  @b4.radio( fooForm("foo"), options = Seq("M"->"Male","F"->"Female") )

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

Disabled and readonly attributes

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

Readonly checkbox

@b4.inline.form(routes.Application.handleRequest) { implicit ifc =>
  @b4.text( fooForm("foo"), '_hiddenLabel -> "Disabled", 'disabled -> true, 'placeholder -> "Disabled text..." )
  @b4.checkbox( fooForm("foo"), '_text -> "Readonly checkbox", 'readonly -> true, 'value -> true )
  @b4.select( fooForm("foo"), options = fruits, '_hiddenLabel -> "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!

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

Bootstrap 4 custom forms

@b4.inline.form(routes.Application.handleRequest) { implicit ifc =>
  @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.inline.form(routes.Application.handleRequest, '_custom -> true) { implicit ifc =>
  @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

@b4.inline.form(routes.Application.handleRequest) { implicit ifc =>
  @b4.inputWrapped( "email", fooForm("foo"), '_hiddenLabel -> "Simple 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"), '_hiddenLabel -> "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"), '_hiddenLabel -> "Number", 'value -> 0 ) { 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>
  }
}

Inline Form