Add forms tutorial.

book/tutorial.nim

@@ -262,7 +262,100 @@ proc render*(context: Context): VNode =
 ```
 
 The result is the same but the code is now much more approachable.
+
+
+# Forms
+
+Building web forms is one of basic tasks in web development. Let's build a form with Karkas by combining stacks and putting the form elements in boxes.
+
+1. In `index.nim`, add:
+
+    ```nim
+    tdiv(style = hStack() <- {width: "300px", padding: "10px"}):
+
+      # The entire form is a vertical stack.
+      tdiv(style = vStack() <- box(1)):
+
+        # Each form field is a row in the stack.
+        # It is itself a horizontal stack that holds the input field and its label.
+        # For our convenience, so that we first type the field and then its label, set the stacking direction to `rightToLeft`.
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            input(name = k"first_name", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"first_name"):
+              text k"First name:"
+
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            input(name = k"last_name", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"last_name"):
+              text k"Last name:"
+
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            textarea(name = k"about_me", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"about_me"):
+              text k"About me:"
+
+        tdiv(style = hStack() <- {margin: "10px"}):
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"white", name = k"color")
+            label(`for` = k"white"):
+              text k"White"
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"blue", name = k"color")
+            label(`for` = k"blue"):
+              text k"Blue"
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"red", name = k"color")
+            label(`for` = k"red"):
+              text k"Red"
+    ```
 """
 
+nbKaraxCode:
+  import karkas
+
+  karaxHtml:
+    tdiv(style = vStack() <- box(1)):
+
+      tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+        tdiv(style = box(2)):
+          input(name = k"first_name", style = {width: k"100%"})
+        tdiv(style = box(1)):
+          label(`for` = k"first_name"):
+            text k"First name:"
+
+      tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+        tdiv(style = box(2)):
+          input(name = k"last_name", style = {width: k"100%"})
+        tdiv(style = box(1)):
+          label(`for` = k"last_name"):
+            text k"Last name:"
+
+      tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+        tdiv(style = box(2)):
+          textarea(name = k"about_me", style = {width: k"100%"})
+        tdiv(style = box(1)):
+          label(`for` = k"about_me"):
+            text k"About me:"
+
+      tdiv(style = hStack() <- {margin: "10px"}):
+        tdiv(style = box(1)):
+          input(`type` = k"radio", id = k"white", name = k"color")
+          label(`for` = k"white"):
+            text k"White"
+        tdiv(style = box(1)):
+          input(`type` = k"radio", id = k"blue", name = k"color")
+          label(`for` = k"blue"):
+            text k"Blue"
+        tdiv(style = box(1)):
+          input(`type` = k"radio", id = k"red", name = k"color")
+          label(`for` = k"red"):
+            text k"Red"
+
 nbSave
 

src/karkas.nim

@@ -1,5 +1,5 @@
 import karkas/[styles, sugar]
 
 
-export style, sugar
+export styles, sugar
 

tutorial/src/tutorial/pages/index.nim

@@ -18,3 +18,46 @@ proc render*(context: Context): VNode =
       tdiv(style = box(size = 2) <- {border: "solid"}):
         p: text "Box two" 
 
+    tdiv(style = hStack() <- {width: "300px", padding: "10px"}):
+
+      # The entire form is a vertical stack.
+      tdiv(style = vStack() <- box(1)):
+
+        # Each form field is a row in the stack.
+        # It is itself a horizontal stack that holds the input field and its label.
+        # For our convenience, so that we first type the field and then its label, set the stacking direction to `rightToLeft`.
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            input(name = k"first_name", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"first_name"):
+              text k"First name:"
+
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            input(name = k"last_name", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"last_name"):
+              text k"Last name:"
+
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            textarea(name = k"about_me", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"about_me"):
+              text k"About me:"
+
+        tdiv(style = hStack() <- {margin: "10px"}):
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"white", name = k"color")
+            label(`for` = k"white"):
+              text k"White"
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"blue", name = k"color")
+            label(`for` = k"blue"):
+              text k"Blue"
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"red", name = k"color")
+            label(`for` = k"red"):
+              text k"Red"
+

tutorial/tutorial.nimble

@@ -19,10 +19,10 @@ taskRequires "serve", "static_server >= 2.2.1"
 # Tasks
 
 task make, "Build the app":
-  exec "karun src/tutorial.nim"
+  exec findExe("karun") & " src/tutorial.nim"
 
 task serve, "Serve the app with a local server":
   echo "The app is served at: http://localhost:1337/app.html#/"
   echo()
-  exec "static_server"
+  exec findExe("static_server")