let
    attr1 = ("action" =: "process.php") <> ("id" =: "app-login")
  elAttr "form" attr1 $ do
    el "fieldset" $ do
      elClass "legend" "lclass" $ do
        text "login details"
        return ()
      el "div" $ do
        let
          attr2 = ("for" =: "user-name")
        elAttr "label" attr2 $ do
          text "username:"
          return ()
        let
          tiConf3 = def
                    & (textInputConfig_attributes .~ (constDyn (attr4)))
                    & (textInputConfig_inputType .~ "email")
                    & (textInputConfig_initialValue .~ "your username is your email address")
          attr4 = ("autofocus" =: "") <> ("name" =: "user-name") <>
                  ("required" =: "")
        ti3 <- textInput tiConf3
        return ()
      el "div" $ do
        let
          attr5 = ("for" =: "password")
        elAttr "label" attr5 $ do
          text "password:"
          return ()
        let
          tiConf6 = def
                    & (textInputConfig_attributes .~ (constDyn (attr7)))
                    & (textInputConfig_inputType .~ "password")
                    & (textInputConfig_initialValue .~ "6 digits, a combination of numbers and letters")
          attr7 = ("name" =: "password") <> ("required" =: "")
        ti6 <- textInput tiConf6
        return ()
      divClass "divc1" $ do
        let
          tiConf8 = def
                    & (textInputConfig_attributes .~ (constDyn (attr9)))
                    & (textInputConfig_inputType .~ "submit")
          attr9 = ("name" =: "login") <> ("value" =: "login")
        ti8 <- textInput tiConf8
        return ()
      return ()
    return ()
  el "fieldset" $ do
    el "legend" $ do
      text "choose some monster features"
      return ()
    el "div" $ do
      let
        cbConf10 = def
                   & (checkboxConfig_attributes .~ (constDyn (attr11)))
        attr11 = ("id" =: "scales") <> ("name" =: "feature") <>
                 ("value" =: "scales")
      cb10 <- checkbox True cbConf10
      let
        attr12 = ("for" =: "scales")
      elAttr "label" attr12 $ do
        text "scales"
        return ()
      return ()
    el "div" $ do
      let
        cbConf13 = def
                   & (checkboxConfig_attributes .~ (constDyn (attr14)))
        attr14 = ("id" =: "horns") <> ("name" =: "feature") <>
                 ("value" =: "horns")
      cb13 <- checkbox False cbConf13
      let
        attr15 = ("for" =: "horns")
      elAttr "label" attr15 $ do
        text "horns"
        return ()
      return ()
    el "div" $ do
      let
        cbConf16 = def
                   & (checkboxConfig_attributes .~ (constDyn (attr17)))
        attr17 = ("id" =: "claws") <> ("name" =: "feature") <>
                 ("value" =: "claws")
      cb16 <- checkbox False cbConf16
      let
        attr18 = ("for" =: "claws")
      elAttr "label" attr18 $ do
        text "claws"
        return ()
      return ()
    return ()
  el "fieldset" $ do
    el "legend" $ do
      text "audio settings"
      return ()
    let
      attr19 = ("for" =: "volume")
    elAttr "label" attr19 $ do
      text "volume"
      return ()
    let
      riConf20 = def
                 & (rangeInputConfig_attributes .~ (constDyn (attr21)))
      attr21 = ("id" =: "start") <> ("max" =: "11") <> ("min" =: "0") <>
               ("name" =: "volume")
    ri20 <- rangeInput riConf20
    let
      attr22 = ("for" =: "cowbell")
    elAttr "label" attr22 $ do
      text "cowbell"
      return ()
    let
      riConf23 = def
                 & (rangeInputConfig_attributes .~ (constDyn (attr24)))
                 & (rangeInputConfig_initialValue .~ 90.0)
      attr24 = ("id" =: "cowbell") <> ("max" =: "100") <> ("min" =: "0")
               <> ("name" =: "cowbell") <> ("step" =: "2")
    ri23 <- rangeInput riConf23
    return ()
  el "fieldset" $ do
    el "legend" $ do
      text "profile"
      return ()
    el "div" $ do
      let
        attr25 = ("for" =: "name")
      elAttr "label" attr25 $ do
        text "display name:"
        return ()
      let
        tiConf26 = def
                   & (textInputConfig_attributes .~ (constDyn (attr27)))
        attr27 = ("id" =: "name") <> ("name" =: "name")
      ti26 <- textInput tiConf26
      return ()
    el "div" $ do
      let
        attr28 = ("for" =: "avatar")
      elAttr "label" attr28 $ do
        text "profile picture:"
        return ()
      let
        fiConf29 = FileInputConfig ((constDyn (attr30)))
        attr30 = ("accept" =: "image/png, image/jpeg") <>
                 ("id" =: "avatar") <> ("name" =: "avatar")
      fi29 <- fileInput fiConf29
      return ()
    return ()
  let
    attr31 = ("for" =: "pet-select")
  elAttr "label" attr31 $ do
    text "choose a pet:"
    return ()
  let
    ddConf32 = def
               & (dropdownConfig_attributes .~ (constDyn (attr33)))
    attr33 = ("id" =: "pet-select")
    optMap34 = ("" =: "--please choose an option--") <>
               ("cat" =: "cat") <> ("dog" =: "dog") <> ("goldfish" =: "goldfish")
               <> ("hamster" =: "hamster") <> ("parrot" =: "parrot") <>
               ("spider" =: "spider")
  dd32 <- dropdown "hamster" (constDyn (optMap34)) ddConf32
  el "footer" $ do
    text "photo by ricky kharawala"
    el "br" $ return ()
    text "on unsplash"
    return ()
  el "p" $ do
    let
      attr35 = Map.empty
    (btnEl36,_) <- elAttr' "button" attr35 $ do
      text "default button"
      return ()
    {-
      let
        btnEv36 = domEvent Click btnEl36
    -}
    return ()
  el "p" $ do
    let
      attr37 = ("disabled" =: "")
    (btnEl38,_) <- elAttr' "button" attr37 $ do
      text "disabled button"
      return ()
    {-
      let
        btnEv38 = domEvent Click btnEl38
    -}
    return ()
  el "p" $ do
    let
      attr39 = ("name" =: "submit") <> ("type" =: "submit") <>
               ("value" =: "submit-true")
    (btnEl40,_) <- elAttr' "button" attr39 $ do
      text "form submit button"
      return ()
    {-
      let
        btnEv40 = domEvent Click btnEl40
    -}
    return ()
  el "p" $ do
    let
      attr41 = ("accesskey" =: "a")
    (btnEl42,_) <- elAttr' "button" attr41 $ do
      text "button with"
      el "u" $ do
        text "a"
        return ()
      text "ccesskey"
      return ()
    {-
      let
        btnEv42 = domEvent Click btnEl42
    -}
    return ()
  el "p" $ do
    let
      attr43 = ("class" =: "styled")
    (btnEl44,_) <- elAttr' "button" attr43 $ do
      text "fancy styled button"
      return ()
    {-
      let
        btnEv44 = domEvent Click btnEl44
    -}
    return ()
  el "fieldset" $ do
    el "legend" $ do
      text "input button"
      return ()
    el "form" $ do
      el "p" $ do
        text "default button:"
        let
          attr45 = ("class" =: "btn")
        (btnEl46,_) <- elAttr' "button" attr45 $ do
          text "click me"
          return ()
        {-
          let
            btnEv46 = domEvent Click btnEl46
        -}
        return ()
      el "p" $ do
        text "disabled button:"
        let
          attr47 = ("class" =: "btn") <> ("disabled" =: "")
        (btnEl48,_) <- elAttr' "button" attr47 $ do
          text "i am disabled"
          return ()
        {-
          let
            btnEv48 = domEvent Click btnEl48
        -}
        return ()
      el "p" $ do
        text "button with"
        el "u" $ do
          el "b" $ do
            text "a"
            return ()
          return ()
        text "ccesskey:"
        let
          attr49 = ("accesskey" =: "a") <> ("class" =: "btn")
        (btnEl50,_) <- elAttr' "button" attr49 $ do
          text "accesskey enabled"
          return ()
        {-
          let
            btnEv50 = domEvent Click btnEl50
        -}
        return ()
      el "p" $ do
        text "button without style:"
        let
          attr51 = Map.empty
        (btnEl52,_) <- elAttr' "button" attr51 $ do
          text "i'm a basic button"
          return ()
        {-
          let
            btnEv52 = domEvent Click btnEl52
        -}
        return ()
      return ()
    return ()

