*Edit: this utility code has been modified by [Felipe Lessa](https://github.com/meteficha) and merged into [Yesod](https://github.com/yesodweb/yesod/pull/687).*
While working with forms in Yesod, I noticed that the `renderBootstrap` functionality doesn't work with Bootstrap 3. There were some breaking changes introduced in version 3, so it got me thinking of implementing some basic support for Bootstrap 3 forms. ## Bootstrap 3 form kinds As can be seen in [Bootstrap forms documentation](http://getbootstrap.com/css/#forms), there are basically three kinds of forms in Bootstrap. The first kind of form is the simplest of all: it arranges its elements one per row. Here's some HTML code for a basic form: ```html
``` Labels and input fields are grouped in containers that have a class attribute `form-group` and input fields additionally have a class attribute `form-control`. The second kind of form is an inline form. This form doesn't have any labels, but they are just rendered hidden because screen readers can still "see" them. The example source code for this form looks like this: ```html
``` The third kind of form is a horizontal form. This form has its elements arranged in a grid, where each group of controls (label, field and tooltips container) has its own row. The example form would look like this: ```html
``` ## Forms comparison From the examples above we can see that these forms are pretty similar, with minor differences that will affect the implementation. The type of form is determined via `class` parameter, or, in the case of a basic form, no `class` parameter. In all of the three cases form controls are contained inside the `div` container with a `class` attribute of `form-group`. In case of inline forms, labels have a `class` attribute of `sr-only`. Input fields of horizontal forms have its own `div` container, and additionally, labels and enclosing field containers have `class` attributes for positioning and sizing. With these in mind, we can slowly begin implementing some basic support for these kinds of forms. ## First steps As I already said above, there's a Bootstrap support in Yesod, but it's outdated. Here's the `renderBootstrap` function, taken from the `Yesod.Form.Functions` module, with the rendering code marked: ```haskell renderBootstrap :: Monad m => FormRender m a renderBootstrap aform fragment = do (res, views') <- aFormToForm aform let views = views' [] has (Just _) = True has Nothing = False let widget = [whamlet| $newline never \#{fragment} {-hi-}$forall view <- views {-/hi-} {-hi-}
{-/hi-} {-hi-}