diff --git a/docs/fields/index.html b/docs/fields/index.html
index 3b4615e..f144f3a 100644
--- a/docs/fields/index.html
+++ b/docs/fields/index.html
@@ -12,7 +12,7 @@
 <link fetchpriority="low" href="/go-form/site.webmanifest" rel="manifest" />
 <title>Fields – deblan/go-form</title>
   <meta name="description" content="A field represents a field in a form.
-Checkbox DocExample func NewFieldCheckbox(name string) *Field import ( &#34;fmt&#34; &#34;html/template&#34; &#34;strings&#34; &#34;gitnet.fr/deblan/go-form/form&#34; &#34;gitnet.fr/deblan/go-form/theme&#34; ) func main() { field := form.NewFieldCheckbox(&#34;Foo&#34;) r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(&#34;example&#34;).Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{&#34;Form&#34;: f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=checkbox]" /><link rel="canonical" href="https://deblan.gitnet.page/go-form/docs/fields/" itemprop="url" />
+Checkbox DocExample func NewFieldCheckbox(name string) *Field package main import ( &#34;fmt&#34; &#34;html/template&#34; &#34;strings&#34; &#34;gitnet.fr/deblan/go-form/form&#34; &#34;gitnet.fr/deblan/go-form/theme&#34; ) func main() { field := form.NewFieldCheckbox(&#34;Foo&#34;) r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(&#34;example&#34;).Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{&#34;Form&#34;: f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=checkbox]" /><link rel="canonical" href="https://deblan.gitnet.page/go-form/docs/fields/" itemprop="url" />
 
 <meta property="og:title" content="Fields" />
 <meta property="og:description" content="Creating and processing HTML forms in golang" />
@@ -21,12 +21,12 @@ Checkbox DocExample func NewFieldCheckbox(name string) *Field import ( &#34;fmt&
 
   <meta itemprop="name" content="Fields">
   <meta itemprop="description" content="A field represents a field in a form.
-Checkbox DocExample func NewFieldCheckbox(name string) *Field import ( &#34;fmt&#34; &#34;html/template&#34; &#34;strings&#34; &#34;gitnet.fr/deblan/go-form/form&#34; &#34;gitnet.fr/deblan/go-form/theme&#34; ) func main() { field := form.NewFieldCheckbox(&#34;Foo&#34;) r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(&#34;example&#34;).Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{&#34;Form&#34;: f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=checkbox]">
-  <meta itemprop="wordCount" content="1162">
+Checkbox DocExample func NewFieldCheckbox(name string) *Field package main import ( &#34;fmt&#34; &#34;html/template&#34; &#34;strings&#34; &#34;gitnet.fr/deblan/go-form/form&#34; &#34;gitnet.fr/deblan/go-form/theme&#34; ) func main() { field := form.NewFieldCheckbox(&#34;Foo&#34;) r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(&#34;example&#34;).Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{&#34;Form&#34;: f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=checkbox]">
+  <meta itemprop="wordCount" content="1180">
   <meta name="twitter:card" content="summary">
   <meta name="twitter:title" content="Fields">
   <meta name="twitter:description" content="A field represents a field in a form.
-Checkbox DocExample func NewFieldCheckbox(name string) *Field import ( &#34;fmt&#34; &#34;html/template&#34; &#34;strings&#34; &#34;gitnet.fr/deblan/go-form/form&#34; &#34;gitnet.fr/deblan/go-form/theme&#34; ) func main() { field := form.NewFieldCheckbox(&#34;Foo&#34;) r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(&#34;example&#34;).Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{&#34;Form&#34;: f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=checkbox]">
+Checkbox DocExample func NewFieldCheckbox(name string) *Field package main import ( &#34;fmt&#34; &#34;html/template&#34; &#34;strings&#34; &#34;gitnet.fr/deblan/go-form/form&#34; &#34;gitnet.fr/deblan/go-form/theme&#34; ) func main() { field := form.NewFieldCheckbox(&#34;Foo&#34;) r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(&#34;example&#34;).Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{&#34;Form&#34;: f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=checkbox]">
 
     <link rel="preload" href="/go-form/css/compiled/main.min.e0bb0f28123bf084d555fc9253c6d2aa1443b2dfcde6044741a207eabdc3ddb8.css" as="style" integrity="sha256-4LsPKBI78ITVVfySU8bSqhRDst/N5gRHQaIH6r3D3bg=" />
     <link href="/go-form/css/compiled/main.min.e0bb0f28123bf084d555fc9253c6d2aa1443b2dfcde6044741a207eabdc3ddb8.css" rel="stylesheet" integrity="sha256-4LsPKBI78ITVVfySU8bSqhRDst/N5gRHQaIH6r3D3bg=" />
@@ -499,6 +499,8 @@ Checkbox DocExample func NewFieldCheckbox(name string) *Field import ( &#34;fmt&
   class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
   id="tabs-panel-1"
   role="tabpanel"> <pre class="hidden">
+package main
+
 import (
     "fmt"
     "html/template"
@@ -522,13 +524,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="bd6f02363c5c1dff17695020985dcddc" class="hugo-goplay-result"></div>
+<div id="2965082011fbdbf3ff15219e0f9e9cd4" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_bd6f02363c5c1dff17695020985dcddc()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_bd6f02363c5c1dff17695020985dcddc()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_2965082011fbdbf3ff15219e0f9e9cd4()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_2965082011fbdbf3ff15219e0f9e9cd4()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_bd6f02363c5c1dff17695020985dcddc()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_2965082011fbdbf3ff15219e0f9e9cd4()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -578,10 +580,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldCheckbox(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldCheckbox(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
 
-  window["goplayRenderCompile_" + "bd6f02363c5c1dff17695020985dcddc"] = () => {
-    const parent = document.getElementById("bd6f02363c5c1dff17695020985dcddc")
+  window["goplayRenderCompile_" + "2965082011fbdbf3ff15219e0f9e9cd4"] = () => {
+    const parent = document.getElementById("2965082011fbdbf3ff15219e0f9e9cd4")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -590,7 +592,7 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "bd6f02363c5c1dff17695020985dcddc"] = async() => {
+  window["goplayOpenShare_" + "2965082011fbdbf3ff15219e0f9e9cd4"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
@@ -632,6 +634,8 @@ func r(f *form.Form) {
   class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
   id="tabs-panel-1"
   role="tabpanel"> <pre class="hidden">
+package main
+
 import (
     "fmt"
     "html/template"
@@ -655,13 +659,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="22a8c530e39e0558bcdf99a3c64f6b4a" class="hugo-goplay-result"></div>
+<div id="b85410540dd7961403fa8ec6ef4d23e4" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_22a8c530e39e0558bcdf99a3c64f6b4a()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_22a8c530e39e0558bcdf99a3c64f6b4a()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_b85410540dd7961403fa8ec6ef4d23e4()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_b85410540dd7961403fa8ec6ef4d23e4()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_22a8c530e39e0558bcdf99a3c64f6b4a()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_b85410540dd7961403fa8ec6ef4d23e4()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -711,10 +715,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldChoice(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldChoice(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
 
-  window["goplayRenderCompile_" + "22a8c530e39e0558bcdf99a3c64f6b4a"] = () => {
-    const parent = document.getElementById("22a8c530e39e0558bcdf99a3c64f6b4a")
+  window["goplayRenderCompile_" + "b85410540dd7961403fa8ec6ef4d23e4"] = () => {
+    const parent = document.getElementById("b85410540dd7961403fa8ec6ef4d23e4")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -723,7 +727,7 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "22a8c530e39e0558bcdf99a3c64f6b4a"] = async() => {
+  window["goplayOpenShare_" + "b85410540dd7961403fa8ec6ef4d23e4"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
@@ -732,22 +736,7 @@ func r(f *form.Form) {
 </div>
 <p>Generates inputs (checkbox or radio) or selects</p>
 <h3>Csrf<span class="hx-absolute -hx-mt-20" id="csrf"></span>
-    <a href="#csrf" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#csrf" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldCsrf</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -759,12 +748,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -788,13 +774,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="d0aa99e2653a42864b4f398ff2d759fe" class="hugo-goplay-result"></div>
+<div id="51af63dbe81fec3670285097edb21646" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_d0aa99e2653a42864b4f398ff2d759fe()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_d0aa99e2653a42864b4f398ff2d759fe()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_51af63dbe81fec3670285097edb21646()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_51af63dbe81fec3670285097edb21646()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_d0aa99e2653a42864b4f398ff2d759fe()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_51af63dbe81fec3670285097edb21646()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -844,10 +830,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldCsrf(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldCsrf(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "d0aa99e2653a42864b4f398ff2d759fe"] = () => {
-    const parent = document.getElementById("d0aa99e2653a42864b4f398ff2d759fe")
+  window["goplayRenderCompile_" + "51af63dbe81fec3670285097edb21646"] = () => {
+    const parent = document.getElementById("51af63dbe81fec3670285097edb21646")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -856,30 +842,13 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "d0aa99e2653a42864b4f398ff2d759fe"] = async() => {
+  window["goplayOpenShare_" + "51af63dbe81fec3670285097edb21646"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <h3>Date<span class="hx-absolute -hx-mt-20" id="date"></span>
-    <a href="#date" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#date" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldDate</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -891,12 +860,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -920,13 +886,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="ce4dd164e1033f4bbfebfef0fd365161" class="hugo-goplay-result"></div>
+<div id="52904ca772f748701d2902324d0ba36b" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_ce4dd164e1033f4bbfebfef0fd365161()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_ce4dd164e1033f4bbfebfef0fd365161()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_52904ca772f748701d2902324d0ba36b()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_52904ca772f748701d2902324d0ba36b()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_ce4dd164e1033f4bbfebfef0fd365161()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_52904ca772f748701d2902324d0ba36b()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -976,10 +942,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldDate(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldDate(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "ce4dd164e1033f4bbfebfef0fd365161"] = () => {
-    const parent = document.getElementById("ce4dd164e1033f4bbfebfef0fd365161")
+  window["goplayRenderCompile_" + "52904ca772f748701d2902324d0ba36b"] = () => {
+    const parent = document.getElementById("52904ca772f748701d2902324d0ba36b")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -988,31 +954,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "ce4dd164e1033f4bbfebfef0fd365161"] = async() => {
+  window["goplayOpenShare_" + "52904ca772f748701d2902324d0ba36b"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=date] with default transformers</p>
 <h3>Datetime<span class="hx-absolute -hx-mt-20" id="datetime"></span>
-    <a href="#datetime" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#datetime" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldDatetime</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -1024,12 +973,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -1053,13 +999,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="a7e5624439a685da533d1c07edd14327" class="hugo-goplay-result"></div>
+<div id="dd62bd51d039b52d806b01839d5a550a" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_a7e5624439a685da533d1c07edd14327()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_a7e5624439a685da533d1c07edd14327()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_dd62bd51d039b52d806b01839d5a550a()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_dd62bd51d039b52d806b01839d5a550a()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_a7e5624439a685da533d1c07edd14327()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_dd62bd51d039b52d806b01839d5a550a()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -1109,10 +1055,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldDatetime(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldDatetime(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "a7e5624439a685da533d1c07edd14327"] = () => {
-    const parent = document.getElementById("a7e5624439a685da533d1c07edd14327")
+  window["goplayRenderCompile_" + "dd62bd51d039b52d806b01839d5a550a"] = () => {
+    const parent = document.getElementById("dd62bd51d039b52d806b01839d5a550a")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -1121,31 +1067,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "a7e5624439a685da533d1c07edd14327"] = async() => {
+  window["goplayOpenShare_" + "dd62bd51d039b52d806b01839d5a550a"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=datetime] with default transformers</p>
 <h3>DatetimeLocal<span class="hx-absolute -hx-mt-20" id="datetimelocal"></span>
-    <a href="#datetimelocal" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#datetimelocal" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldDatetimeLocal</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -1157,12 +1086,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -1186,13 +1112,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="5e2ba64e4ef71fd15517e5776af99a60" class="hugo-goplay-result"></div>
+<div id="e61a0077f602cb8b7113472d36f1fe1c" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_5e2ba64e4ef71fd15517e5776af99a60()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_5e2ba64e4ef71fd15517e5776af99a60()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_e61a0077f602cb8b7113472d36f1fe1c()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_e61a0077f602cb8b7113472d36f1fe1c()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_5e2ba64e4ef71fd15517e5776af99a60()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_e61a0077f602cb8b7113472d36f1fe1c()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -1242,10 +1168,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldDatetimeLocal(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldDatetimeLocal(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "5e2ba64e4ef71fd15517e5776af99a60"] = () => {
-    const parent = document.getElementById("5e2ba64e4ef71fd15517e5776af99a60")
+  window["goplayRenderCompile_" + "e61a0077f602cb8b7113472d36f1fe1c"] = () => {
+    const parent = document.getElementById("e61a0077f602cb8b7113472d36f1fe1c")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -1254,31 +1180,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "5e2ba64e4ef71fd15517e5776af99a60"] = async() => {
+  window["goplayOpenShare_" + "e61a0077f602cb8b7113472d36f1fe1c"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=datetime-local] with default transformers</p>
 <h3>Hidden<span class="hx-absolute -hx-mt-20" id="hidden"></span>
-    <a href="#hidden" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#hidden" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldHidden</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -1290,12 +1199,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -1319,13 +1225,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="425f99aa520dc1401a9b88face0e9016" class="hugo-goplay-result"></div>
+<div id="9d5930ecdcf01e21b8b0d1f121f067cf" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_425f99aa520dc1401a9b88face0e9016()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_425f99aa520dc1401a9b88face0e9016()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_9d5930ecdcf01e21b8b0d1f121f067cf()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_9d5930ecdcf01e21b8b0d1f121f067cf()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_425f99aa520dc1401a9b88face0e9016()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_9d5930ecdcf01e21b8b0d1f121f067cf()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -1375,10 +1281,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldHidden(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldHidden(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "425f99aa520dc1401a9b88face0e9016"] = () => {
-    const parent = document.getElementById("425f99aa520dc1401a9b88face0e9016")
+  window["goplayRenderCompile_" + "9d5930ecdcf01e21b8b0d1f121f067cf"] = () => {
+    const parent = document.getElementById("9d5930ecdcf01e21b8b0d1f121f067cf")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -1387,31 +1293,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "425f99aa520dc1401a9b88face0e9016"] = async() => {
+  window["goplayOpenShare_" + "9d5930ecdcf01e21b8b0d1f121f067cf"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=hidden]</p>
 <h3>Mail<span class="hx-absolute -hx-mt-20" id="mail"></span>
-    <a href="#mail" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#mail" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldMail</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -1423,12 +1312,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -1452,13 +1338,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="bebf790c444bbd2baa83904f709d9438" class="hugo-goplay-result"></div>
+<div id="56683a3689be05daf0bbbe9846c2d1a0" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_bebf790c444bbd2baa83904f709d9438()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_bebf790c444bbd2baa83904f709d9438()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_56683a3689be05daf0bbbe9846c2d1a0()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_56683a3689be05daf0bbbe9846c2d1a0()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_bebf790c444bbd2baa83904f709d9438()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_56683a3689be05daf0bbbe9846c2d1a0()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -1508,10 +1394,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldMail(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldMail(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "bebf790c444bbd2baa83904f709d9438"] = () => {
-    const parent = document.getElementById("bebf790c444bbd2baa83904f709d9438")
+  window["goplayRenderCompile_" + "56683a3689be05daf0bbbe9846c2d1a0"] = () => {
+    const parent = document.getElementById("56683a3689be05daf0bbbe9846c2d1a0")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -1520,31 +1406,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "bebf790c444bbd2baa83904f709d9438"] = async() => {
+  window["goplayOpenShare_" + "56683a3689be05daf0bbbe9846c2d1a0"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=email]</p>
 <h3>Number<span class="hx-absolute -hx-mt-20" id="number"></span>
-    <a href="#number" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#number" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldNumber</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -1556,12 +1425,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -1585,13 +1451,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="ea7f3f84751e08d742b397323d1de0a2" class="hugo-goplay-result"></div>
+<div id="c5d5196d6a813e7c34645c2071ffb622" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_ea7f3f84751e08d742b397323d1de0a2()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_ea7f3f84751e08d742b397323d1de0a2()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_c5d5196d6a813e7c34645c2071ffb622()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_c5d5196d6a813e7c34645c2071ffb622()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_ea7f3f84751e08d742b397323d1de0a2()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_c5d5196d6a813e7c34645c2071ffb622()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -1641,10 +1507,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldNumber(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldNumber(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "ea7f3f84751e08d742b397323d1de0a2"] = () => {
-    const parent = document.getElementById("ea7f3f84751e08d742b397323d1de0a2")
+  window["goplayRenderCompile_" + "c5d5196d6a813e7c34645c2071ffb622"] = () => {
+    const parent = document.getElementById("c5d5196d6a813e7c34645c2071ffb622")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -1653,31 +1519,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "ea7f3f84751e08d742b397323d1de0a2"] = async() => {
+  window["goplayOpenShare_" + "c5d5196d6a813e7c34645c2071ffb622"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=number] with default transformers</p>
 <h3>Password<span class="hx-absolute -hx-mt-20" id="password"></span>
-    <a href="#password" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#password" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldPassword</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -1689,12 +1538,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -1718,13 +1564,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="2db2cd2b3267f92a8a9e36e2f0e55eed" class="hugo-goplay-result"></div>
+<div id="26924d4a5930f52db19508e69af33ea0" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_2db2cd2b3267f92a8a9e36e2f0e55eed()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_2db2cd2b3267f92a8a9e36e2f0e55eed()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_26924d4a5930f52db19508e69af33ea0()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_26924d4a5930f52db19508e69af33ea0()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_2db2cd2b3267f92a8a9e36e2f0e55eed()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_26924d4a5930f52db19508e69af33ea0()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -1774,10 +1620,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldPassword(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldPassword(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "2db2cd2b3267f92a8a9e36e2f0e55eed"] = () => {
-    const parent = document.getElementById("2db2cd2b3267f92a8a9e36e2f0e55eed")
+  window["goplayRenderCompile_" + "26924d4a5930f52db19508e69af33ea0"] = () => {
+    const parent = document.getElementById("26924d4a5930f52db19508e69af33ea0")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -1786,31 +1632,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "2db2cd2b3267f92a8a9e36e2f0e55eed"] = async() => {
+  window["goplayOpenShare_" + "26924d4a5930f52db19508e69af33ea0"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=password]</p>
 <h3>Range<span class="hx-absolute -hx-mt-20" id="range"></span>
-    <a href="#range" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#range" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldRange</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -1822,12 +1651,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -1851,13 +1677,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="232f52607b80543d98c8f8b57d726422" class="hugo-goplay-result"></div>
+<div id="0e4205d1e0678337add7d5957f83f31f" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_232f52607b80543d98c8f8b57d726422()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_232f52607b80543d98c8f8b57d726422()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_0e4205d1e0678337add7d5957f83f31f()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_0e4205d1e0678337add7d5957f83f31f()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_232f52607b80543d98c8f8b57d726422()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_0e4205d1e0678337add7d5957f83f31f()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -1907,10 +1733,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldRange(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldRange(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "232f52607b80543d98c8f8b57d726422"] = () => {
-    const parent = document.getElementById("232f52607b80543d98c8f8b57d726422")
+  window["goplayRenderCompile_" + "0e4205d1e0678337add7d5957f83f31f"] = () => {
+    const parent = document.getElementById("0e4205d1e0678337add7d5957f83f31f")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -1919,31 +1745,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "232f52607b80543d98c8f8b57d726422"] = async() => {
+  window["goplayOpenShare_" + "0e4205d1e0678337add7d5957f83f31f"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=range]</p>
 <h3>Sub Form<span class="hx-absolute -hx-mt-20" id="sub-form"></span>
-    <a href="#sub-form" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#sub-form" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldSubForm</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -1955,12 +1764,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -1984,13 +1790,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="b704c8fb428842ec408a76bb1ec99ad5" class="hugo-goplay-result"></div>
+<div id="6c15e9b12802aa07e6980b150f8e00b7" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_b704c8fb428842ec408a76bb1ec99ad5()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_b704c8fb428842ec408a76bb1ec99ad5()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_6c15e9b12802aa07e6980b150f8e00b7()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_6c15e9b12802aa07e6980b150f8e00b7()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_b704c8fb428842ec408a76bb1ec99ad5()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_6c15e9b12802aa07e6980b150f8e00b7()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -2040,10 +1846,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldSubForm(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldSubForm(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "b704c8fb428842ec408a76bb1ec99ad5"] = () => {
-    const parent = document.getElementById("b704c8fb428842ec408a76bb1ec99ad5")
+  window["goplayRenderCompile_" + "6c15e9b12802aa07e6980b150f8e00b7"] = () => {
+    const parent = document.getElementById("6c15e9b12802aa07e6980b150f8e00b7")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -2052,13 +1858,11 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "b704c8fb428842ec408a76bb1ec99ad5"] = async() => {
+  window["goplayOpenShare_" + "6c15e9b12802aa07e6980b150f8e00b7"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Alias:</p>
 <div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
@@ -2074,22 +1878,7 @@ func r(f *form.Form) {
 </div>
 <p>Generates a sub form</p>
 <h3>Text<span class="hx-absolute -hx-mt-20" id="text"></span>
-    <a href="#text" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#text" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldText</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -2101,12 +1890,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -2130,13 +1916,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="ede6f821ac66b11f433414735db68d28" class="hugo-goplay-result"></div>
+<div id="766c4c8384168db40f64f4c4dfb3ea1c" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_ede6f821ac66b11f433414735db68d28()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_ede6f821ac66b11f433414735db68d28()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_766c4c8384168db40f64f4c4dfb3ea1c()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_766c4c8384168db40f64f4c4dfb3ea1c()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_ede6f821ac66b11f433414735db68d28()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_766c4c8384168db40f64f4c4dfb3ea1c()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -2186,10 +1972,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldText(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldText(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "ede6f821ac66b11f433414735db68d28"] = () => {
-    const parent = document.getElementById("ede6f821ac66b11f433414735db68d28")
+  window["goplayRenderCompile_" + "766c4c8384168db40f64f4c4dfb3ea1c"] = () => {
+    const parent = document.getElementById("766c4c8384168db40f64f4c4dfb3ea1c")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -2198,31 +1984,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "ede6f821ac66b11f433414735db68d28"] = async() => {
+  window["goplayOpenShare_" + "766c4c8384168db40f64f4c4dfb3ea1c"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=text]</p>
 <h3>Textarea<span class="hx-absolute -hx-mt-20" id="textarea"></span>
-    <a href="#textarea" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#textarea" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldTextarea</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -2234,12 +2003,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -2263,13 +2029,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="97b0801313d5d4fae5f21c9de9419b5b" class="hugo-goplay-result"></div>
+<div id="0573d17a20657857cfe2ae2ff4c0932e" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_97b0801313d5d4fae5f21c9de9419b5b()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_97b0801313d5d4fae5f21c9de9419b5b()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_0573d17a20657857cfe2ae2ff4c0932e()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_0573d17a20657857cfe2ae2ff4c0932e()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_97b0801313d5d4fae5f21c9de9419b5b()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_0573d17a20657857cfe2ae2ff4c0932e()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -2319,10 +2085,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldTextarea(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldTextarea(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "97b0801313d5d4fae5f21c9de9419b5b"] = () => {
-    const parent = document.getElementById("97b0801313d5d4fae5f21c9de9419b5b")
+  window["goplayRenderCompile_" + "0573d17a20657857cfe2ae2ff4c0932e"] = () => {
+    const parent = document.getElementById("0573d17a20657857cfe2ae2ff4c0932e")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -2331,31 +2097,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "97b0801313d5d4fae5f21c9de9419b5b"] = async() => {
+  window["goplayOpenShare_" + "0573d17a20657857cfe2ae2ff4c0932e"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates a textarea</p>
 <h3>Time<span class="hx-absolute -hx-mt-20" id="time"></span>
-    <a href="#time" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#time" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewFieldTime</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -2367,12 +2116,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -2396,13 +2142,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="ccf7ba6c0e95a0bb534fc981e3159d4e" class="hugo-goplay-result"></div>
+<div id="be8f2a259d05eea9b5e34dca51a87420" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_ccf7ba6c0e95a0bb534fc981e3159d4e()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_ccf7ba6c0e95a0bb534fc981e3159d4e()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_be8f2a259d05eea9b5e34dca51a87420()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_be8f2a259d05eea9b5e34dca51a87420()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_ccf7ba6c0e95a0bb534fc981e3159d4e()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_be8f2a259d05eea9b5e34dca51a87420()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -2452,10 +2198,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldTime(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewFieldTime(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "ccf7ba6c0e95a0bb534fc981e3159d4e"] = () => {
-    const parent = document.getElementById("ccf7ba6c0e95a0bb534fc981e3159d4e")
+  window["goplayRenderCompile_" + "be8f2a259d05eea9b5e34dca51a87420"] = () => {
+    const parent = document.getElementById("be8f2a259d05eea9b5e34dca51a87420")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -2464,31 +2210,14 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "ccf7ba6c0e95a0bb534fc981e3159d4e"] = async() => {
+  window["goplayOpenShare_" + "be8f2a259d05eea9b5e34dca51a87420"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=time] with default transformers</p>
 <h3>Submit<span class="hx-absolute -hx-mt-20" id="submit"></span>
-    <a href="#submit" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
-  <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800"><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-0" aria-selected="true"  tabindex="0"  data-state="selected">Doc</button><button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-1">Example</button></div>
-</div>
-<div>
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-0"
-  role="tabpanel" tabindex="0"  data-state="selected" ><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+    <a href="#submit" class="subheading-anchor" aria-label="Permalink for this section"></a></h3><div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
 
 <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">NewSubmit</span><span class="p">(</span><span class="nx">name</span> <span class="kt">string</span><span class="p">)</span> <span class="o">*</span><span class="nx">Field</span></span></span></code></pre></div></div><div class="hextra-code-copy-btn-container hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 hx-top-0">
   <button
@@ -2500,12 +2229,9 @@ func r(f *form.Form) {
   </button>
 </div>
 </div>
-</div>
+<pre class="hidden">
+package main
 
-<div
-  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
-  id="tabs-panel-1"
-  role="tabpanel"> <pre class="hidden">
 import (
     "fmt"
     "html/template"
@@ -2529,13 +2255,13 @@ func r(f *form.Form) {
     fmt.Println(b.String())
 }
 </pre>
-<div id="fe1ccf941a5ed5074ef9393171f25233" class="hugo-goplay-result"></div>
+<div id="d2d421db16dec5e2b7c11311925a3aa9" class="hugo-goplay-result"></div>
 <div class="hugo-goplay-toolbox">
-  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_fe1ccf941a5ed5074ef9393171f25233()>Run</button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_fe1ccf941a5ed5074ef9393171f25233()>
+  <button role="button" class="hugo-goplay-button" onclick=goplayRenderCompile_d2d421db16dec5e2b7c11311925a3aa9()>Run</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_d2d421db16dec5e2b7c11311925a3aa9()>
     Try it yourself &#8599;
   </button>
-  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_fe1ccf941a5ed5074ef9393171f25233()>Share &#8599;</button>
+  <button role="button" class="hugo-goplay-button" onclick=goplayOpenShare_d2d421db16dec5e2b7c11311925a3aa9()>Share &#8599;</button>
 </div>
 <style>
   .hidden {
@@ -2585,10 +2311,10 @@ func r(f *form.Form) {
       .trim();
   }
 
-  const normalizedCode = normalizeCode("\u003cpre class=\u0022hidden\u0022\u003e\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewSubmit(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n")
+  const normalizedCode = normalizeCode("\n\n\u003cpre class=\u0022hidden\u0022\u003e\npackage main\n\nimport (\n    \u0022fmt\u0022\n    \u0022html\/template\u0022\n    \u0022strings\u0022\n\n    \u0022gitnet.fr\/deblan\/go-form\/form\u0022\n    \u0022gitnet.fr\/deblan\/go-form\/theme\u0022\n)\n\nfunc main() {\n    field := form.NewSubmit(\u0022Foo\u0022)\n\n    r(form.NewForm(field))\n}\n\nfunc r(f *form.Form) {\n    render := theme.NewRenderer(theme.Html5)\n    tpl, _ := template.New(\u0022example\u0022).Funcs(render.FuncMap()).Parse()\n    b := new(strings.Builder)\n    tpl.Execute(b, map[string]any{\u0022Form\u0022: f})\n    fmt.Println(b.String())\n}\n\u003c\/pre\u003e\n\n")
 
-  window["goplayRenderCompile_" + "fe1ccf941a5ed5074ef9393171f25233"] = () => {
-    const parent = document.getElementById("fe1ccf941a5ed5074ef9393171f25233")
+  window["goplayRenderCompile_" + "d2d421db16dec5e2b7c11311925a3aa9"] = () => {
+    const parent = document.getElementById("d2d421db16dec5e2b7c11311925a3aa9")
     const pre = document.createElement('pre')
     const container = document.createElement('code')
     container.classList.add('text')
@@ -2597,13 +2323,11 @@ func r(f *form.Form) {
     goplay.renderCompile(container,normalizedCode);
   };
 
-  window["goplayOpenShare_" + "fe1ccf941a5ed5074ef9393171f25233"] = async() => {
+  window["goplayOpenShare_" + "d2d421db16dec5e2b7c11311925a3aa9"] = async() => {
     const shareUrl = await goplay.share(normalizedCode)
     window.open(shareUrl, "_blank").focus();
   };
 </script>
-</div>
-</div>
 <p>Generates an input[type=submit]</p>
 <h2>Methods<span class="hx-absolute -hx-mt-20" id="methods"></span>
     <a href="#methods" class="subheading-anchor" aria-label="Permalink for this section"></a></h2><h3>Add<span class="hx-absolute -hx-mt-20" id="add"></span>
diff --git a/en.search-data.json b/en.search-data.json
index 6b199b3..91725b5 100644
--- a/en.search-data.json
+++ b/en.search-data.json
@@ -1 +1 @@
-{"/go-form/docs/":{"data":{"":"Creating and processing HTML forms is hard and repetitive. You need to deal with rendering HTML form fields, validating submitted data, mapping the form data into objects and a lot more. go-form includes a powerful form feature that provides all these features.\ngo-form is heavily influenced by Symfony Form. It includes:\nA form builder based on fields declarations and independent of structs Validation based on constraints Data mounting to populate a form from a struct instance Data binding to populate a struct instance from a submitted form Form renderer with customizable themes "},"title":"Documentation"},"/go-form/docs/constraints/":{"data":{"":"The validation is designed to validate data against constraints.","constraints#Constraints":"Length Validate the length of an array, a slice or a string\nc := validation.NewLength() // Define minimum c.WithMin(1) // Define minimum c.WithMax(100) // Define min and max // Equivalent to c.WithMin(50).WithMax(50) c.WithExact(50) Mail validation.NewMail() Not blank validation.NewNotBlank() Range Validate a number\nc := validation.NewRange() // Define minimum c.WithMin(1) // Define minimum c.WithMax(100) // Define min and max // Equivalent to c.WithMin(1).WithMax(100) c.WithRange(1, 100) Regex Validate a string with a regex\nc := validation.NewRegex(`expression`) // The value must match c.MustMatch() // The value must not match c.MustNotMatch() Is even Validate that a number is even.\nvalidation.NewIsEven() Is odd Validate that a number is odd.\nvalidation.NewIsOdd() ","custom-constraint#Custom constraint":"Use case: you want to validate that the data equals “example”\npackage validation import ( \"reflect\" v \"gitnet.fr/deblan/go-form/validation\" ) // Define a struct type IsExample struct { Message string TypeErrorMessage string } // Create a factory func NewIsExample() IsEven { return IsEven{ Message: \"This value does not equal \\\"example\\\".\", TypeErrorMessage: \"This value can not be processed.\", } } // Implement the validation func (c IsExample) Validate(data any) []Error { errors := []Error{} // Should not validate blank data if len(v.NewNotBlank().Validate(data)) != 0 { return []Error{} } t := reflect.TypeOf(data) if t.Kind() == reflect.Ptr { t = t.Elem() } switch t.Kind() { case reflect.String: if data.(string) != \"example\" { errors = append(errors, Error(c.Message)) } default: errors = append(errors, Error(c.TypeErrorMessage)) } return errors } ","import#Import":" import ( \"gitnet.fr/deblan/go-form/validation\" ) "},"title":"Constraints"},"/go-form/docs/fields/":{"data":{"":"","#":"A field represents a field in a form.\nCheckbox DocExample func NewFieldCheckbox(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldCheckbox(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=checkbox]\nChoice DocExample func NewFieldChoice(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldChoice(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates inputs (checkbox or radio) or selects\nCsrf DocExample func NewFieldCsrf(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldCsrf(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Date DocExample func NewFieldDate(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldDate(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=date] with default transformers\nDatetime DocExample func NewFieldDatetime(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldDatetime(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=datetime] with default transformers\nDatetimeLocal DocExample func NewFieldDatetimeLocal(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldDatetimeLocal(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=datetime-local] with default transformers\nHidden DocExample func NewFieldHidden(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldHidden(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=hidden]\nMail DocExample func NewFieldMail(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldMail(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=email]\nNumber DocExample func NewFieldNumber(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldNumber(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=number] with default transformers\nPassword DocExample func NewFieldPassword(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldPassword(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=password]\nRange DocExample func NewFieldRange(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldRange(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=range]\nSub Form DocExample func NewFieldSubForm(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldSubForm(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Alias:\nfunc NewSubForm(name string) *Field Generates a sub form\nText DocExample func NewFieldText(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldText(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=text]\nTextarea DocExample func NewFieldTextarea(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldTextarea(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates a textarea\nTime DocExample func NewFieldTime(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldTime(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=time] with default transformers\nSubmit DocExample func NewSubmit(name string) *Field import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewSubmit(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=submit]","methods#Methods":"Add func (f *Field) Add(children ...*Field) *Field Appends children\nBind func (f *Field) Bind(data map[string]any, key *string) error Bind the data into the given map\nGetChild func (f *Field) GetChild(name string) *Field Returns a child using its name\nGetId func (f *Field) GetId() string Computes the id of the field\nGetName func (f *Field) GetName() string Computes the name of the field\nGetOption func (f *Field) GetOption(name string) *Option Returns an option using its name\nHasChild func (f *Field) HasChild(name string) bool Checks if the field contains a child using its name\nHasOption func (f *Field) HasOption(name string) bool Checks if the field contains an option using its name\nMount func (f *Field) Mount(data any) error Populates the field with data\nResetErrors func (f *Field) ResetErrors() *Field Resets the field errors\nWithBeforeBind func (f *Field) WithBeforeBind(callback func(data any) (any, error)) *Field Sets a transformer applied to the data of a field before defining it in a structure\nWithBeforeMount func (f *Field) WithBeforeMount(callback func(data any) (any, error)) *Field Sets a transformer applied to the structure data before displaying it in a field\nWithConstraints func (f *Field) WithConstraints(constraints ...validation.Constraint) *Field Appends constraints\nWithData func (f *Field) WithData(data any) *Field Sets data the field\nWithFixedName func (f *Field) WithFixedName() *Field Sets that the name of the field is not computed\nWithOptions func (f *Field) WithOptions(options ...*Option) *Field Common options Name type description Info required bool Add required=\"true\" Does not apply a constraint attr form.Attrs List of extra attributes of the field row_attr form.Attrs List of extra attributes of the field’s top container label string The label of the field Usually show before the field label_attr form.Attrs List of extra attributes of the label help string Helper of the field help_attr form.Attrs List of extra attributes of the help Appends options to the field\nWithSlice func (f *Field) WithSlice() *Field Sets that the field represents a data slice"},"title":"Fields"},"/go-form/docs/form/":{"data":{"":"","example#Example":"Prerequisites import ( \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/validation\" ) type Person struct { Name string Age int } Creating a form myForm := form.NewForm( form.NewFieldText(\"Name\"). WithConstraints( validation.NewNotBlank(), ), form.NewFieldNumber(\"Age\"). WithConstraints( validation.NewNotBlank(), validation.NewRange().WithMin(18), ), ).End() Validating a struct data := Person{} myForm.Mount(data) myForm.IsValid() // false data = Person{ Name: \"Alice\", Age: 42, } myForm.Mount(data) myForm.IsValid() // true Validating a request import ( \"net/http\" ) myForm.WithMethod(http.MethodPost) // req *http.Request if req.Method == myForm.Method { myForm.HandleRequest(req) if myForm.IsSubmitted() \u0026\u0026 myForm.IsValid() { myForm.Bind(\u0026data) } } ","methods#Methods":"NewForm func NewForm(fields ...*Field) *Form Generates a new form with default properties\nAdd func (f *Form) Add(fields ...*Field) Appends children\nAddGlobalField func (f *Form) AddGlobalField(field *Field) Configures its children deeply\nBind func (f *Form) Bind(data any) error Copies datas from the form to a struct\nEnd func (f *Form) End() *Form Configures its children deeply This function must be called after adding all\nfields\nGetField func (f *Form) GetField(name string) *Field Returns a child using its name\nGetOption func (f *Form) GetOption(name string) *Option Returns an option using its name\nHandleRequest func (f *Form) HandleRequest(req *http.Request) Processes a request\nHasField func (f *Form) HasField(name string) bool Checks if the form contains a child using its name\nHasOption func (f *Form) HasOption(name string) bool Checks if the form contains an option using its name\nIsSubmitted func (f *Form) IsSubmitted() bool Checks if the form is submitted\nIsValid func (f *Form) IsValid() bool Checks the a form is valid\nMount func (f *Form) Mount(data any) error Copies datas from a struct to the form\nResetErrors func (f *Form) ResetErrors() *Form Resets the form errors\nWithAction func (f *Form) WithAction(v string) *Form Sets the action of the form (eg: “/”)\nWithMethod func (f *Form) WithMethod(v string) *Form Sets the method of the format (http.MethodPost, http.MethodGet, …)\nWithName func (f *Form) WithName(v string) *Form Sets the name of the form (used to compute name of fields)\nWithOptions func (f *Form) WithOptions(options ...*Option) *Form Appends options to the form\nOptions Name Type Description attr map[string]string List of extra attributes help string Helper ","struct#Struct":" type Form struct { Fields []*Field GlobalFields []*Field Errors []validation.Error Method string Action string Name string Options []*Option RequestData *url.Values } "},"title":"Form"},"/go-form/docs/installation/":{"data":{"":" go get gitnet.fr/deblan/go-form "},"title":"Installation"},"/go-form/docs/rendering/":{"data":{"":"go-form allows you to render a form using Go’s built-in template engine. Here is a simple example that displays a form:\nhttp.HandleFunc(\"/\", func(w http.ResponseWriter, r *http.Request) { myForm := form.NewForm(...) render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"page\").Funcs(render.FuncMap()).Parse(` \u003chtml\u003e \u003chead\u003e \u003ctitle\u003eMy form\u003c/title\u003e \u003c/head\u003e \u003cbody\u003e {{ form .Form }} \u003c/body\u003e \u003c/html\u003e `) w.Header().Set(\"Content-Type\", \"text/html; charset=utf-8\") tpl.Execute(w, map[string]any{ \"Form\": myForm, }) } Other helper functions are available to render specific parts of the form:\nform_errors: displays the form’s global errors form_row : renders the label, errors, and widget of a field form_label: renders only the label of a field form_widget: renders only the widget of a field form_widget_errors: renders only the errors of a specific field "},"title":"Rendering"},"/go-form/docs/rendering/theming/":{"data":{"":"go-form provides 2 themes:\ntheme.Html5: a basic view without classes theme.Bootstrap5: a theme for Bootstrap 5 You can add a custom theme. Learn by reading the Bootstrap5 theme."},"title":"Theming"},"/go-form/docs/workflow/":{"data":{"":"","#":" Import import ( \"html/template\" \"net/http\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) Create a form // Let's create a new form // You can pass *form.Field as arguments myForm := form.NewForm(field1, field2, ...) // Add somes fields myForm.Add(field3, field4, ...) // Set the method // \u003cform method=\"POST\" ...\u003e myForm.WithMethod(http.MethodPost) // Define the action // \u003cform action=\"/\" ...\u003e myForm.WithAction(\"/\") // Set a name myForm.WithName(\"myForm\") // Add options myForm.WithOptions(option1, option2, ...) // When all fields are added, call End() myForm.End() Attributes Some options are natively supported in go-form themes.\nmyForm.WithOptions( form.NewOption(\"help\", \"A help for the form\"), // \u003cform data-foo=\"bar\" data-bar=\"bar\" ... form.NewOption(\"attr\", form.Attrs{ \"data-foo\": \"foo\", \"data-bar\": \"bar\", }), ) Data mounting This step is not required when you does not want to pre-fill the form. Your struct can be complexe and the form only map existing properties.\ntype Person struct { Name string Age int } data := Person{ Name: \"Alice\", Age: 42, } // Assuming 2 fields named \"Name\" and \"Age\" exist myForm.Mount(data) Rendering http.HandleFunc(\"/\", func(w http.ResponseWriter, r *http.Request) { // myForm := form.NewForm(...) render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"page\").Funcs(render.FuncMap()).Parse(`{{ form .Form }}`) w.Header().Set(\"Content-Type\", \"text/html; charset=utf-8\") tpl.Execute(w, map[string]any{ \"Form\": myForm, }) } Data binding This is the final step. After the form handles the request, you can check if the form has been submitted, check the values are valid and finally populate your struct.\nhttp.HandleFunc(\"/\", func(w http.ResponseWriter, r *http.Request) { // data := Person{...} // myForm := form.NewForm(...) if r.Method == myForm.Method { myForm.HandleRequest(r) if myForm.IsSubmitted() \u0026\u0026 myForm.IsValid() { myForm.Bind(\u0026data) } } }) "},"title":"Workflow"}}
\ No newline at end of file
+{"/go-form/docs/":{"data":{"":"Creating and processing HTML forms is hard and repetitive. You need to deal with rendering HTML form fields, validating submitted data, mapping the form data into objects and a lot more. go-form includes a powerful form feature that provides all these features.\ngo-form is heavily influenced by Symfony Form. It includes:\nA form builder based on fields declarations and independent of structs Validation based on constraints Data mounting to populate a form from a struct instance Data binding to populate a struct instance from a submitted form Form renderer with customizable themes "},"title":"Documentation"},"/go-form/docs/constraints/":{"data":{"":"The validation is designed to validate data against constraints.","constraints#Constraints":"Length Validate the length of an array, a slice or a string\nc := validation.NewLength() // Define minimum c.WithMin(1) // Define minimum c.WithMax(100) // Define min and max // Equivalent to c.WithMin(50).WithMax(50) c.WithExact(50) Mail validation.NewMail() Not blank validation.NewNotBlank() Range Validate a number\nc := validation.NewRange() // Define minimum c.WithMin(1) // Define minimum c.WithMax(100) // Define min and max // Equivalent to c.WithMin(1).WithMax(100) c.WithRange(1, 100) Regex Validate a string with a regex\nc := validation.NewRegex(`expression`) // The value must match c.MustMatch() // The value must not match c.MustNotMatch() Is even Validate that a number is even.\nvalidation.NewIsEven() Is odd Validate that a number is odd.\nvalidation.NewIsOdd() ","custom-constraint#Custom constraint":"Use case: you want to validate that the data equals “example”\npackage validation import ( \"reflect\" v \"gitnet.fr/deblan/go-form/validation\" ) // Define a struct type IsExample struct { Message string TypeErrorMessage string } // Create a factory func NewIsExample() IsEven { return IsEven{ Message: \"This value does not equal \\\"example\\\".\", TypeErrorMessage: \"This value can not be processed.\", } } // Implement the validation func (c IsExample) Validate(data any) []Error { errors := []Error{} // Should not validate blank data if len(v.NewNotBlank().Validate(data)) != 0 { return []Error{} } t := reflect.TypeOf(data) if t.Kind() == reflect.Ptr { t = t.Elem() } switch t.Kind() { case reflect.String: if data.(string) != \"example\" { errors = append(errors, Error(c.Message)) } default: errors = append(errors, Error(c.TypeErrorMessage)) } return errors } ","import#Import":" import ( \"gitnet.fr/deblan/go-form/validation\" ) "},"title":"Constraints"},"/go-form/docs/fields/":{"data":{"":"","#":"A field represents a field in a form.\nCheckbox DocExample func NewFieldCheckbox(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldCheckbox(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=checkbox]\nChoice DocExample func NewFieldChoice(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldChoice(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates inputs (checkbox or radio) or selects\nCsrf func NewFieldCsrf(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldCsrf(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Date func NewFieldDate(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldDate(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=date] with default transformers\nDatetime func NewFieldDatetime(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldDatetime(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=datetime] with default transformers\nDatetimeLocal func NewFieldDatetimeLocal(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldDatetimeLocal(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=datetime-local] with default transformers\nHidden func NewFieldHidden(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldHidden(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=hidden]\nMail func NewFieldMail(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldMail(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=email]\nNumber func NewFieldNumber(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldNumber(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=number] with default transformers\nPassword func NewFieldPassword(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldPassword(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=password]\nRange func NewFieldRange(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldRange(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=range]\nSub Form func NewFieldSubForm(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldSubForm(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Alias:\nfunc NewSubForm(name string) *Field Generates a sub form\nText func NewFieldText(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldText(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=text]\nTextarea func NewFieldTextarea(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldTextarea(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates a textarea\nTime func NewFieldTime(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewFieldTime(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=time] with default transformers\nSubmit func NewSubmit(name string) *Field package main import ( \"fmt\" \"html/template\" \"strings\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) func main() { field := form.NewSubmit(\"Foo\") r(form.NewForm(field)) } func r(f *form.Form) { render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"example\").Funcs(render.FuncMap()).Parse() b := new(strings.Builder) tpl.Execute(b, map[string]any{\"Form\": f}) fmt.Println(b.String()) } Run Try it yourself ↗ Share ↗ Generates an input[type=submit]","methods#Methods":"Add func (f *Field) Add(children ...*Field) *Field Appends children\nBind func (f *Field) Bind(data map[string]any, key *string) error Bind the data into the given map\nGetChild func (f *Field) GetChild(name string) *Field Returns a child using its name\nGetId func (f *Field) GetId() string Computes the id of the field\nGetName func (f *Field) GetName() string Computes the name of the field\nGetOption func (f *Field) GetOption(name string) *Option Returns an option using its name\nHasChild func (f *Field) HasChild(name string) bool Checks if the field contains a child using its name\nHasOption func (f *Field) HasOption(name string) bool Checks if the field contains an option using its name\nMount func (f *Field) Mount(data any) error Populates the field with data\nResetErrors func (f *Field) ResetErrors() *Field Resets the field errors\nWithBeforeBind func (f *Field) WithBeforeBind(callback func(data any) (any, error)) *Field Sets a transformer applied to the data of a field before defining it in a structure\nWithBeforeMount func (f *Field) WithBeforeMount(callback func(data any) (any, error)) *Field Sets a transformer applied to the structure data before displaying it in a field\nWithConstraints func (f *Field) WithConstraints(constraints ...validation.Constraint) *Field Appends constraints\nWithData func (f *Field) WithData(data any) *Field Sets data the field\nWithFixedName func (f *Field) WithFixedName() *Field Sets that the name of the field is not computed\nWithOptions func (f *Field) WithOptions(options ...*Option) *Field Common options Name type description Info required bool Add required=\"true\" Does not apply a constraint attr form.Attrs List of extra attributes of the field row_attr form.Attrs List of extra attributes of the field’s top container label string The label of the field Usually show before the field label_attr form.Attrs List of extra attributes of the label help string Helper of the field help_attr form.Attrs List of extra attributes of the help Appends options to the field\nWithSlice func (f *Field) WithSlice() *Field Sets that the field represents a data slice"},"title":"Fields"},"/go-form/docs/form/":{"data":{"":"","example#Example":"Prerequisites import ( \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/validation\" ) type Person struct { Name string Age int } Creating a form myForm := form.NewForm( form.NewFieldText(\"Name\"). WithConstraints( validation.NewNotBlank(), ), form.NewFieldNumber(\"Age\"). WithConstraints( validation.NewNotBlank(), validation.NewRange().WithMin(18), ), ).End() Validating a struct data := Person{} myForm.Mount(data) myForm.IsValid() // false data = Person{ Name: \"Alice\", Age: 42, } myForm.Mount(data) myForm.IsValid() // true Validating a request import ( \"net/http\" ) myForm.WithMethod(http.MethodPost) // req *http.Request if req.Method == myForm.Method { myForm.HandleRequest(req) if myForm.IsSubmitted() \u0026\u0026 myForm.IsValid() { myForm.Bind(\u0026data) } } ","methods#Methods":"NewForm func NewForm(fields ...*Field) *Form Generates a new form with default properties\nAdd func (f *Form) Add(fields ...*Field) Appends children\nAddGlobalField func (f *Form) AddGlobalField(field *Field) Configures its children deeply\nBind func (f *Form) Bind(data any) error Copies datas from the form to a struct\nEnd func (f *Form) End() *Form Configures its children deeply This function must be called after adding all\nfields\nGetField func (f *Form) GetField(name string) *Field Returns a child using its name\nGetOption func (f *Form) GetOption(name string) *Option Returns an option using its name\nHandleRequest func (f *Form) HandleRequest(req *http.Request) Processes a request\nHasField func (f *Form) HasField(name string) bool Checks if the form contains a child using its name\nHasOption func (f *Form) HasOption(name string) bool Checks if the form contains an option using its name\nIsSubmitted func (f *Form) IsSubmitted() bool Checks if the form is submitted\nIsValid func (f *Form) IsValid() bool Checks the a form is valid\nMount func (f *Form) Mount(data any) error Copies datas from a struct to the form\nResetErrors func (f *Form) ResetErrors() *Form Resets the form errors\nWithAction func (f *Form) WithAction(v string) *Form Sets the action of the form (eg: “/”)\nWithMethod func (f *Form) WithMethod(v string) *Form Sets the method of the format (http.MethodPost, http.MethodGet, …)\nWithName func (f *Form) WithName(v string) *Form Sets the name of the form (used to compute name of fields)\nWithOptions func (f *Form) WithOptions(options ...*Option) *Form Appends options to the form\nOptions Name Type Description attr map[string]string List of extra attributes help string Helper ","struct#Struct":" type Form struct { Fields []*Field GlobalFields []*Field Errors []validation.Error Method string Action string Name string Options []*Option RequestData *url.Values } "},"title":"Form"},"/go-form/docs/installation/":{"data":{"":" go get gitnet.fr/deblan/go-form "},"title":"Installation"},"/go-form/docs/rendering/":{"data":{"":"go-form allows you to render a form using Go’s built-in template engine. Here is a simple example that displays a form:\nhttp.HandleFunc(\"/\", func(w http.ResponseWriter, r *http.Request) { myForm := form.NewForm(...) render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"page\").Funcs(render.FuncMap()).Parse(` \u003chtml\u003e \u003chead\u003e \u003ctitle\u003eMy form\u003c/title\u003e \u003c/head\u003e \u003cbody\u003e {{ form .Form }} \u003c/body\u003e \u003c/html\u003e `) w.Header().Set(\"Content-Type\", \"text/html; charset=utf-8\") tpl.Execute(w, map[string]any{ \"Form\": myForm, }) } Other helper functions are available to render specific parts of the form:\nform_errors: displays the form’s global errors form_row : renders the label, errors, and widget of a field form_label: renders only the label of a field form_widget: renders only the widget of a field form_widget_errors: renders only the errors of a specific field "},"title":"Rendering"},"/go-form/docs/rendering/theming/":{"data":{"":"go-form provides 2 themes:\ntheme.Html5: a basic view without classes theme.Bootstrap5: a theme for Bootstrap 5 You can add a custom theme. Learn by reading the Bootstrap5 theme."},"title":"Theming"},"/go-form/docs/workflow/":{"data":{"":"","#":" Import import ( \"html/template\" \"net/http\" \"gitnet.fr/deblan/go-form/form\" \"gitnet.fr/deblan/go-form/theme\" ) Create a form // Let's create a new form // You can pass *form.Field as arguments myForm := form.NewForm(field1, field2, ...) // Add somes fields myForm.Add(field3, field4, ...) // Set the method // \u003cform method=\"POST\" ...\u003e myForm.WithMethod(http.MethodPost) // Define the action // \u003cform action=\"/\" ...\u003e myForm.WithAction(\"/\") // Set a name myForm.WithName(\"myForm\") // Add options myForm.WithOptions(option1, option2, ...) // When all fields are added, call End() myForm.End() Attributes Some options are natively supported in go-form themes.\nmyForm.WithOptions( form.NewOption(\"help\", \"A help for the form\"), // \u003cform data-foo=\"bar\" data-bar=\"bar\" ... form.NewOption(\"attr\", form.Attrs{ \"data-foo\": \"foo\", \"data-bar\": \"bar\", }), ) Data mounting This step is not required when you does not want to pre-fill the form. Your struct can be complexe and the form only map existing properties.\ntype Person struct { Name string Age int } data := Person{ Name: \"Alice\", Age: 42, } // Assuming 2 fields named \"Name\" and \"Age\" exist myForm.Mount(data) Rendering http.HandleFunc(\"/\", func(w http.ResponseWriter, r *http.Request) { // myForm := form.NewForm(...) render := theme.NewRenderer(theme.Html5) tpl, _ := template.New(\"page\").Funcs(render.FuncMap()).Parse(`{{ form .Form }}`) w.Header().Set(\"Content-Type\", \"text/html; charset=utf-8\") tpl.Execute(w, map[string]any{ \"Form\": myForm, }) } Data binding This is the final step. After the form handles the request, you can check if the form has been submitted, check the values are valid and finally populate your struct.\nhttp.HandleFunc(\"/\", func(w http.ResponseWriter, r *http.Request) { // data := Person{...} // myForm := form.NewForm(...) if r.Method == myForm.Method { myForm.HandleRequest(r) if myForm.IsSubmitted() \u0026\u0026 myForm.IsValid() { myForm.Bind(\u0026data) } } }) "},"title":"Workflow"}}
\ No newline at end of file