<form id="app-login" action="process.php">
    <fieldset>
        <legend class="lclass">login details</legend>
        <div>
            <label for="user-name">username:</label>
            <input name="user-name" type="email" placeholder="your username is your email address" required autofocus>

        </div>
        <div>
            <label for="password">password:</label>
            <input name="password" type="password" placeholder="6 digits, a combination of numbers and letters" required>
        </div>
        <div class="divc1">
            <input name="login" type="submit" value="login">
        </div>
    </fieldset>
</form>
<fieldset>
    <legend>choose some monster features</legend>

    <div>
        <input type="checkbox" id="scales" name="feature"
               value="scales" checked />
        <label for="scales">scales</label>
    </div>

    <div>
        <input type="checkbox" id="horns" name="feature"
               value="horns" />
        <label for="horns">horns</label>
    </div>

    <div>
        <input type="checkbox" id="claws" name="feature"
               value="claws" />
        <label for="claws">claws</label>
    </div>

</fieldset>
<fieldset>
    <legend>audio settings</legend>

    <label for="volume">volume</label>
    <input type="range" id="start" name="volume"
           min="0" max="11" />

    <label for="cowbell">cowbell</label>
    <input type="range" id="cowbell" name="cowbell" 
           min="0" max="100" value="90" step="2" />

</fieldset>
<fieldset>
    <legend>profile</legend>

    <div>
        <label for="name">display name:</label>
        <input type="text" id="name" name="name"/>
    </div>

    <div>
        <label for="avatar">profile picture:</label>
        <input type="file"
               id="avatar" name="avatar"
               accept="image/png, image/jpeg" />
    </div>

</fieldset>
<label for="pet-select">choose a pet:</label>

<select id="pet-select">
    <option value="">--please choose an option--</option>
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option value="hamster" selected>hamster</option>
    <option value="parrot">parrot</option>
    <option value="spider">spider</option>
    <option value="goldfish">goldfish</option>
</select>

<footer>
    photo by ricky kharawala<br/> on unsplash
</footer>
<p><button>default button</button></p>

<p><button disabled>disabled button</button></p>

<p>
    <button name="submit" type="submit" value="submit-true">
        form submit button
    </button>
</p>

<p><button accesskey="a">button with <u>a</u>ccesskey</button></p>

<p><button class="styled">fancy styled button</button></p>

<fieldset>
    <legend>input button</legend>
    <form>
        <p> default button: <input type="button" class="btn" value="click me" /> </p>

        <p> disabled button: <input type="button" class="btn" value="i am disabled" disabled /> </p>

        <p>button with <u><b>a</b></u>ccesskey: <input type="button" class="btn" value="accesskey enabled" accesskey="a" /></p>

        <p>button without style: <input type="button" value="i'm a basic button" /></p>
    </form>
</fieldset>