Yesod: Custom divs and forms - forms

Question

How to make Yesod generate complicated forms like this:
<form class="form-horizontal">
<div class="form-group">
<label for="text1" class="control-label col-lg-4">
Normal Input Field
</label>
<div class="col-lg-8">
<input type="text" id="text1" placeholder="Email" class="form-control">
</div>
</div>
<!-- /.form-group -->
<div class="form-group">
<label for="pass1" class="control-label col-lg-4">
Password Field
</label>
<div class="col-lg-8">
<input class="form-control" type="password" id="pass1" data-original-title="Please use your secure password" data-placement="top" />
</div>
</div>
</form>
I know that Yesod can create a generic form but is it possible to do the following things:
Wrap a div around a textbox
Wrap the label and input textbox also in another div.
Does Yesod allow to do these stuff for generating highly customized forms ?

Answer 1

Yesod provides the ability of defining custom fields which is very well explained in their documentation.
Also, I define two custom fields for the above problem:
textBoxField :: Text -> Field Handler Text
textBoxField label = Field
{ fieldParse = \rawVals _ ->
case rawVals of
[a] -> return $ Right $ Just a
[] -> return $ Right Nothing
, fieldView = \idAttr nameAttr otherAttrs eResult isReq ->
[whamlet|
<div class="form-group">
<label for=#{idAttr} class="control-label col-lg-4">#{label}
<div class="col-lg-8">
<input id=#{idAttr} name=#{nameAttr} *{otherAttrs}
type="text" class="form-control">
|]
, fieldEnctype = UrlEncoded
}
cPasswordField :: Text -> Field Handler Text
cPasswordField label = Field
{ fieldParse = \rawVals _ ->
case rawVals of
[a] -> return $ Right $ Just a
[] -> return $ Right Nothing
, fieldView = \idAttr nameAttr otherAttrs eResult isReq ->
[whamlet|
<div class="form-group">
<label for=#{idAttr} class="control-label col-lg-4">#{label}
<div class="col-lg-8">
<input id=#{idAttr} name=#{nameAttr} *{otherAttrs}
type="password" class="form-control"
data-original-title="Please use your secure password" data-placement="top">
|]
, fieldEnctype = UrlEncoded
}
These functions can be later utilized to build up the actual form. The entire working code is here.

Answer 2

Have you looked into runInputPost and ireq? Else look at the form chapter in the yesod book.
But, to give you an example, you can create exactly the form you want, and then just use something like this in the POST request,
-- Handling the blog article form
postAdminNewArticleR :: Handler Html
postAdminNewArticleR = do
title <- runInputPost $ ireq textField "form-title-field"
htmlContent <- runInputPost $ ireq htmlField "form-htmlcontent-field"
-- insert into the database or something
For the form handler itself, you'd probably do,
-- The form page for posting a new blog article
getAdminNewArticleR :: Handler Html
getAdminNewArticleR = do
formroute <- return $ AdminNewArticleR
defaultLayout $ do
-- ...
and lastly, the hamlet for the form page would look like,
<form method=post action=#{formroute}>
<input name="form-title-field">
<textarea name="form-htmlcontent-field">
This gives you 100% control of the forms.