Yesod：自定义 div 和表单答案

【问题标题】：Yesod: Custom divs and formsYesod：自定义 div 和表单
【发布时间】：2014-01-15 20:31:19
【问题描述】：

如何让Yesod生成这样的复杂表格：

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

我知道 Yesod 可以创建通用表单，但是否可以执行以下操作：

将div 包裹在文本框周围
将标签和输入文本框也包装在另一个 div 中。

Yesod 是否允许使用这些东西来生成高度自定义的表单？

【问题讨论】：

根据docs你应该可以做你想做的事。

标签： forms haskell yesod

【解决方案1】：

Yesod 提供了定义自定义字段的能力，这在他们的documentation. 中有很好的解释

另外，我为上述问题定义了两个自定义字段：

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
               }

这些函数以后可以用来构建实际的表单。整个工作代码是here.

【讨论】：

【解决方案2】：

您是否查看过runInputPost 和ireq？其他看form chapter in the yesod book。

但是，举个例子，你可以精确地创建你想要的表单，然后在 POST 请求中使用类似的东西，

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

对于表单处理程序本身，您可能会这样做，

-- The form page for posting a new blog article
getAdminNewArticleR :: Handler Html
getAdminNewArticleR = do
    formroute <- return $ AdminNewArticleR
    defaultLayout $ do
        -- ...

最后，表单页面的小村庄看起来像，

<form method=post action=@{formroute}>
    <input name="form-title-field">
    <textarea name="form-htmlcontent-field">

这让您可以 100% 控制表单。

【讨论】：