[Chapter 8, 10] Polish the form field

Author: Zelenya

exercises/chapter10/src/Main.purs

@@ -46,25 +46,26 @@ renderValidationErrors xs =
 -- event handler to update
 formField :: String -> String -> String -> (String -> Effect Unit) -> R.JSX
 formField name placeholder value setValue =
-  D.label
+  D.div
     { className: "form-group row"
     , children:
-        [ D.div
+        [ D.label
             { className: "col-sm col-form-label"
+            , htmlFor: name
             , children: [ D.text name ]
             }
         , D.div
             { className: "col-sm"
             , children:
                 [ D.input
                     { className: "form-control"
+                    , id: name
                     , placeholder
                     , value
                     , onChange:
                         let
                           handleValue :: Maybe String -> Effect Unit
                           handleValue (Just v) = setValue v
-
                           handleValue Nothing = pure unit
                         in
                           handler targetValue handleValue

exercises/chapter8/src/Main.purs

@@ -44,18 +44,20 @@ renderValidationErrors xs =
 -- ANCHOR: formField
 formField :: String -> String -> String -> (String -> Effect Unit) -> R.JSX
 formField name placeholder value setValue =
-  D.label
+  D.div
     { className: "form-group row"
     , children:
-        [ D.div
+        [ D.label
             { className: "col-sm col-form-label"
+            , htmlFor: name
             , children: [ D.text name ]
             }
         , D.div
             { className: "col-sm"
             , children:
                 [ D.input
                     { className: "form-control"
+                    , id: name
                     , placeholder
                     , value
                     , onChange: