diff --git a/README.md b/README.md
index bcc4dbb..3ee27fe 100644
--- a/README.md
+++ b/README.md
@@ -141,11 +141,95 @@ let doc (person : Person) =
     ]
 ```
 
+### Forms
+
+Forms are the lifeblood of HTML applications. A basic form using the markup module would like the following:
+
+```fsharp
+Elem.form [ Attr.method "post"; Attr.action "/submit" ] [
+    Elem.label [ Attr.for' "name" ] [ Text.raw "Name" ]
+    Elem.input [ Attr.id "name"; Attr.name "name"; Attr.typeText ]
+
+    Elem.input [ Attr.typeSubmit ]
+]
+```
+
+Expanding on this, we can create a more complex form involving multiple inputs and input types as follows:
+
+```fsharp
+Elem.form [ Attr.method "post"; Attr.action "/submit" ] [
+    Elem.label [ Attr.for' "name" ] [ Text.raw "Name" ]
+    Elem.input [ Attr.id "name"; Attr.name "name" ]
+
+    Elem.label [ Attr.for' "bio" ] [ Text.raw "Bio" ]
+    Elem.textarea [ Attr.name "id"; Attr.name "bio" ] []
+
+    Elem.label [ Attr.for' "hobbies" ] [ Text.raw "Hobbies" ]
+    Elem.select [ Attr.id "hobbies"; Attr.name "hobbies"; Attr.multiple ] [
+        Elem.option [ Attr.value "programming" ] [ Text.raw "Programming" ]
+        Elem.option [ Attr.value "diy" ] [ Text.raw "DIY" ]
+        Elem.option [ Attr.value "basketball" ] [ Text.raw "Basketball" ]
+    ]
+
+    Elem.fieldset [] [
+        Elem.legend [] [ Text.raw "Do you like chocolate?" ]
+        Elem.label [] [
+            Text.raw "Yes"
+            Elem.input [ Attr.typeRadio; Attr.name "chocolate"; Attr.value "yes" ] ]
+        Elem.label [] [
+            Text.raw "No"
+            Elem.input [ Attr.typeRadio; Attr.name "chocolate"; Attr.value "no" ] ]
+    ]
+
+    Elem.fieldset [] [
+        Elem.legend [] [ Text.raw "Subscribe to our newsletter" ]
+        Elem.label [] [
+            Text.raw "Receive updates about product"
+            Elem.input [ Attr.typeCheckbox; Attr.name "newsletter"; Attr.value "product" ] ]
+        Elem.label [] [
+            Text.raw "Receive updates about company"
+            Elem.input [ Attr.typeCheckbox; Attr.name "newsletter"; Attr.value "company" ] ]
+    ]
+
+    Elem.input [ Attr.typeSubmit ]
+]
+```
+
+A simple but useful _meta_-element `Elem.control` can reduce the verbosity required to create form outputs. The same form would look like:
+
+```fsharp
+Elem.form [ Attr.method "post"; Attr.action "/submit" ] [
+    Elem.control "name" [] [ Text.raw "Name" ]
+
+    Elem.controlTextarea "bio" [] [ Text.raw "Bio" ] []
+
+    Elem.controlSelect "hobbies" [ Attr.multiple ] [ Text.raw "Hobbies" ] [
+        Elem.option [ Attr.value "programming" ] [ Text.raw "Programming" ]
+        Elem.option [ Attr.value "diy" ] [ Text.raw "DIY" ]
+        Elem.option [ Attr.value "basketball" ] [ Text.raw "Basketball" ]
+    ]
+
+    Elem.fieldset [] [
+        Elem.legend [] [ Text.raw "Do you like chocolate?" ]        
+        Elem.control "chocolate" [ Attr.id "chocolate_yes"; Attr.typeRadio ] [ Text.raw "yes" ]
+        Elem.control "chocolate" [ Attr.id "chocolate_no"; Attr.typeRadio ] [ Text.raw "no" ]
+    ]
+
+    Elem.fieldset [] [
+        Elem.legend [] [ Text.raw "Subscribe to our newsletter" ]
+        Elem.control "newsletter" [ Attr.id "newsletter_product"; Attr.typeCheckbox ] [ Text.raw "Receive updates about product" ]
+        Elem.control "newsletter" [ Attr.id "newsletter_company"; Attr.typeCheckbox ] [ Text.raw "Receive updates about company" ]
+    ]
+
+    Elem.input [ Attr.typeSubmit ]
+]
+```
+
 ### Merging Attributes
 
 The markup module allows you to easily create components, an excellent way to reduce code repetition in your UI. To support runtime customization, it is advisable to ensure components (or reusable markup blocks) retain a similar function "shape" to standard elements. That being, `XmlAttribute list -> XmlNode list -> XmlNode`.
 
-This means that you will inevitably end up needing to combine your predefined `XmlAttribute list` with a list provided at runtime. To facilitate this, the `Attr.merge` function will group attributes by key, and concatenate the values in the case of `KeyValueAttribute`.
+This means that you will inevitably end up needing to combine your predefined `XmlAttribute list` with a list provided at runtime. To facilitate this, the `Attr.merge` function will group attributes by key, and intelligently concatenate the values in the case of additive attributes (i.e., `class`, `style` and `accept`).
 
 ```fsharp
 open Falco.Markup
diff --git a/src/Falco.Markup/Elem.fs b/src/Falco.Markup/Elem.fs
index 1861766..ceae3a4 100644
--- a/src/Falco.Markup/Elem.fs
+++ b/src/Falco.Markup/Elem.fs
@@ -9,146 +9,407 @@ module Elem =
     let createSelfClosing (tag : string) (attr : XmlAttribute list) =
         SelfClosingNode (tag, attr)
 
+    //
     // Main root
+    
+    /// `<html>` element
     let html = create "html"
 
+    //
     // Document metadata
+    
+    /// `<base>` element
     let base' = createSelfClosing "base"
+    
+    /// `<head>` element
     let head = create "head"
+    
+    /// `<link>` element
     let link = createSelfClosing "link"
+    
+    /// `<meta>` element
     let meta = createSelfClosing "meta"
+    
+    /// `<style>` element
     let style = create "style"
+    
+    /// `<title>` element
     let title = create "title"
 
+    //
     // Sectioning root
+    
+    /// `<body>` element
     let body = create "body"
 
-    // Content sectioning
+    //
+    // Content sectioning    
+    
+    /// `<address>` element
     let address = create "address"
+    
+    /// `<article>` element
     let article = create "article"
+    
+    /// `<aside>` element
     let aside = create "aside"
+    
+    /// `<footer>` element
     let footer = create "footer"
+    
+    /// `<header>` element
     let header = create "header"
+    
+    /// `<h1>` element
     let h1 = create "h1"
+    
+    /// `<h2>` element
     let h2 = create "h2"
+    
+    /// `<h3>` element
     let h3 = create "h3"
+    
+    /// `<h4>` element
     let h4 = create "h4"
+    
+    /// `<h5>` element
     let h5 = create "h5"
+    
+    /// `<h6>` element
     let h6 = create "h6"
+    
+    /// `<main>` element
     let main = create "main"
+    
+    /// `<nav>` element
     let nav = create "nav"
+    
+    /// `<section>` element
     let section = create "section"
 
+    //
     // Text content
+    
+    /// `<blockquote>` element
     let blockquote = create "blockquote"
+    
+    /// `<dd>` element
     let dd = create "dd"
+    
+    /// `<div>` element
     let div = create "div"
+    
+    /// `<dl>` element
     let dl = create "dl"
+    
+    /// `<dt>` element
     let dt = create "dt"
+    
+    /// `<figcaption>` element
     let figcaption = create "figcaption"
+    
+    /// `<figure>` element
     let figure = create "figure"
+    
+    /// `<hr>` element
     let hr = createSelfClosing "hr"
+    
+    /// `<li>` element
     let li = create "li"
+    
+    /// `<menu>` element
     let menu = create "menu"
+    
+    /// `<ol>` element
     let ol = create "ol"
+    
+    /// `<p>` element
     let p = create "p"
+    
+    /// `<pre>` element
     let pre = create "pre"
+    
+    /// `<ul>` element
     let ul = create "ul"
 
+    //
     // Inline text semantics
+    
+    /// `<a>` element
     let a = create "a"
+    
+    /// `<abbr>` element
     let abbr = create "abbr"
+    
+    /// `<b>` element
     let b = create "b"
+    
+    /// `<bdi>` element
     let bdi = create "bdi"
+    
+    /// `<bdo>` element
     let bdo = create "bdo"
+    
+    /// `<br>` element
     let br = createSelfClosing "br"
+    
+    /// `<cite>` element
     let cite = create "cite"
+    
+    /// `<code>` element
     let code = create "code"
+    
+    /// `<data>` element
     let data = create "data"
+    
+    /// `<dfn>` element
     let dfn = create "dfn"
+    
+    /// `<em>` element
     let em = create "em"
+    
+    /// `<i>` element
     let i = create "i"
+    
+    /// `<kbd>` element
     let kbd = create "kbd"
+    
+    /// `<mark>` element
     let mark = create "mark"
+    
+    /// `<q>` element
     let q = create "q"
+    
+    /// `<rp>` element
     let rp = create "rp"
+    
+    /// `<rt>` element
     let rt = create "rt"
+    
+    /// `<ruby>` element
     let ruby = create "ruby"
+    
+    /// `<s>` element
     let s = create "s"
+    
+    /// `<samp>` element
     let samp = create "samp"
+    
+    /// `<small>` element
     let small = create "small"
+    
+    /// `<span>` element
     let span = create "span"
+    
+    /// `<strong>` element
     let strong = create "strong"
+    
+    /// `<sub>` element
     let sub = create "sub"
+    
+    /// `<sup>` element
     let sup = create "sup"
+    
+    /// `<time>` element
     let time = create "time"
+    
+    /// `<u>` element
     let u = create "u"
+    
+    /// `<var>` element
     let var = create "var"
+    
+    /// `<wbr>` element
     let wbr = createSelfClosing "wbr"
 
+    //
     // Image and multimedia
+    
+    /// `<area>` element
     let area = create "area"
+    
+    /// `<audio>` element
     let audio = create "audio"
+    
+    /// `<img>` element
     let img = createSelfClosing "img"
+    
+    /// `<map>` element
     let map = create "map"
+    
+    /// `<track>` element
     let track = createSelfClosing "track"
+    
+    /// `<video>` element
     let video = create "video"
 
+    //
     // Embedded content
+    
+    /// `<embed>` element
     let embed = createSelfClosing "embed"
+    
+    /// `<iframe>` element
     let iframe = create "iframe"
+    
+    /// `<object>` element
     let object = create "object"
+    
+    /// `<picture>` element
     let picture = create "picture"
+    
+    /// `<portal>` element
     let portal = create "portal"
+    
+    /// `<source>` element
     let source = createSelfClosing "source"
 
 
+    //
     // Scripting
+    
+    /// `<canvas>` element
     let canvas = create "canvas"
+    
+    /// `<noscript>` element
     let noscript = create "noscript"
+    
+    /// `<script>` element
     let script = create "script"
 
+    //
     // Demarcating edits
+    
+    /// `<del>` element
     let del = create "del"
+    
+    /// `<ins>` element
     let ins = create "ins"
 
+    //
     // Table content
+    
+    /// `<caption>` element
     let caption = create "caption"
+    
+    /// `<col>` element
     let col = createSelfClosing "col"
+    
+    /// `<colgroup>` element
     let colgroup = create "colgroup"
+    
+    /// `<table>` element
     let table = create "table"
+    
+    /// `<tbody>` element
     let tbody = create "tbody"
+    
+    /// `<td>` element
     let td = create "td"
+    
+    /// `<tfoot>` element
     let tfoot = create "tfoot"
+    
+    /// `<th>` element
     let th = create "th"
+    
+    /// `<thead>` element
     let thead = create "thead"
+    
+    /// `<tr>` element
     let tr = create "tr"
 
+    //
     // Forms
+    
+    /// `<button>` element
     let button = create "button"
+    
+    /// `<datalist>` element
     let datalist = create "datalist"
+    
+    /// `<fieldset>` element
     let fieldset = create "fieldset"
+    
+    /// `<form>` element
     let form = create "form"
+    
+    /// `<input>` element
     let input = createSelfClosing "input"
+    
+    /// `<label>` element
     let label = create "label"
+    
+    /// `<legend>` element
     let legend = create "legend"
+    
+    /// `<meter>` element
     let meter = create "meter"
+    
+    /// `<optgroup>` element
     let optgroup = create "optgroup"
+    
+    /// `<option>` element
     let option = create "option"
+    
+    /// `<output>` element
     let output = create "output"
+    
+    /// `<progress>` element
     let progress = create "progress"
+    
+    /// `<select>` element
     let select = create "select"
+    
+    /// `<textarea>` element
     let textarea = create "textarea"
+    
+    let private control' 
+        (node : XmlAttribute list -> XmlNode) 
+        (name : string) 
+        (attr : XmlAttribute list) 
+        (labelElement : XmlNode list) = 
+        label [ Attr.for' name ] [ 
+            yield! labelElement 
+            node <| Attr.merge [ Attr.id name; Attr.name name ] attr ]
 
+    /// Labelled control element (i.e., `<label for="name">Name<input id="name" name="name" /></label>`).
+    let control = control' input
+
+    /// Labelled select element (i.e., `<label for="item">Item<select>...</select></label>`)
+    let controlSelect name attr labelElement options = control' (fun attr -> select attr options) name attr labelElement
+
+    /// Labelled textarea element (i.e., `<label for="item">Item<textarea>...</textarea></label>`)
+    let controlTextarea name attr labelElement content = control' (fun attr -> textarea attr content) name attr labelElement
+
+// Elem.selectControl "season" [] 
+
+    //
     // Interactive elements
+    
+    /// `<details>` element
     let details = create "details"
+    
+    /// `<dialog>` element
     let dialog = create "dialog"
+    
+    /// `<summary>` element
     let summary = create "summary"
 
+    //
     // Web Components
+    
+    /// `<slot>` element
     let slot = create "slot"
+    
+    /// `<template>` element
     let template = create "template"
 
+    //
     // SVG and MathML
+    
+    /// `<math>` element
     let math = create "math"
+    
+    /// `<svg>` element
     let svg = create "svg"
\ No newline at end of file
diff --git a/src/Falco.Markup/Falco.Markup.fsproj b/src/Falco.Markup/Falco.Markup.fsproj
index 105497b..1a49d42 100644
--- a/src/Falco.Markup/Falco.Markup.fsproj
+++ b/src/Falco.Markup/Falco.Markup.fsproj
@@ -43,9 +43,9 @@
 
   <ItemGroup>
     <Compile Include="XmlNode.fs" />
-    <Compile Include="Text.fs" />
-    <Compile Include="Elem.fs" />
     <Compile Include="Attr.fs" />
+    <Compile Include="Elem.fs" />
+    <Compile Include="Text.fs" />
     <Compile Include="Svg.fs" />
     <Compile Include="Templates.fs" />
     <Compile Include="TestHelpers.fs" />
diff --git a/test/Falco.Markup.Tests/CoreTests.fs b/test/Falco.Markup.Tests/CoreTests.fs
new file mode 100644
index 0000000..35cc16c
--- /dev/null
+++ b/test/Falco.Markup.Tests/CoreTests.fs
@@ -0,0 +1,160 @@
+module Falco.Tests.CoreTests
+
+open System
+open Falco.Markup
+open Falco.Markup.Svg
+open FsUnit.Xunit
+open Xunit
+
+[<Fact>]
+let ``Text.empty should be empty`` () =
+    renderNode Text.empty |> should equal String.Empty
+
+[<Fact>]
+let ``Text.raw should not be encoded`` () =
+    let rawText = Text.raw "<div>"
+    renderNode rawText |> should equal "<div>"
+
+[<Fact>]
+let ``Text.raw should not be encoded, but template applied`` () =
+    let rawText = Text.rawf "<div>%s</div>" "falco"
+    renderNode rawText |> should equal "<div>falco</div>"
+
+[<Fact>]
+let ``Text.enc should be encoded`` () =
+    let encodedText = Text.enc "<div>"
+    renderNode encodedText |> should equal "&lt;div&gt;"
+
+[<Fact>]
+let ``Text.comment should equal HTML comment`` () =
+    let rawText = Text.comment "test comment"
+    renderNode rawText |> should equal "<!-- test comment -->"
+
+[<Fact>]
+let ``Self-closing tag should render with trailing slash`` () =
+    let t = Elem.createSelfClosing "hr" []
+    renderNode t |> should equal "<hr />"
+
+[<Fact>]
+let ``Self-closing tag with attrs should render with trailing slash`` () =
+    let t = Elem.createSelfClosing "hr" [ Attr.class' "my-class" ]
+    renderNode t |> should equal "<hr class=\"my-class\" />"
+
+[<Fact>]
+let ``Standard tag should render with multiple attributes`` () =
+    let t = Elem.create "div" [ Attr.create "class" "my-class"; Attr.autofocus; Attr.create "data-bind" "slider" ] []
+    renderNode t |> should equal "<div class=\"my-class\" autofocus data-bind=\"slider\"></div>"
+
+[<Fact>]
+let ``Script should contain src, lang and async`` () =
+    let t = Elem.script [ Attr.src "http://example.org/example.js";  Attr.lang "javascript"; Attr.async ] []
+    renderNode t |> should equal "<script src=\"http://example.org/example.js\" lang=\"javascript\" async></script>"
+
+[<Fact>]
+let ``Should produce valid html doc`` () =
+    let doc =
+        Elem.html [] [
+            Elem.body [] [
+                Elem.div [ Attr.class' "my-class" ] [
+                    Elem.h1 [] [ Text.raw "hello" ] ] ] ]
+    renderHtml doc |> should equal "<!DOCTYPE html><html><body><div class=\"my-class\"><h1>hello</h1></div></body></html>"
+
+[<Fact>]
+let ``Elem.control should render label with nested input`` () =
+    let name = "email_address"
+    let label = "Email Address"
+    let expected = Elem.label [ Attr.for' name ] [ 
+        Elem.span [ Attr.class' "form-label" ] [ Text.raw label ]
+        Elem.input [ Attr.id name; Attr.name name; Attr.typeEmail; Attr.required ] ]
+    
+    Elem.control name [ Attr.typeEmail; Attr.required  ] [ 
+        Elem.span [ Attr.class' "form-label" ] [ Text.raw label ] ]
+    |> should equal expected
+
+[<Fact>]
+let ``Should create valid html button`` () =
+    let doc = Elem.button [ Attr.onclick "console.log(\"test\")"] [ Text.raw "click me" ]
+    renderNode doc |> should equal "<button onclick=\"console.log(\"test\")\">click me</button>";
+
+[<Fact>]
+let ``Should produce valid xml doc`` () =
+    let doc =
+        Elem.create "books" [] [
+            Elem.create "book" [] [
+                Elem.create "name" [] [ Text.raw "To Kill A Mockingbird" ]
+            ]
+        ]
+
+    renderXml doc |> should equal "<?xml version=\"1.0\" encoding=\"UTF-8\"?><books><book><name>To Kill A Mockingbird</name></book></books>"
+
+[<Fact>]
+let ``Should produce valid svg`` () =
+    // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text#example
+    let doc =
+        Templates.svg (0, 0, 240, 80) [
+            Elem.style [] [
+                Text.raw ".small { font: italic 13px sans-serif; }"
+                Text.raw ".heavy { font: bold 30px sans-serif; }"
+                Text.raw ".Rrrrr { font: italic 40px serif; fill: red; }"
+            ]
+            Elem.text [ Attr.x "20"; Attr.y "35"; Attr.class' "small" ] [ Text.raw "My" ]
+            Elem.text [ Attr.x "40"; Attr.y "35"; Attr.class' "heavy" ] [ Text.raw "cat" ]
+            Elem.text [ Attr.x "55"; Attr.y "55"; Attr.class' "small" ] [ Text.raw "is" ]
+            Elem.text [ Attr.x "65"; Attr.y "55"; Attr.class' "Rrrrr" ] [ Text.raw "Grumpy!" ]
+        ]
+
+    renderNode doc |> should equal "<svg viewBox=\"0 0 240 80\" xmlns=\"http://www.w3.org/2000/svg\"><style>.small { font: italic 13px sans-serif; }.heavy { font: bold 30px sans-serif; }.Rrrrr { font: italic 40px serif; fill: red; }</style><text x=\"20\" y=\"35\" class=\"small\">My</text><text x=\"40\" y=\"35\" class=\"heavy\">cat</text><text x=\"55\" y=\"55\" class=\"small\">is</text><text x=\"65\" y=\"55\" class=\"Rrrrr\">Grumpy!</text></svg>"
+
+type Product =
+    { Name : string
+      Price : float
+      Description : string }
+
+[<Fact>]
+let ``Should produce valid html doc for large result`` () =
+    let lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum";
+
+    let products =
+        [ 1..25000 ]
+        |> List.map (fun i -> { Name = sprintf "Name %i" i; Price = i |> float; Description = lorem})
+
+    let elem product =
+        Elem.li [] [
+            Elem.h2 [] [ Text.raw product.Name ]
+            Text.rawf "Only %f" product.Price
+            Text.raw product.Description ]
+
+    let productElems =
+        products
+        |> List.map elem
+        |> Elem.ul [ Attr.id "products" ]
+
+    let doc =
+        Elem.html [] [
+            Elem.body [] [
+                Elem.div [ Attr.class' "my-class" ] [ productElems ] ] ]
+
+    let render = renderHtml doc
+    render |> fun s -> s.Substring(0, 27) |> should equal "<!DOCTYPE html><html><body>"
+    render |> fun s -> s.Substring(s.Length - 14, 14) |> should equal "</body></html>"
+
+[<Fact>]
+let ``Attr.merge should combine two XmlAttribute lists`` () =
+    Attr.merge
+        [ Attr.class' "ma2"; Attr.id "el" ]
+        [ Attr.id "some-el"; Attr.class' "bg-red"; Attr.readonly ]
+    |> should equal [ Attr.class' "ma2 bg-red"; Attr.id "some-el"; Attr.readonly ]
+
+[<Fact>]
+let ``Attr.merge should work with bogus "class" NonValueAttr`` () =
+    Attr.merge
+        [ Attr.class' "ma2" ]
+        [ Attr.id "some-el"; Attr.class' "bg-red"; NonValueAttr("class") ]
+    |> should equal [ Attr.class' "ma2 bg-red"; Attr.id "some-el" ]
+
+[<Fact>]
+let ``Attr.merge should combine two XmlAttribute lists factoring additive attributes`` () =
+    Attr.merge
+        [ Attr.name "test"; Attr.class' "ma2"; Attr.style "background: red"; Attr.accept "image/jpeg" ]
+        [ Attr.name "expected"; Attr.class' "pa2"; Attr.style "color: white"; Attr.accept "image/png" ]
+    |> should equal [ Attr.name "expected"; Attr.class' "ma2 pa2"; Attr.style "background: red; color: white"; Attr.accept "image/jpeg, image/png" ]
\ No newline at end of file
diff --git a/test/Falco.Markup.Tests/Falco.Markup.Tests.fsproj b/test/Falco.Markup.Tests/Falco.Markup.Tests.fsproj
index c5977b7..c4ca4ff 100644
--- a/test/Falco.Markup.Tests/Falco.Markup.Tests.fsproj
+++ b/test/Falco.Markup.Tests/Falco.Markup.Tests.fsproj
@@ -7,7 +7,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <Compile Include="Tests.fs" />
+    <Compile Include="CoreTests.fs" />
+    <Compile Include="TestHelperTests.fs" />
     <Compile Include="Program.fs" />
   </ItemGroup>
 
diff --git a/test/Falco.Markup.Tests/Tests.fs b/test/Falco.Markup.Tests/TestHelperTests.fs
similarity index 54%
rename from test/Falco.Markup.Tests/Tests.fs
rename to test/Falco.Markup.Tests/TestHelperTests.fs
index 6ca8591..cc79dc1 100644
--- a/test/Falco.Markup.Tests/Tests.fs
+++ b/test/Falco.Markup.Tests/TestHelperTests.fs
@@ -1,4 +1,4 @@
-module Falco.Tests.Markup
+module Falco.Tests.TestHelpersTests
 
 open System
 open Falco.Markup
@@ -6,140 +6,6 @@ open Falco.Markup.Svg
 open FsUnit.Xunit
 open Xunit
 
-[<Fact>]
-let ``Text.empty should be empty`` () =
-    renderNode Text.empty |> should equal String.Empty
-
-[<Fact>]
-let ``Text.raw should not be encoded`` () =
-    let rawText = Text.raw "<div>"
-    renderNode rawText |> should equal "<div>"
-
-[<Fact>]
-let ``Text.raw should not be encoded, but template applied`` () =
-    let rawText = Text.rawf "<div>%s</div>" "falco"
-    renderNode rawText |> should equal "<div>falco</div>"
-
-[<Fact>]
-let ``Text.enc should be encoded`` () =
-    let encodedText = Text.enc "<div>"
-    renderNode encodedText |> should equal "&lt;div&gt;"
-
-[<Fact>]
-let ``Text.comment should equal HTML comment`` () =
-    let rawText = Text.comment "test comment"
-    renderNode rawText |> should equal "<!-- test comment -->"
-
-[<Fact>]
-let ``Self-closing tag should render with trailing slash`` () =
-    let t = Elem.createSelfClosing "hr" []
-    renderNode t |> should equal "<hr />"
-
-[<Fact>]
-let ``Self-closing tag with attrs should render with trailing slash`` () =
-    let t = Elem.createSelfClosing "hr" [ Attr.class' "my-class" ]
-    renderNode t |> should equal "<hr class=\"my-class\" />"
-
-[<Fact>]
-let ``Standard tag should render with multiple attributes`` () =
-    let t = Elem.create "div" [ Attr.create "class" "my-class"; Attr.autofocus; Attr.create "data-bind" "slider" ] []
-    renderNode t |> should equal "<div class=\"my-class\" autofocus data-bind=\"slider\"></div>"
-
-[<Fact>]
-let ``Script should contain src, lang and async`` () =
-    let t = Elem.script [ Attr.src "http://example.org/example.js";  Attr.lang "javascript"; Attr.async ] []
-    renderNode t |> should equal "<script src=\"http://example.org/example.js\" lang=\"javascript\" async></script>"
-
-[<Fact>]
-let ``Should produce valid html doc`` () =
-    let doc =
-        Elem.html [] [
-            Elem.body [] [
-                Elem.div [ Attr.class' "my-class" ] [
-                    Elem.h1 [] [ Text.raw "hello" ] ] ] ]
-    renderHtml doc |> should equal "<!DOCTYPE html><html><body><div class=\"my-class\"><h1>hello</h1></div></body></html>"
-
-[<Fact>]
-let ``Should create valid html button`` () =
-    let doc = Elem.button [ Attr.onclick "console.log(\"test\")"] [ Text.raw "click me" ]
-    renderNode doc |> should equal "<button onclick=\"console.log(\"test\")\">click me</button>";
-
-[<Fact>]
-let ``Should produce valid xml doc`` () =
-    let doc =
-        Elem.create "books" [] [
-            Elem.create "book" [] [
-                Elem.create "name" [] [ Text.raw "To Kill A Mockingbird" ]
-            ]
-        ]
-
-    renderXml doc |> should equal "<?xml version=\"1.0\" encoding=\"UTF-8\"?><books><book><name>To Kill A Mockingbird</name></book></books>"
-
-[<Fact>]
-let ``Should produce valid svg`` () =
-    // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text#example
-    let doc =
-        Templates.svg (0, 0, 240, 80) [
-            Elem.style [] [
-                Text.raw ".small { font: italic 13px sans-serif; }"
-                Text.raw ".heavy { font: bold 30px sans-serif; }"
-                Text.raw ".Rrrrr { font: italic 40px serif; fill: red; }"
-            ]
-            Elem.text [ Attr.x "20"; Attr.y "35"; Attr.class' "small" ] [ Text.raw "My" ]
-            Elem.text [ Attr.x "40"; Attr.y "35"; Attr.class' "heavy" ] [ Text.raw "cat" ]
-            Elem.text [ Attr.x "55"; Attr.y "55"; Attr.class' "small" ] [ Text.raw "is" ]
-            Elem.text [ Attr.x "65"; Attr.y "55"; Attr.class' "Rrrrr" ] [ Text.raw "Grumpy!" ]
-        ]
-
-    renderNode doc |> should equal "<svg viewBox=\"0 0 240 80\" xmlns=\"http://www.w3.org/2000/svg\"><style>.small { font: italic 13px sans-serif; }.heavy { font: bold 30px sans-serif; }.Rrrrr { font: italic 40px serif; fill: red; }</style><text x=\"20\" y=\"35\" class=\"small\">My</text><text x=\"40\" y=\"35\" class=\"heavy\">cat</text><text x=\"55\" y=\"55\" class=\"small\">is</text><text x=\"65\" y=\"55\" class=\"Rrrrr\">Grumpy!</text></svg>"
-
-type Product =
-    { Name : string
-      Price : float
-      Description : string }
-
-[<Fact>]
-let ``Should produce valid html doc for large result`` () =
-    let lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum";
-
-    let products =
-        [ 1..25000 ]
-        |> List.map (fun i -> { Name = sprintf "Name %i" i; Price = i |> float; Description = lorem})
-
-    let elem product =
-        Elem.li [] [
-            Elem.h2 [] [ Text.raw product.Name ]
-            Text.rawf "Only %f" product.Price
-            Text.raw product.Description ]
-
-    let productElems =
-        products
-        |> List.map elem
-        |> Elem.ul [ Attr.id "products" ]
-
-    let doc =
-        Elem.html [] [
-            Elem.body [] [
-                Elem.div [ Attr.class' "my-class" ] [ productElems ] ] ]
-
-    let render = renderHtml doc
-    render |> fun s -> s.Substring(0, 27) |> should equal "<!DOCTYPE html><html><body>"
-    render |> fun s -> s.Substring(s.Length - 14, 14) |> should equal "</body></html>"
-
-[<Fact>]
-let ``Attr.merge should combine two XmlAttribute lists`` () =
-    Attr.merge
-        [ Attr.class' "ma2" ]
-        [ Attr.id "some-el"; Attr.class' "bg-red"; Attr.readonly ]
-    |> should equal [ Attr.class' "ma2 bg-red"; Attr.id "some-el"; Attr.readonly ]
-
-[<Fact>]
-let ``Attr.merge should work with bogus "class" NonValeAttr`` () =
-    Attr.merge
-        [ Attr.class' "ma2" ]
-        [ Attr.id "some-el"; Attr.class' "bg-red"; NonValueAttr("class") ]
-    |> should equal [ Attr.class' "ma2 bg-red"; Attr.id "some-el" ]
-
 module TestHelpersTests =
     open Falco.Markup.TestHelpers
 
@@ -184,7 +50,7 @@ module TestHelpersTests =
     let ``Multiple form inputs should return name/value pairs`` () =
         let xml = Elem.form [] [
             Elem.input [ Attr.name "name"; Attr.value "falco" ]
-            Elem.input [ Attr.name "age"; Attr.value "3"; Attr.type' "number" ] ]
+            Elem.input [ Attr.name "age"; Attr.value "3"; Attr.typeNumber ] ]
 
         let nameValues = renderNameValues xml
 
@@ -205,7 +71,7 @@ module TestHelpersTests =
             Elem.input [ Attr.name "name"; Attr.value "falco" ]
             Elem.input [ Attr.value "bad" ]
             Elem.textarea [] [ Text.raw "bad" ]
-            Elem.input [ Attr.name "age"; Attr.value "3"; Attr.type' "number" ] ]
+            Elem.input [ Attr.name "age"; Attr.value "3"; Attr.typeNumber ] ]
 
         let nameValues = renderNameValues xml
 
@@ -317,20 +183,21 @@ module TestHelpersTests =
     [<Fact>]
     let ``Kitchen sink`` () =
         let xml = Elem.form [] [
+            Elem.h1 [] [ Text.raw "HJERE" ]
             Elem.input [ Attr.name "first_name"; Attr.value "first_name_value" ]
 
             Elem.textarea [ Attr.name "long_text" ] [ Text.raw "long_text_value" ]
 
             Elem.div [] [
-                Elem.input [ Attr.type' "radio"; Attr.name "radio"; Attr.value "value1"; Attr.checked' ]
-                Elem.input [ Attr.type' "radio"; Attr.name "radio"; Attr.value "value2" ]
-                Elem.input [ Attr.type' "radio"; Attr.name "radio"; Attr.value "value3" ]
+                Elem.input [ Attr.typeRadio; Attr.name "radio"; Attr.value "value1"; Attr.checked' ]
+                Elem.input [ Attr.typeRadio; Attr.name "radio"; Attr.value "value2" ]
+                Elem.input [ Attr.typeRadio; Attr.name "radio"; Attr.value "value3" ]
             ]
 
             Elem.div [] [
-                Elem.input [ Attr.type' "checkbox"; Attr.name "checkbox"; Attr.value "value1"; Attr.checked' ]
-                Elem.input [ Attr.type' "checkbox"; Attr.name "checkbox"; Attr.value "value2"; Attr.checked' ]
-                Elem.input [ Attr.type' "checkbox"; Attr.name "checkbox"; Attr.value "value3" ]
+                Elem.input [ Attr.typeCheckbox; Attr.name "checkbox"; Attr.value "value1"; Attr.checked' ]
+                Elem.input [ Attr.typeCheckbox; Attr.name "checkbox"; Attr.value "value2"; Attr.checked' ]
+                Elem.input [ Attr.typeCheckbox; Attr.name "checkbox"; Attr.value "value3" ]
             ]
 
             Elem.select [ Attr.name "select" ] [
@@ -345,10 +212,10 @@ module TestHelpersTests =
                 Elem.option [ Attr.value "option3"; Attr.selected ] [ Text.raw "Option 3" ]
             ]
 
-            Elem.input [ Attr.type' "submit" ]
+            Elem.input [ Attr.typeSubmit ]
         ]
 
         let nameValues = renderNameValues xml
 
         nameValues
-        |> should equal "first_name=first_name_value&long_text=long_text_value&radio=value1&checkbox=value1&checkbox=value2&select=option2&multiselect=option2&multiselect=option3"
+        |> should equal "first_name=first_name_value&long_text=long_text_value&radio=value1&checkbox=value1&checkbox=value2&select=option2&multiselect=option2&multiselect=option3"
\ No newline at end of file