Yesod.Form.Bootstrap3

Helper functions for creating forms when using Bootstrap 3.

Example: Rendering a basic form

<input> tags in Bootstrap 3 require the form-control class, and so they need modified FieldSettings to display correctly.

When creating your forms, use the bfs function to add this class:

personForm :: AForm Handler Person
personForm = Person
       <$> areq textField (bfs ("Name" :: Text)) Nothing
       <*> areq textField (bfs ("Surname" :: Text)) Nothing

That form can then be rendered into a widget using the renderBootstrap3 function. Here, the form is laid out vertically using BootstrapBasicForm:

(formWidget, formEnctype) <- generateFormPost $ renderBootstrap3 BootstrapBasicForm personForm

And then used in Hamlet:

 <form role=form method=post action=@{ActionR} enctype=#{formEnctype}>
   ^{formWidget}
   <button type="submit" .btn .btn-default>Submit

Example: Rendering a horizontal form

Yesod.Form.Bootstrap3 also supports horizontal, grid based forms. These forms require additional markup for the submit tag, which is provided by the bootstrapSubmit function:

personForm :: AForm Handler Person
personForm = Person
       <$> areq textField MsgName Nothing
       <*> areq textField MsgSurname Nothing
       <*  bootstrapSubmit (BootstrapSubmit MsgSubmit "btn-default" [("attribute-name","attribute-value")])
       -- Note: bootstrapSubmit works with all BootstrapFormLayouts, but provides the additional markup required for Bootstrap's horizontal forms.

That form can be rendered with specific grid spacing:

(formWidget, formEnctype) <- generateFormPost $ renderBootstrap3 (BootstrapHorizontalForm (ColSm 0) (ColSm 4) (ColSm 0) (ColSm 6)) personForm

And then used in Hamlet. Note the additional form-horizontal class on the form, and that a manual submit tag isn't required:

 <form .form-horizontal role=form method=post action=@{ActionR} enctype=#{formEnctype}>
   ^{formWidget}

Rendering forms

renderBootstrap3 :: Monad m => BootstrapFormLayout -> FormRender m a

Render the given form using Bootstrap v3 conventions.

Since: yesod-form 1.3.8

data BootstrapFormLayout

The layout used for the bootstrap form.

Since: yesod-form 1.3.8

Constructors

BootstrapBasicForm

A form with labels and inputs listed vertically. See http://getbootstrap.com/css/#forms-example

BootstrapInlineForm

A form whose <inputs> are laid out horizontally (displayed as inline-block). For this layout, <label>s are still added to the HTML, but are hidden from display. When using this layout, you must add the form-inline class to your form tag. See http://getbootstrap.com/css/#forms-inline

BootstrapHorizontalForm

A form laid out using the Bootstrap grid, with labels in the left column and inputs on the right. When using this layout, you must add the form-horizontal class to your form tag. Bootstrap requires additional markup for the submit button for horizontal forms; you can use bootstrapSubmit in your form or write the markup manually. See http://getbootstrap.com/css/#forms-horizontal

Fields

bflLabelOffset :: !BootstrapGridOptions

The left offset of the <label>.

bflLabelSize :: !BootstrapGridOptions

The number of grid columns the <label> should use.

bflInputOffset :: !BootstrapGridOptions

The left offset of the <input> from its <label>.

bflInputSize :: !BootstrapGridOptions

The number of grid columns the <input> should use.

Instances

Show BootstrapFormLayout

data BootstrapGridOptions

How many bootstrap grid columns should be taken (see BootstrapFormLayout).

Since: yesod-form 1.3.8

Constructors

ColXs !Int

ColSm !Int

ColMd !Int

ColLg !Int

Instances

Eq BootstrapGridOptions

Ord BootstrapGridOptions

Show BootstrapGridOptions

Field settings

This module comes with several methods to help customize your Bootstrap 3 <input>s. These functions can be chained together to apply several properties to an input:

userForm :: AForm Handler UserForm
userForm = UserForm
       <$> areq textField nameSettings Nothing
     where nameSettings = withAutofocus $
                          withPlaceholder "First name" $
                          (bfs ("Name" :: Text))

bfs :: RenderMessage site msg => msg -> FieldSettings site

Create a new FieldSettings with the form-control class that is required by Bootstrap v3.

Since: yesod-form 1.3.8

withPlaceholder :: Text -> FieldSettings site -> FieldSettings site

Add a placeholder attribute to a field. If you need i18n for the placeholder, currently you'll need to do a hack and use getMessageRender manually.

Since: yesod-form 1.3.8

withAutofocus :: FieldSettings site -> FieldSettings site

Add an autofocus attribute to a field.

Since: yesod-form 1.3.8

withLargeInput :: FieldSettings site -> FieldSettings site

Add the input-lg CSS class to a field.

Since: yesod-form 1.3.8

withSmallInput :: FieldSettings site -> FieldSettings site

Add the input-sm CSS class to a field.

Since: yesod-form 1.3.8

Submit button

bootstrapSubmit :: (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m) => BootstrapSubmit msg -> AForm m ()

A Bootstrap v3 submit button disguised as a field for convenience. For example, if your form currently is:

Person <$> areq textField "Name"    Nothing
       <*> areq textField "Surname" Nothing

Then just change it to:

Person <$> areq textField "Name"    Nothing
       <*> areq textField "Surname" Nothing
       <*  bootstrapSubmit ("Register" :: BootstrapSubmit Text)

(Note that <* is not a typo.)

Alternatively, you may also just create the submit button manually as well in order to have more control over its layout.

Since: yesod-form 1.3.8

mbootstrapSubmit :: (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m) => BootstrapSubmit msg -> MForm m (FormResult (), FieldView site)

Same as bootstrapSubmit but for monadic forms. This isn't as useful since you're not going to use renderBootstrap3 anyway.

Since: yesod-form 1.3.8

data BootstrapSubmit msg

How the bootstrapSubmit button should be rendered.

Since: yesod-form 1.3.8

Constructors

BootstrapSubmit

Fields

bsValue :: msg

The text of the submit button.

bsClasses :: Text

Classes added to the <button>.

bsAttrs :: [(Text, Text)]

Attributes added to the <button>.

Instances

Show msg => Show (BootstrapSubmit msg)

IsString msg => IsString (BootstrapSubmit msg)