Play-Bootstrap 1.0-P24-B3 | Mixed forms examples (vertical, horizontal, inline and clear)

This page is an example to show how to mix different forms within the same view.

This page will use a horizontal form as default. So first of all, it declares an implicit horizontal field constructor. With that, every helper will take it implicitly.

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

A simple horizontal form

As we declared on top of the page an implicit horizontal field constructor, we can forget the field constructors for a while.

@b3.form(routes.Application.mixed) {
  @b3.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." )
  @b3.select( fooForm("foo"), options = fruits, '_label -> "Select a fruit" )
  @b3.checkbox( fooForm("foo"), '_text -> "Checkbox", 'checked -> true )
  @b3.submit('class -> "btn btn-default"){ <span class="glyphicon glyphicon-ok"></span> Save changes }
}

The typical inline login form on top

Imagine you need to insert an inline login form. You only need to insert explicitly an inline field constructor (and the messages, which is normally taken implicitly). The helper b3.inline.form makes it easier.

@b3.inline.form(routes.Application.mixed) { implicit ifc =>
  @b3.email( fooForm("foo"), '_hiddenLabel -> "Email", 'placeholder -> "example@mail.com" )
  @b3.password( fooForm("foo"), '_hiddenLabel -> "Password", 'placeholder -> "Password" )
  @b3.submit('class -> "btn btn-default"){ Sign in }
}

The typical vertical contact form on one side

In this case you need a contact form on one side. Now we need a vertical form. Here you can use the helper b3.vertical.form.

@b3.vertical.form(routes.Application.mixed) { implicit vfc =>
  @b3.text( fooForm("foo"), '_label -> "Your name", 'placeholder -> "Your contact name" )
  @b3.email( fooForm("foo"), '_label -> "Your email", 'placeholder -> "example@mail.com" )
  @b3.textarea( fooForm("foo"), '_label -> "What happened?", 'rows -> 3 )
  @b3.checkbox( fooForm("foo"), '_text -> "Send me a copy to my email", 'checked -> true )
  @b3.submit('class -> "btn btn-default"){ <span class="glyphicon glyphicon-envelope"></span> Send }
}

A different horizontal form

And what happens if I need a horizontal form but with other column widths. Simple, create your own with the helper b3.horizontal.form.

@b3.horizontal.form(routes.Application.mixed, "col-lg-4", "col-lg-8") { implicit hfc =>
  @b3.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." )
  @b3.file( fooForm("foo"), '_label -> "File" )
  @b3.checkbox( fooForm("foo"), '_text -> "Checkbox" )
  @b3.submit('class -> "btn btn-default"){ <span class="glyphicon glyphicon-ok"></span> Save changes }
}

A clear field constructor

Finally, if you would need to render a simple input, without any field constructor, you can use the helper b3.clear.form. This is a field constructor that doesn't add any code, just the input.

@b3.clear.form(routes.Application.mixed) { implicit cfc =>
  @b3.inputWrapped( "search", fooForm("foo"), 'placeholder -> "Text to search..." ) { input =>
    <div class="input-group">
      <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
      @input
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search</button>
      </span>
    </div>
  }
}

Mixed FieldConstructors within the same form

If you would need to that, you can make an "inner section" like this:

@defining(b3.inline.fieldConstructorSpecific) { implicit ifc =>
  @b3.text( fooForm("bar"), '_label -> "Inline input text" )
}
// with your own custom field constructor that extends B3FieldConstructor
@defining(yourCustomFieldConstructor) { implicit myfc =>
  @b3.text( fooForm("bar"), '_label -> "Inline input text" )
}

Or simply:

@b3.text( fooForm("bar"), '_label -> "Inline input text" )(b3.inline.fieldConstructor, implicitly[Messages])