First touch with forms in Yesod

[Conee]

Greeting,

I'm a beginner in Yesod and I got to the part where I want to create some forms.

For example filters that have checkboxes, dropdown list and search field (as in the picture).

First I created these fields in a hamlet file. But as I see it looks like I shouldn't have done it like this because fields need to be created in Handlers:

<div class="row">

<!-- BEGIN FILTERS -->

  <hr>

  <div class="col-md-2" style="margin-left: 15px;">

  <!-- BEGIN FILTER BY CATEGORY -->

     <h4>By category:

     $forall cat <- cats

        <div class="checkbox">

           <label><input type="checkbox" class="icheck"> #{show $ cat}

  <!-- END FILTER BY CATEGORY -->

  <!-- BEGIN FILTER BY CITY -->

  <div class="col-md-3">

     <h4>By city:

     <div class="form-group">

        <select class="form-control" id="sel1">

           <option>--Please choose an city--

           $forall cat <- cats

              <option>#{show $ cat}

  <!-- END FILTER BY CITY -->

  <div class="padding">

  <!-- BEGIN SEARCH INPUT -->

  <div class="col-md-5">

     <h4><i class="fa fa-file-o"></i> Search :

     <div class="input-group">

        <input type="text" class="form-control" value="web development">

        <span class="input-group-btn">

           <button class="btn btn-primary" type="button"><i class="fa fa-search"></i>

     <p>Showing all results matching "web development"

  <!-- END SEARCH INPUT -->

My questions are:

1) Do I now need to delete the fields I created in hamlet, or I can somehow link them to the handler in this current state?

2) What is the simple way to create checkboxes as in the picture?

3) If I create a form in the handler and call it with ^{form} in the hamlet file, then how do I add styles to those fields (eg position or size in css)?

4) Is it possible to work separately with fields, first checkboxes, then dropdown and then search or is it done all at once?

Mostly beginner questions if anyone can explain and share some advice I would be grateful.

Thank you!

Nemanja

[jsch...@gmail.com]

I can only try to answer a small part of your question:

You probably have seen the example here: https://www.yesodweb.com/book/forms

The boolean fields in your form data type (i.e. Sport, Concert, …) are usually hard-coded. If they are dynamic in your case, you might better use an <select multiple>. That would be idiomatic and easier to create.

I'm excited to read solution for the other problems here :)