yesod-form-1.6.7: Form handling support for Yesod Web Framework

Safe HaskellNone
LanguageHaskell98

Yesod.Form.Bootstrap3

Contents

Description

Helper functions for creating forms when using Bootstrap 3.

Synopsis

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 Source #

Render the given form using Bootstrap v3 conventions.

Since: yesod-form 1.3.8

data BootstrapFormLayout Source #

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

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 Source #

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 Source #

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 Source #

Add an autofocus attribute to a field.

Since: yesod-form 1.3.8

withLargeInput :: FieldSettings site -> FieldSettings site Source #

Add the input-lg CSS class to a field.

Since: yesod-form 1.3.8

withSmallInput :: FieldSettings site -> FieldSettings site Source #

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 () Source #

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) Source #

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 Source #

How the bootstrapSubmit button should be rendered.

Since: yesod-form 1.3.8

Constructors

BootstrapSubmit 

Fields

Instances
Show msg => Show (BootstrapSubmit msg) Source # 
Instance details

Defined in Yesod.Form.Bootstrap3

IsString msg => IsString (BootstrapSubmit msg) Source # 
Instance details

Defined in Yesod.Form.Bootstrap3