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 = @{ b4.horizontal.fieldConstructor("col-md-2", "col-md-10") }
As we declared on top of the page an implicit horizontal field constructor, we can forget the field constructors for a while.
@b4.form(routes.Application.mixed) {
@b4.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." )
@b4.select( fooForm("foo"), options = fruits, '_label -> "Select a fruit" )
@b4.checkbox( fooForm("foo"), '_text -> "Checkbox", 'checked -> true )
@b4.submit('class -> "btn btn-secondary"){ <i class="fa fa-ok"></i> Save changes }
}
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 b4.inline.form
makes it easier.
@b4.inline.form(routes.Application.mixed) { implicit ifc =>
@b4.email( fooForm("foo"), '_hiddenLabel -> "Email", 'placeholder -> "example@mail.com" )
@b4.password( fooForm("foo"), '_hiddenLabel -> "Password", 'placeholder -> "Password" )
@b4.submit('class -> "btn btn-secondary"){ Sign in }
}
In this case you need a contact form on one side. Now we need a vertical form. Here you can use the helper
b4.vertical.form
.
@b4.vertical.form(routes.Application.mixed) { implicit vfc =>
@b4.text( fooForm("foo"), '_label -> "Your name", 'placeholder -> "Your contact name" )
@b4.email( fooForm("foo"), '_label -> "Your email", 'placeholder -> "example@mail.com" )
@b4.textarea( fooForm("foo"), '_label -> "What happened?", 'rows -> 3 )
@b4.checkbox( fooForm("foo"), '_text -> "Send me a copy to my email", 'checked -> true )
@b4.submit('class -> "btn btn-secondary"){ <i class="fa fa-envelope"></i> Send }
}
And what happens if I need a horizontal form but with other column widths. Simple, create your own with the helper b4.horizontal.form
.
@b4.horizontal.form(routes.Application.mixed, "col-lg-4", "col-lg-8") { implicit hfc =>
@b4.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." )
@b4.file( fooForm("foo"), '_label -> "File" )
@b4.checkbox( fooForm("foo"), '_text -> "Checkbox" )
@b4.submit('class -> "btn btn-secondary"){ <i class="fa fa-ok"></i> Save changes }
}
Finally, if you would need to render a simple input, without any field constructor, you can use the helper b4.clear.form
. This is a field constructor that doesn't add any code, just the input.
@b4.clear.form(routes.Application.mixed) { implicit cfc =>
@b4.inputWrapped( "search", fooForm("foo"), 'placeholder -> "Text to search..." ) { input =>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
@input
<div class="input-group-append">
<button class="btn btn-secondary" type="button">Search</button>
</div>
</div>
}
}
If you would need to that, you can make an "inner section" like this:
@defining(b4.inline.fieldConstructorSpecific) { implicit ifc =>
@b4.text( fooForm("bar"), '_label -> "Inline input text" )
}
// with your own custom field constructor that extends BSFieldConstructor
@defining(yourCustomFieldConstructor) { implicit myfc =>
@b4.text( fooForm("bar"), '_label -> "Inline input text" )
}
Or simply:
@b4.text( fooForm("bar"), '_label -> "Inline input text" )(b4.inline.fieldConstructor, implicitly[Messages])
But remember that horizontal and inline controls need to be inside their corresponding
.form-horizontal
and .form-inline
to be rendered correctly. So you may need to wrap them with a div
with these classes.