deblan/go-form – Fields https://deblan.gitnet.page/go-form/docs/fields/ Recent content in Fields on deblan/go-form Hugo -- gohugo.io en-us Text https://deblan.gitnet.page/go-form/docs/fields/input/text/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/text/ <h2>Basic example<span class="hx-absolute -hx-mt-20" id="basic-example"></span> <a href="#basic-example" class="subheading-anchor" aria-label="Permalink for this section"></a></h2><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">GO</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">Result</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"> <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="nx">form</span><span class="p">.</span><span class="nf">NewFieldText</span><span class="p">(</span><span class="s">&#34;Name&#34;</span><span class="p">)</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 class="hextra-code-copy-btn hx-group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50" title="Copy code" > <div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div> <div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div> </button> </div> </div> </div> <div class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block" id="tabs-panel-1" role="tabpanel"><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-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">method</span><span class="o">=</span><span class="s">&#34;POST&#34;</span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;form-name&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;form[Name]&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</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 class="hextra-code-copy-btn hx-group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50" title="Copy code" > <div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div> <div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div> </button> </div> </div> </div> </div> <h2>Fully featured example<span class="hx-absolute -hx-mt-20" id="fully-featured-example"></span> <a href="#fully-featured-example" class="subheading-anchor" aria-label="Permalink for this section"></a></h2><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">GO</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">Result</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"> <div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-golang" data-lang="golang"><span class="line"><span class="cl"><span class="nx">form</span><span class="p">.</span><span class="nf">NewFieldText</span><span class="p">(</span><span class="s">&#34;Name&#34;</span><span class="p">).</span> </span></span><span class="line"><span class="cl"> <span class="nf">WithOptions</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">form</span><span class="p">.</span><span class="nf">NewOption</span><span class="p">(</span><span class="s">&#34;label&#34;</span><span class="p">,</span> <span class="s">&#34;Name&#34;</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">form</span><span class="p">.</span><span class="nf">NewOption</span><span class="p">(</span><span class="s">&#34;required&#34;</span><span class="p">,</span> <span class="kc">true</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">form</span><span class="p">.</span><span class="nf">NewOption</span><span class="p">(</span><span class="s">&#34;attr&#34;</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span><span class="s">&#34;data-foo&#34;</span><span class="p">:</span> <span class="s">&#34;foo&#34;</span><span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">form</span><span class="p">.</span><span class="nf">NewOption</span><span class="p">(</span><span class="s">&#34;row_attr&#34;</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span><span class="s">&#34;data-bar&#34;</span><span class="p">:</span> <span class="s">&#34;bar&#34;</span><span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="p">)</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 class="hextra-code-copy-btn hx-group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50" title="Copy code" > <div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div> <div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div> </button> </div> </div> </div> <div class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block" id="tabs-panel-1" role="tabpanel"><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-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">method</span><span class="o">=</span><span class="s">&#34;POST&#34;</span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">data-bar</span><span class="o">=</span><span class="s">&#34;bar&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;form-name&#34;</span> <span class="p">&gt;</span>Name<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;form-name&#34;</span> <span class="na">required</span><span class="o">=</span><span class="s">&#34;required&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;form[Name]&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">data-foo</span><span class="o">=</span><span class="s">&#34;foo&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</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 class="hextra-code-copy-btn hx-group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50" title="Copy code" > <div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div> <div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div> </button> </div> </div> </div> </div> Hidden https://deblan.gitnet.page/go-form/docs/fields/input/hidden/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/hidden/ https://deblan.gitnet.page/go-form/docs/fields/button/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/button/ https://deblan.gitnet.page/go-form/docs/fields/textarea/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/textarea/ Date https://deblan.gitnet.page/go-form/docs/fields/input/date/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/date/ Datetime https://deblan.gitnet.page/go-form/docs/fields/input/datetime/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/datetime/ Mail https://deblan.gitnet.page/go-form/docs/fields/input/mail/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/mail/ <table> <tr> <td>ok</td> </tr> </table> Number https://deblan.gitnet.page/go-form/docs/fields/input/number/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/number/ <table> <tr> <td>ok</td> </tr> </table> Password https://deblan.gitnet.page/go-form/docs/fields/input/password/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/password/ <table> <tr> <td>ok</td> </tr> </table> Range https://deblan.gitnet.page/go-form/docs/fields/input/range/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/range/ <table> <tr> <td>ok</td> </tr> </table> Time https://deblan.gitnet.page/go-form/docs/fields/input/time/ Mon, 01 Jan 0001 00:00:00 +0000 https://deblan.gitnet.page/go-form/docs/fields/input/time/