Forms can be a tedious part of web development since they require synchronization of code in many different areas: the HTML form declaration, parsing of the form and reconstructing a datatype from the raw values. The Yesod form library simplifies things greatly. We'll start off with a basic application.
> {-# LANGUAGE TypeFamilies, QuasiQuotes, OverloadedStrings #-} > import Yesod > import Control.Applicative > data FormExample = FormExample > type Handler = GHandler FormExample FormExample > mkYesod "FormExample" [$parseRoutes| > / RootR GET > |] > instance Yesod FormExample where approot _ = "" Next, we'll declare a Person datatype with a name and age. After that, we'll create a formlet. A formlet is a declarative approach to forms. It takes a Maybe value and constructs either a blank form, a form based on the original value, or a form based on the values submitted by the user. It also attempts to construct a datatype, failing on validation errors. > data Person = Person { name :: String, age :: Int } > deriving Show > personFormlet p = fieldsToTable $ Person > <$> stringField "Name" (fmap name p) > <*> intField "Age" (fmap age p) We use an applicative approach and stay mostly declarative. The "fmap name p" bit is just a way to get the name from within a value of type "Maybe Person". > getRootR :: Handler RepHtml > getRootR = do > (res, wform, enctype) <- runFormGet $ personFormlet NothingWe use runFormGet to bind to GET (query-string) parameters; we could also use runFormPost. The "Nothing" is the initial value of the form. You could also supply a "Just Person" value if you like. There is a three-tuple returned, containing the parsed value, the HTML form as a widget and the encoding type for the form.
We use a widget for the form since it allows embedding CSS and Javascript code in forms directly. This allows unobtrusive adding of rich Javascript controls like date pickers.
> defaultLayout $ do > setTitle "Form Example" > form <- extractBody wformextractBody returns the HTML of a widget and "passes" all of the other declarations (the CSS, Javascript, etc) up to the parent widget. The rest of this is just standard Hamlet code and our main function.
> addHamlet [$hamlet| > %p Last result: $show.res$ > %form!enctype=$enctype$ > %table > ^form^ > %tr > %td!colspan=2 > %input!type=submit > |] > > main = basicHandler 3000 FormExample