@hidden : The Hidden Attribute
On this page
- Summary
- Usage
- Supported Elements
- Binding Values
- Notes
- Examples
- Basic Visibility Control
- Conditional Content Based on User Role
- Show/Hide Based on Data Presence
- Conditional Report Sections
- Hiding Table Columns
- Conditional Warning Messages
- Hiding List Items
- Draft vs Final Document
- Conditional Page Sections
- Hiding Sensitive Information
- Conditional Graphics and Images
- Dynamic Form Sections
- Hiding Empty Sections
- Multi-Language Documents
- Conditional Footer Information
- Status-Based Content
- See Also
Summary
The hidden attribute controls the visibility of an element in the rendered PDF document. When set to “hidden”, the element and all its contents are excluded from the output, making it useful for conditional content display, draft sections, and dynamic visibility control through data binding.
Usage
The hidden attribute controls element visibility:
- Set to
"hidden"to hide the element and its contents - Omit the attribute or use empty value to show the element
- Hidden elements do not take up space in the layout
- Useful for conditional content display based on data
- Can hide any type of element (block, inline, media, etc.)
- Supports data binding for dynamic visibility control
<!-- Visible element (no hidden attribute) -->
<div>This content is visible</div>
<!-- Hidden element -->
<div hidden="hidden">This content is not rendered</div>
<!-- Dynamic visibility with data binding -->
<p hidden="">
Warning message
</p>
Supported Elements
The hidden attribute is supported on all HTML elements in Scryber, including:
Block Elements
<div>,<section>,<article>,<aside>,<main>,<nav><header>,<footer>,<address><h1>through<h6>,<p>,<blockquote>,<pre><ul>,<ol>,<li>,<dl>,<dt>,<dd><table>,<thead>,<tbody>,<tfoot>,<tr>,<td>,<th><fieldset>,<legend>,<figure>,<figcaption>
Inline Elements
<a>,<span>,<strong>,<em>,<b>,<i>,<u><code>,<kbd>,<samp>,<var>,<mark>,<small>
Media Elements
<img>,<iframe>,<canvas>
Structural Elements
<template>,<style>(though styles are typically processed regardless)
Binding Values
The hidden attribute is particularly powerful with data binding for conditional visibility:
<!-- Simple boolean control -->
<div hidden="">
Conditionally visible content
</div>
<!-- Hide based on condition -->
<p hidden="">
Admin-only content
</p>
<!-- Multiple conditions -->
<section hidden="">
Published content only
</section>
<!-- Hide when value is empty -->
<div hidden="">
<p></p>
</div>
<!-- Show/hide based on list presence -->
<div hidden="">
<h3>Items</h3>
<template data-bind="">
<p></p>
</template>
</div>
<!-- Conditional sections in reports -->
<template data-bind="">
<section hidden="">
<h2></h2>
<p><h1 class="no_toc" id="form--the-associated-form-identifier-attribute">@form : The Associated Form Identifier Attribute</h1>
<hr />
<details class="top-toc">
<summary class="text-delta">
On this page
</summary>
<ul id="markdown-toc">
<li><a href="#summary" id="markdown-toc-summary">Summary</a></li>
<li><a href="#usage" id="markdown-toc-usage">Usage</a></li>
<li><a href="#supported-elements" id="markdown-toc-supported-elements">Supported Elements</a></li>
<li><a href="#attribute-values" id="markdown-toc-attribute-values">Attribute Values</a> <ul>
<li><a href="#syntax" id="markdown-toc-syntax">Syntax</a></li>
<li><a href="#value-type" id="markdown-toc-value-type">Value Type</a></li>
<li><a href="#value-requirements" id="markdown-toc-value-requirements">Value Requirements</a></li>
</ul>
</li>
<li><a href="#binding-values" id="markdown-toc-binding-values">Binding Values</a> <ul>
<li><a href="#static-form-association" id="markdown-toc-static-form-association">Static Form Association</a></li>
<li><a href="#dynamic-form-association-with-data-binding" id="markdown-toc-dynamic-form-association-with-data-binding">Dynamic Form Association with Data Binding</a></li>
<li><a href="#conditional-form-association" id="markdown-toc-conditional-form-association">Conditional Form Association</a></li>
</ul>
</li>
<li><a href="#notes" id="markdown-toc-notes">Notes</a> <ul>
<li><a href="#purpose-in-html" id="markdown-toc-purpose-in-html">Purpose in HTML</a></li>
<li><a href="#purpose-in-scryber-pdf" id="markdown-toc-purpose-in-scryber-pdf">Purpose in Scryber PDF</a></li>
<li><a href="#form-element-relationship" id="markdown-toc-form-element-relationship">Form Element Relationship</a></li>
<li><a href="#default-behavior" id="markdown-toc-default-behavior">Default Behavior</a></li>
<li><a href="#pdf-considerations" id="markdown-toc-pdf-considerations">PDF Considerations</a></li>
<li><a href="#use-cases-in-pdf-generation" id="markdown-toc-use-cases-in-pdf-generation">Use Cases in PDF Generation</a></li>
</ul>
</li>
<li><a href="#examples" id="markdown-toc-examples">Examples</a> <ul>
<li><a href="#example-1-basic-form-association" id="markdown-toc-example-1-basic-form-association">Example 1: Basic Form Association</a></li>
<li><a href="#example-2-multiple-outputs-for-one-form" id="markdown-toc-example-2-multiple-outputs-for-one-form">Example 2: Multiple Outputs for One Form</a></li>
<li><a href="#example-3-output-outside-form-structure" id="markdown-toc-example-3-output-outside-form-structure">Example 3: Output Outside Form Structure</a></li>
<li><a href="#example-4-invoice-with-calculation" id="markdown-toc-example-4-invoice-with-calculation">Example 4: Invoice with Calculation</a></li>
<li><a href="#example-5-survey-results-summary" id="markdown-toc-example-5-survey-results-summary">Example 5: Survey Results Summary</a></li>
<li><a href="#example-6-multi-page-form-with-remote-output" id="markdown-toc-example-6-multi-page-form-with-remote-output">Example 6: Multi-Page Form with Remote Output</a></li>
<li><a href="#example-7-shopping-cart-with-totals" id="markdown-toc-example-7-shopping-cart-with-totals">Example 7: Shopping Cart with Totals</a></li>
<li><a href="#example-8-data-bound-form-with-dynamic-output" id="markdown-toc-example-8-data-bound-form-with-dynamic-output">Example 8: Data-Bound Form with Dynamic Output</a></li>
<li><a href="#example-9-registration-form-with-confirmation" id="markdown-toc-example-9-registration-form-with-confirmation">Example 9: Registration Form with Confirmation</a></li>
<li><a href="#example-10-financial-calculator" id="markdown-toc-example-10-financial-calculator">Example 10: Financial Calculator</a></li>
<li><a href="#example-11-nested-forms-with-multiple-outputs" id="markdown-toc-example-11-nested-forms-with-multiple-outputs">Example 11: Nested Forms with Multiple Outputs</a></li>
<li><a href="#example-12-conditional-form-association" id="markdown-toc-example-12-conditional-form-association">Example 12: Conditional Form Association</a></li>
<li><a href="#example-13-report-with-form-filters" id="markdown-toc-example-13-report-with-form-filters">Example 13: Report with Form Filters</a></li>
<li><a href="#example-14-multi-step-process-with-form" id="markdown-toc-example-14-multi-step-process-with-form">Example 14: Multi-Step Process with Form</a></li>
<li><a href="#example-15-complex-report-with-multiple-forms" id="markdown-toc-example-15-complex-report-with-multiple-forms">Example 15: Complex Report with Multiple Forms</a></li>
</ul>
</li>
<li><a href="#see-also" id="markdown-toc-see-also">See Also</a></li>
</ul>
</details>
<hr />
<h2 id="summary">Summary</h2>
<p>The <code class="language-plaintext highlighter-rouge">form</code> attribute associates an HTML output element with a form element by its ID. This attribute enables output elements to be linked to forms even when they are not nested within the form’s DOM structure.</p>
<hr />
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">form</code> attribute is used to:</p>
<ul>
<li>Associate an <code class="language-plaintext highlighter-rouge"><output></code> element with a specific form</li>
<li>Link output elements to forms outside the normal DOM hierarchy</li>
<li>Enable form-related functionality for standalone output elements</li>
<li>Reference the form that owns the output element</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form</span> <span class="na">id=</span><span class="s">"calculator"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"num1"</span> <span class="na">name=</span><span class="s">"num1"</span> <span class="na">value=</span><span class="s">"10"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"num2"</span> <span class="na">name=</span><span class="s">"num2"</span> <span class="na">value=</span><span class="s">"20"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="c"><!-- Output element associated with form via form attribute --></span>
<span class="nt"><output</span> <span class="na">for=</span><span class="s">"num1 num2"</span> <span class="na">form=</span><span class="s">"calculator"</span><span class="nt">></span>30<span class="nt"></output></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">form</code> attribute is supported by the following element:</p>
<table>
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge"><output></code></td>
<td>Represents the result of a calculation or user action</td>
</tr>
</tbody>
</table>
<p><strong>Note</strong>: In standard HTML, the <code class="language-plaintext highlighter-rouge">form</code> attribute can also be used on input elements (<code class="language-plaintext highlighter-rouge"><input></code>, <code class="language-plaintext highlighter-rouge"><textarea></code>, <code class="language-plaintext highlighter-rouge"><select></code>, <code class="language-plaintext highlighter-rouge"><button></code>), but in Scryber PDF generation, it is primarily used with the <code class="language-plaintext highlighter-rouge"><output></code> element.</p>
<hr />
<h2 id="attribute-values">Attribute Values</h2>
<h3 id="syntax">Syntax</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><output</span> <span class="na">form=</span><span class="s">"form-id"</span><span class="nt">></span>Output value<span class="nt"></output></span>
</code></pre></div></div>
<h3 id="value-type">Value Type</h3>
<table>
<thead>
<tr>
<th>Type</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID reference</td>
<td>The <code class="language-plaintext highlighter-rouge">id</code> of the associated form element</td>
<td><code class="language-plaintext highlighter-rouge">form="myForm"</code></td>
</tr>
</tbody>
</table>
<h3 id="value-requirements">Value Requirements</h3>
<ul>
<li>Must reference a valid form element <code class="language-plaintext highlighter-rouge">id</code> in the document</li>
<li>The form element must exist and have a matching <code class="language-plaintext highlighter-rouge">id</code> attribute</li>
<li>If the form ID doesn’t exist, the association is simply not made (no error)</li>
<li>Can be dynamically bound to a model property</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">form</code> attribute supports both static and dynamic values:</p>
<h3 id="static-form-association">Static Form Association</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form</span> <span class="na">id=</span><span class="s">"contactForm"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"John Doe"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">name=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"john@example.com"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"contactForm"</span> <span class="na">for=</span><span class="s">"name email"</span><span class="nt">></span>
Contact: John Doe (john@example.com)
<span class="nt"></output></span>
</code></pre></div></div>
<h3 id="dynamic-form-association-with-data-binding">Dynamic Form Association with Data Binding</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { formId: "registrationForm" } --></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"username"</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">""</span> <span class="na">for=</span><span class="s">"username"</span><span class="nt">></span>
Username:
<span class="nt"></output></span>
</code></pre></div></div>
<h3 id="conditional-form-association">Conditional Form Association</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { useForm: true, primaryFormId: "form1", secondaryFormId: "form2" } --></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">""</span><span class="nt">></span>
Calculation result
<span class="nt"></output></span>
</code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="purpose-in-html">Purpose in HTML</h3>
<p>In web browsers, the <code class="language-plaintext highlighter-rouge">form</code> attribute:</p>
<ul>
<li>Allows form controls to be placed anywhere in the document</li>
<li>Enables flexible form layouts</li>
<li>Links output elements to forms for submission and validation</li>
<li>Overrides default form association (parent form)</li>
</ul>
<h3 id="purpose-in-scryber-pdf">Purpose in Scryber PDF</h3>
<p>In Scryber PDF generation:</p>
<ul>
<li>The <code class="language-plaintext highlighter-rouge">form</code> attribute is primarily <strong>informational and structural</strong></li>
<li>It helps organize document semantics</li>
<li>Forms are <strong>not interactive</strong> in static PDFs (no submission)</li>
<li>The attribute maintains HTML compatibility when converting web forms to PDF</li>
<li>Useful for documenting relationships between elements</li>
</ul>
<h3 id="form-element-relationship">Form Element Relationship</h3>
<p>The <code class="language-plaintext highlighter-rouge">form</code> attribute works in conjunction with:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">for</code> attribute - Specifies which form controls the output is associated with</li>
<li><code class="language-plaintext highlighter-rouge">name</code> attribute - Names the output element</li>
<li><code class="language-plaintext highlighter-rouge">value</code> or <code class="language-plaintext highlighter-rouge">val</code> attribute - Provides the output value</li>
</ul>
<h3 id="default-behavior">Default Behavior</h3>
<ul>
<li>If <code class="language-plaintext highlighter-rouge">form</code> attribute is not specified, the output element is associated with its <strong>ancestor form</strong> (if any)</li>
<li>If <code class="language-plaintext highlighter-rouge">form</code> attribute is specified, it overrides the ancestor form association</li>
<li>If the referenced form ID doesn’t exist, the output remains unassociated</li>
</ul>
<h3 id="pdf-considerations">PDF Considerations</h3>
<p>When generating PDFs:</p>
<ul>
<li>Forms are <strong>rendered statically</strong> (no interactive form fields by default)</li>
<li>The <code class="language-plaintext highlighter-rouge">form</code> attribute helps maintain document structure</li>
<li>Output values are rendered as text content</li>
<li>Form association is preserved in the document semantic structure</li>
</ul>
<h3 id="use-cases-in-pdf-generation">Use Cases in PDF Generation</h3>
<ol>
<li><strong>Documentation</strong>: Preserve form structure when converting HTML to PDF</li>
<li><strong>Reports</strong>: Show calculation results associated with input sections</li>
<li><strong>Invoices</strong>: Display totals linked to item entry forms</li>
<li><strong>Receipts</strong>: Show computed values related to input data</li>
<li><strong>Summary Sections</strong>: Link output summaries to their data sources</li>
</ol>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="example-1-basic-form-association">Example 1: Basic Form Association</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Order Form<span class="nt"></h2></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"orderForm"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"quantity"</span><span class="nt">></span>Quantity:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"quantity"</span> <span class="na">name=</span><span class="s">"quantity"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="nt">/></span>
<span class="nt"><br/></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"price"</span><span class="nt">></span>Unit Price:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"price"</span> <span class="na">name=</span><span class="s">"price"</span> <span class="na">value=</span><span class="s">"29.99"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"><h3></span>Total<span class="nt"></h3></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"orderForm"</span> <span class="na">for=</span><span class="s">"quantity price"</span> <span class="na">name=</span><span class="s">"total"</span><span class="nt">></span>
$149.95
<span class="nt"></output></span>
</code></pre></div></div>
<h3 id="example-2-multiple-outputs-for-one-form">Example 2: Multiple Outputs for One Form</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form</span> <span class="na">id=</span><span class="s">"calcForm"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"a"</span> <span class="na">name=</span><span class="s">"a"</span> <span class="na">value=</span><span class="s">"10"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"b"</span> <span class="na">name=</span><span class="s">"b"</span> <span class="na">value=</span><span class="s">"20"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"c"</span> <span class="na">name=</span><span class="s">"c"</span> <span class="na">value=</span><span class="s">"30"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 20pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"calcForm"</span> <span class="na">for=</span><span class="s">"a b"</span> <span class="na">name=</span><span class="s">"sum"</span><span class="nt">></span>
A + B = 30
<span class="nt"></output></span>
<span class="nt"><br/></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"calcForm"</span> <span class="na">for=</span><span class="s">"a b c"</span> <span class="na">name=</span><span class="s">"total"</span><span class="nt">></span>
Total = 60
<span class="nt"></output></span>
<span class="nt"><br/></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"calcForm"</span> <span class="na">for=</span><span class="s">"a b c"</span> <span class="na">name=</span><span class="s">"average"</span><span class="nt">></span>
Average = 20
<span class="nt"></output></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-3-output-outside-form-structure">Example 3: Output Outside Form Structure</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Form in header section --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0; padding: 15pt; margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"filterForm"</span><span class="nt">></span>
<span class="nt"><label></span>Date Range:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"date"</span> <span class="na">name=</span><span class="s">"startDate"</span> <span class="na">value=</span><span class="s">"2024-01-01"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"date"</span> <span class="na">name=</span><span class="s">"endDate"</span> <span class="na">value=</span><span class="s">"2024-12-31"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"></div></span>
<span class="c"><!-- Main content --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 20pt 0;"</span><span class="nt">></span>
<span class="nt"><h2></span>Report Summary<span class="nt"></h2></span>
<span class="nt"><p></span>Based on the selected filters:<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="c"><!-- Output in footer section, associated with header form --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border-top: 1pt solid #ccc; padding-top: 10pt; margin-top: 40pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"filterForm"</span> <span class="na">for=</span><span class="s">"startDate endDate"</span><span class="nt">></span>
Report Period: January 1, 2024 - December 31, 2024
<span class="nt"></output></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-4-invoice-with-calculation">Example 4: Invoice with Calculation</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>Invoice #12345<span class="nt"></h1></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"invoiceForm"</span><span class="nt">></span>
<span class="nt"><table</span> <span class="na">border=</span><span class="s">"1"</span> <span class="na">cellpadding=</span><span class="s">"10"</span> <span class="na">style=</span><span class="s">"width: 100%; margin: 20pt 0;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Item<span class="nt"></th></span>
<span class="nt"><th></span>Quantity<span class="nt"></th></span>
<span class="nt"><th></span>Unit Price<span class="nt"></th></span>
<span class="nt"><th></span>Line Total<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Premium Widget<span class="nt"></td></span>
<span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"qty1"</span> <span class="na">name=</span><span class="s">"qty1"</span> <span class="na">value=</span><span class="s">"10"</span> <span class="nt">/></td></span>
<span class="nt"><td></span>$25.00<span class="nt"></td></span>
<span class="nt"><td></span>$250.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Standard Gadget<span class="nt"></td></span>
<span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"qty2"</span> <span class="na">name=</span><span class="s">"qty2"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="nt">/></td></span>
<span class="nt"><td></span>$50.00<span class="nt"></td></span>
<span class="nt"><td></span>$250.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></form></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right; font-size: 14pt; font-weight: bold; margin-top: 20pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"invoiceForm"</span> <span class="na">for=</span><span class="s">"qty1 qty2"</span> <span class="na">name=</span><span class="s">"subtotal"</span><span class="nt">></span>
Subtotal: $500.00
<span class="nt"></output></span>
<span class="nt"><br/></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"invoiceForm"</span> <span class="na">for=</span><span class="s">"subtotal"</span> <span class="na">name=</span><span class="s">"tax"</span><span class="nt">></span>
Tax (8%): $40.00
<span class="nt"></output></span>
<span class="nt"><br/></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"invoiceForm"</span> <span class="na">for=</span><span class="s">"subtotal tax"</span> <span class="na">name=</span><span class="s">"total"</span><span class="nt">></span>
Total: $540.00
<span class="nt"></output></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-5-survey-results-summary">Example 5: Survey Results Summary</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form</span> <span class="na">id=</span><span class="s">"surveyForm"</span><span class="nt">></span>
<span class="nt"><h2></span>Customer Satisfaction Survey<span class="nt"></h2></span>
<span class="nt"><p></span>Rate our service (1-5):<span class="nt"></p></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"rating"</span> <span class="na">name=</span><span class="s">"rating"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">min=</span><span class="s">"1"</span> <span class="na">max=</span><span class="s">"5"</span> <span class="nt">/></span>
<span class="nt"><p></span>Would you recommend us?<span class="nt"></p></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"recommend"</span> <span class="na">value=</span><span class="s">"yes"</span> <span class="na">checked</span> <span class="nt">/></span> Yes
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"recommend"</span> <span class="na">value=</span><span class="s">"no"</span> <span class="nt">/></span> No
<span class="nt"><p></span>Comments:<span class="nt"></p></span>
<span class="nt"><textarea</span> <span class="na">name=</span><span class="s">"comments"</span> <span class="na">rows=</span><span class="s">"4"</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
Great service overall!
<span class="nt"></textarea></span>
<span class="nt"></form></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #e3f2fd; padding: 15pt; margin-top: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3></span>Survey Summary<span class="nt"></h3></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"surveyForm"</span> <span class="na">for=</span><span class="s">"rating"</span> <span class="na">name=</span><span class="s">"ratingDisplay"</span><span class="nt">></span>
Rating: 4 out of 5 stars
<span class="nt"></output></span>
<span class="nt"><br/></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"surveyForm"</span> <span class="na">for=</span><span class="s">"recommend"</span> <span class="na">name=</span><span class="s">"recommendDisplay"</span><span class="nt">></span>
Recommendation: Yes
<span class="nt"></output></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-6-multi-page-form-with-remote-output">Example 6: Multi-Page Form with Remote Output</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Page 1: Form inputs --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><h1></span>Application Form<span class="nt"></h1></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"applicationForm"</span><span class="nt">></span>
<span class="nt"><h2></span>Personal Information<span class="nt"></h2></span>
<span class="nt"><label></span>Full Name:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"fullName"</span> <span class="na">name=</span><span class="s">"fullName"</span> <span class="na">value=</span><span class="s">"John Smith"</span> <span class="nt">/></span>
<span class="nt"><br/><br/></span>
<span class="nt"><label></span>Email:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">id=</span><span class="s">"email"</span> <span class="na">name=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"john@example.com"</span> <span class="nt">/></span>
<span class="nt"><br/><br/></span>
<span class="nt"><label></span>Phone:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"tel"</span> <span class="na">id=</span><span class="s">"phone"</span> <span class="na">name=</span><span class="s">"phone"</span> <span class="na">value=</span><span class="s">"(555) 123-4567"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"></div></span>
<span class="c"><!-- Page 2: Output summary --></span>
<span class="nt"><div></span>
<span class="nt"><h1></span>Application Summary<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">border=</span><span class="s">"1"</span> <span class="na">cellpadding=</span><span class="s">"10"</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td><strong></span>Applicant Name:<span class="nt"></strong></td></span>
<span class="nt"><td></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"applicationForm"</span> <span class="na">for=</span><span class="s">"fullName"</span><span class="nt">></span>
John Smith
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><strong></span>Contact Email:<span class="nt"></strong></td></span>
<span class="nt"><td></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"applicationForm"</span> <span class="na">for=</span><span class="s">"email"</span><span class="nt">></span>
john@example.com
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><strong></span>Contact Phone:<span class="nt"></strong></td></span>
<span class="nt"><td></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"applicationForm"</span> <span class="na">for=</span><span class="s">"phone"</span><span class="nt">></span>
(555) 123-4567
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-7-shopping-cart-with-totals">Example 7: Shopping Cart with Totals</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>Shopping Cart<span class="nt"></h1></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"cartForm"</span><span class="nt">></span>
<span class="nt"><table</span> <span class="na">border=</span><span class="s">"1"</span> <span class="na">cellpadding=</span><span class="s">"10"</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white;"</span><span class="nt">></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Price<span class="nt"></th></span>
<span class="nt"><th></span>Quantity<span class="nt"></th></span>
<span class="nt"><th></span>Total<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Laptop Computer<span class="nt"></td></span>
<span class="nt"><td></span>$999.00<span class="nt"></td></span>
<span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"laptop_qty"</span> <span class="na">name=</span><span class="s">"laptop_qty"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="nt">/></td></span>
<span class="nt"><td></span>$999.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Wireless Mouse<span class="nt"></td></span>
<span class="nt"><td></span>$29.99<span class="nt"></td></span>
<span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"mouse_qty"</span> <span class="na">name=</span><span class="s">"mouse_qty"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="nt">/></td></span>
<span class="nt"><td></span>$59.98<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>USB Cable<span class="nt"></td></span>
<span class="nt"><td></span>$9.99<span class="nt"></td></span>
<span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"cable_qty"</span> <span class="na">name=</span><span class="s">"cable_qty"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="nt">/></td></span>
<span class="nt"><td></span>$29.97<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></form></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right; margin-top: 20pt; padding: 15pt; background-color: #f9f9f9;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 12pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"cartForm"</span> <span class="na">for=</span><span class="s">"laptop_qty mouse_qty cable_qty"</span> <span class="na">name=</span><span class="s">"itemCount"</span><span class="nt">></span>
Items in cart: 6
<span class="nt"></output></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 12pt; margin-top: 10pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"cartForm"</span> <span class="na">for=</span><span class="s">"laptop_qty mouse_qty cable_qty"</span> <span class="na">name=</span><span class="s">"subtotal"</span><span class="nt">></span>
Subtotal: $1,088.95
<span class="nt"></output></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 12pt; margin-top: 5pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"cartForm"</span> <span class="na">for=</span><span class="s">"subtotal"</span> <span class="na">name=</span><span class="s">"shipping"</span><span class="nt">></span>
Shipping: $15.00
<span class="nt"></output></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 14pt; font-weight: bold; margin-top: 10pt; color: #336699;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"cartForm"</span> <span class="na">for=</span><span class="s">"subtotal shipping"</span> <span class="na">name=</span><span class="s">"grandTotal"</span><span class="nt">></span>
Grand Total: $1,103.95
<span class="nt"></output></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-8-data-bound-form-with-dynamic-output">Example 8: Data-Bound Form with Dynamic Output</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
formId: "paymentForm",
subtotal: 500.00,
taxRate: 0.08,
tax: 40.00,
total: 540.00
} --></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><h2></span>Payment Information<span class="nt"></h2></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"cardNumber"</span> <span class="na">value=</span><span class="s">"**** **** **** 1234"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"cardHolder"</span> <span class="na">value=</span><span class="s">"John Doe"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3></span>Payment Summary<span class="nt"></h3></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">""</span> <span class="na">name=</span><span class="s">"subtotal"</span><span class="nt">></span>
Subtotal: $
<span class="nt"></output></span>
<span class="nt"><br/></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">""</span> <span class="na">name=</span><span class="s">"tax"</span><span class="nt">></span>
Tax (%): $
<span class="nt"></output></span>
<span class="nt"><br/></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">""</span> <span class="na">name=</span><span class="s">"total"</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 14pt;"</span><span class="nt">></span>
Total Due: $
<span class="nt"></output></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-9-registration-form-with-confirmation">Example 9: Registration Form with Confirmation</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>User Registration<span class="nt"></h1></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"registrationForm"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 15pt;"</span><span class="nt">></span>
<span class="nt"><label></span>Username:<span class="nt"></label><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"username"</span> <span class="na">name=</span><span class="s">"username"</span> <span class="na">value=</span><span class="s">"jsmith"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 15pt;"</span><span class="nt">></span>
<span class="nt"><label></span>Email Address:<span class="nt"></label><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">id=</span><span class="s">"email"</span> <span class="na">name=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"jsmith@example.com"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 15pt;"</span><span class="nt">></span>
<span class="nt"><label></span>Account Type:<span class="nt"></label><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"accountType"</span> <span class="na">value=</span><span class="s">"free"</span> <span class="na">checked</span> <span class="nt">/></span> Free
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"accountType"</span> <span class="na">value=</span><span class="s">"premium"</span> <span class="nt">/></span> Premium
<span class="nt"></div></span>
<span class="nt"></form></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 2pt solid #336699; padding: 20pt; margin-top: 30pt; background-color: #e3f2fd;"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"color: #336699;"</span><span class="nt">></span>Registration Confirmation<span class="nt"></h2></span>
<span class="nt"><p></span>Please verify your registration details:<span class="nt"></p></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 5pt;"</span><span class="nt">><strong></span>Username:<span class="nt"></strong></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 5pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"registrationForm"</span> <span class="na">for=</span><span class="s">"username"</span><span class="nt">></span>jsmith<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 5pt;"</span><span class="nt">><strong></span>Email:<span class="nt"></strong></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 5pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"registrationForm"</span> <span class="na">for=</span><span class="s">"email"</span><span class="nt">></span>jsmith@example.com<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 5pt;"</span><span class="nt">><strong></span>Account Type:<span class="nt"></strong></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 5pt;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"registrationForm"</span> <span class="na">for=</span><span class="s">"accountType"</span><span class="nt">></span>Free Account<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-10-financial-calculator">Example 10: Financial Calculator</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>Loan Calculator<span class="nt"></h1></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"loanForm"</span><span class="nt">></span>
<span class="nt"><table</span> <span class="na">border=</span><span class="s">"0"</span> <span class="na">cellpadding=</span><span class="s">"10"</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td><label</span> <span class="na">for=</span><span class="s">"principal"</span><span class="nt">></span>Loan Amount:<span class="nt"></label></td></span>
<span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"principal"</span> <span class="na">name=</span><span class="s">"principal"</span> <span class="na">value=</span><span class="s">"50000"</span> <span class="nt">/></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><label</span> <span class="na">for=</span><span class="s">"rate"</span><span class="nt">></span>Interest Rate (%):<span class="nt"></label></td></span>
<span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"rate"</span> <span class="na">name=</span><span class="s">"rate"</span> <span class="na">value=</span><span class="s">"5.5"</span> <span class="na">step=</span><span class="s">"0.1"</span> <span class="nt">/></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><label</span> <span class="na">for=</span><span class="s">"term"</span><span class="nt">></span>Term (years):<span class="nt"></label></td></span>
<span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"term"</span> <span class="na">name=</span><span class="s">"term"</span> <span class="na">value=</span><span class="s">"15"</span> <span class="nt">/></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></form></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0; padding: 20pt; margin-top: 20pt;"</span><span class="nt">></span>
<span class="nt"><h2></span>Calculation Results<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; font-size: 12pt;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt;"</span><span class="nt">><strong></span>Monthly Payment:<span class="nt"></strong></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; text-align: right;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"loanForm"</span> <span class="na">for=</span><span class="s">"principal rate term"</span> <span class="na">name=</span><span class="s">"monthly"</span><span class="nt">></span>
$407.39
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt;"</span><span class="nt">><strong></span>Total Interest:<span class="nt"></strong></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; text-align: right;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"loanForm"</span> <span class="na">for=</span><span class="s">"principal rate term"</span> <span class="na">name=</span><span class="s">"totalInterest"</span><span class="nt">></span>
$23,330.20
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white; font-weight: bold;"</span><span class="nt">></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt;"</span><span class="nt">><strong></span>Total Amount:<span class="nt"></strong></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; text-align: right;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"loanForm"</span> <span class="na">for=</span><span class="s">"principal totalInterest"</span> <span class="na">name=</span><span class="s">"totalAmount"</span><span class="nt">></span>
$73,330.20
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-11-nested-forms-with-multiple-outputs">Example 11: Nested Forms with Multiple Outputs</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Primary form --></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"primaryForm"</span><span class="nt">></span>
<span class="nt"><h2></span>Primary Information<span class="nt"></h2></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"field1"</span> <span class="na">name=</span><span class="s">"field1"</span> <span class="na">value=</span><span class="s">"Value A"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"field2"</span> <span class="na">name=</span><span class="s">"field2"</span> <span class="na">value=</span><span class="s">"Value B"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="c"><!-- Secondary form --></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"secondaryForm"</span><span class="nt">></span>
<span class="nt"><h2></span>Secondary Information<span class="nt"></h2></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"field3"</span> <span class="na">name=</span><span class="s">"field3"</span> <span class="na">value=</span><span class="s">"Value C"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"field4"</span> <span class="na">name=</span><span class="s">"field4"</span> <span class="na">value=</span><span class="s">"Value D"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="c"><!-- Outputs associated with different forms --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 30pt;"</span><span class="nt">></span>
<span class="nt"><h2></span>Summary<span class="nt"></h2></span>
<span class="nt"><h3></span>Primary Summary<span class="nt"></h3></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"primaryForm"</span> <span class="na">for=</span><span class="s">"field1 field2"</span><span class="nt">></span>
Combined: Value A, Value B
<span class="nt"></output></span>
<span class="nt"><h3></span>Secondary Summary<span class="nt"></h3></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"secondaryForm"</span> <span class="na">for=</span><span class="s">"field3 field4"</span><span class="nt">></span>
Combined: Value C, Value D
<span class="nt"></output></span>
<span class="nt"><h3></span>Overall Summary<span class="nt"></h3></span>
<span class="nt"><p></span>
Primary: <span class="nt"><output</span> <span class="na">form=</span><span class="s">"primaryForm"</span> <span class="na">for=</span><span class="s">"field1"</span><span class="nt">></span>Value A<span class="nt"></output><br/></span>
Secondary: <span class="nt"><output</span> <span class="na">form=</span><span class="s">"secondaryForm"</span> <span class="na">for=</span><span class="s">"field3"</span><span class="nt">></span>Value C<span class="nt"></output></span>
<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-12-conditional-form-association">Example 12: Conditional Form Association</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { isPremium: true } --></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"premiumForm"</span><span class="nt">></span>
<span class="nt"><h2></span>Premium Plan Details<span class="nt"></h2></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"features"</span> <span class="na">value=</span><span class="s">"All features included"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"basicForm"</span><span class="nt">></span>
<span class="nt"><h2></span>Basic Plan Details<span class="nt"></h2></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"features"</span> <span class="na">value=</span><span class="s">"Limited features"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 20pt;"</span><span class="nt">></span>
<span class="nt"><h2></span>Selected Plan<span class="nt"></h2></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">""</span> <span class="na">for=</span><span class="s">"features"</span><span class="nt">></span>
<span class="nt"></output></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-13-report-with-form-filters">Example 13: Report with Form Filters</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><h1></span>Sales Report - Configuration<span class="nt"></h1></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"reportFilters"</span><span class="nt">></span>
<span class="nt"><h2></span>Filter Options<span class="nt"></h2></span>
<span class="nt"><label></span>Region:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"region"</span> <span class="na">name=</span><span class="s">"region"</span> <span class="na">value=</span><span class="s">"North America"</span> <span class="nt">/></span>
<span class="nt"><br/><br/></span>
<span class="nt"><label></span>Quarter:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"quarter"</span> <span class="na">name=</span><span class="s">"quarter"</span> <span class="na">value=</span><span class="s">"Q4 2024"</span> <span class="nt">/></span>
<span class="nt"><br/><br/></span>
<span class="nt"><label></span>Product Category:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"category"</span> <span class="na">name=</span><span class="s">"category"</span> <span class="na">value=</span><span class="s">"Electronics"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h1></span>Sales Report - Results<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #e3f2fd; padding: 15pt; margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3></span>Applied Filters<span class="nt"></h3></span>
<span class="nt"><p></span>
Region: <span class="nt"><output</span> <span class="na">form=</span><span class="s">"reportFilters"</span> <span class="na">for=</span><span class="s">"region"</span><span class="nt">></span>North America<span class="nt"></output><br/></span>
Quarter: <span class="nt"><output</span> <span class="na">form=</span><span class="s">"reportFilters"</span> <span class="na">for=</span><span class="s">"quarter"</span><span class="nt">></span>Q4 2024<span class="nt"></output><br/></span>
Category: <span class="nt"><output</span> <span class="na">form=</span><span class="s">"reportFilters"</span> <span class="na">for=</span><span class="s">"category"</span><span class="nt">></span>Electronics<span class="nt"></output></span>
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><h2></span>Sales Data<span class="nt"></h2></span>
<span class="nt"><p></span>[Report data tables would appear here]<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 40pt; text-align: center; font-size: 10pt; color: #666;"</span><span class="nt">></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"reportFilters"</span> <span class="na">for=</span><span class="s">"region quarter category"</span><span class="nt">></span>
Report generated for North America, Q4 2024, Electronics category
<span class="nt"></output></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-14-multi-step-process-with-form">Example 14: Multi-Step Process with Form</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>Order Process<span class="nt"></h1></span>
<span class="c"><!-- Step 1: Order Form --></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"orderProcess"</span><span class="nt">></span>
<span class="nt"><h2></span>Step 1: Order Details<span class="nt"></h2></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"orderNum"</span> <span class="na">name=</span><span class="s">"orderNum"</span> <span class="na">value=</span><span class="s">"ORD-2024-001"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"customer"</span> <span class="na">name=</span><span class="s">"customer"</span> <span class="na">value=</span><span class="s">"Acme Corporation"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"amount"</span> <span class="na">name=</span><span class="s">"amount"</span> <span class="na">value=</span><span class="s">"1500.00"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="c"><!-- Step 2: Review (uses output elements) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 30pt;"</span><span class="nt">></span>
<span class="nt"><h2></span>Step 2: Review Order<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">border=</span><span class="s">"1"</span> <span class="na">cellpadding=</span><span class="s">"10"</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td><strong></span>Order Number:<span class="nt"></strong></td></span>
<span class="nt"><td><output</span> <span class="na">form=</span><span class="s">"orderProcess"</span> <span class="na">for=</span><span class="s">"orderNum"</span><span class="nt">></span>ORD-2024-001<span class="nt"></output></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><strong></span>Customer:<span class="nt"></strong></td></span>
<span class="nt"><td><output</span> <span class="na">form=</span><span class="s">"orderProcess"</span> <span class="na">for=</span><span class="s">"customer"</span><span class="nt">></span>Acme Corporation<span class="nt"></output></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><strong></span>Amount:<span class="nt"></strong></td></span>
<span class="nt"><td><output</span> <span class="na">form=</span><span class="s">"orderProcess"</span> <span class="na">for=</span><span class="s">"amount"</span><span class="nt">></span>$1,500.00<span class="nt"></output></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="c"><!-- Step 3: Confirmation --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 30pt; background-color: #d4edda; padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h2></span>Step 3: Confirmation<span class="nt"></h2></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"orderProcess"</span> <span class="na">for=</span><span class="s">"orderNum customer amount"</span><span class="nt">></span>
Order ORD-2024-001 for Acme Corporation ($1,500.00) has been processed.
<span class="nt"></output></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-15-complex-report-with-multiple-forms">Example 15: Complex Report with Multiple Forms</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>Financial Analysis Report<span class="nt"></h1></span>
<span class="c"><!-- Revenue Form --></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"revenueForm"</span><span class="nt">></span>
<span class="nt"><h2></span>Revenue Data<span class="nt"></h2></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"q1rev"</span> <span class="na">name=</span><span class="s">"q1rev"</span> <span class="na">value=</span><span class="s">"125000"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"q2rev"</span> <span class="na">name=</span><span class="s">"q2rev"</span> <span class="na">value=</span><span class="s">"145000"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"q3rev"</span> <span class="na">name=</span><span class="s">"q3rev"</span> <span class="na">value=</span><span class="s">"138000"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"q4rev"</span> <span class="na">name=</span><span class="s">"q4rev"</span> <span class="na">value=</span><span class="s">"155000"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="c"><!-- Expenses Form --></span>
<span class="nt"><form</span> <span class="na">id=</span><span class="s">"expenseForm"</span><span class="nt">></span>
<span class="nt"><h2></span>Expense Data<span class="nt"></h2></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"q1exp"</span> <span class="na">name=</span><span class="s">"q1exp"</span> <span class="na">value=</span><span class="s">"85000"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"q2exp"</span> <span class="na">name=</span><span class="s">"q2exp"</span> <span class="na">value=</span><span class="s">"95000"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"q3exp"</span> <span class="na">name=</span><span class="s">"q3exp"</span> <span class="na">value=</span><span class="s">"92000"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">id=</span><span class="s">"q4exp"</span> <span class="na">name=</span><span class="s">"q4exp"</span> <span class="na">value=</span><span class="s">"98000"</span> <span class="nt">/></span>
<span class="nt"></form></span>
<span class="c"><!-- Analysis Results --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 40pt;"</span><span class="nt">></span>
<span class="nt"><h2></span>Annual Summary<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">border=</span><span class="s">"1"</span> <span class="na">cellpadding=</span><span class="s">"10"</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white;"</span><span class="nt">></span>
<span class="nt"><th></span>Category<span class="nt"></th></span>
<span class="nt"><th></span>Total<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><strong></span>Total Revenue<span class="nt"></strong></td></span>
<span class="nt"><td></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"revenueForm"</span> <span class="na">for=</span><span class="s">"q1rev q2rev q3rev q4rev"</span> <span class="na">style=</span><span class="s">"font-family: monospace;"</span><span class="nt">></span>
$563,000
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><strong></span>Total Expenses<span class="nt"></strong></td></span>
<span class="nt"><td></span>
<span class="nt"><output</span> <span class="na">form=</span><span class="s">"expenseForm"</span> <span class="na">for=</span><span class="s">"q1exp q2exp q3exp q4exp"</span> <span class="na">style=</span><span class="s">"font-family: monospace;"</span><span class="nt">></span>
$370,000
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #e3f2fd; font-weight: bold;"</span><span class="nt">></span>
<span class="nt"><td><strong></span>Net Profit<span class="nt"></strong></td></span>
<span class="nt"><td></span>
<span class="nt"><output</span> <span class="na">for=</span><span class="s">"q1rev q2rev q3rev q4rev q1exp q2exp q3exp q4exp"</span>
<span class="na">style=</span><span class="s">"font-family: monospace; color: #336699;"</span><span class="nt">></span>
$193,000
<span class="nt"></output></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/output.html">output element</a> - The output HTML element</li>
<li><a href="/reference/htmltags/form.html">form element</a> - The form HTML element</li>
<li><a href="/reference/htmlattributes/for.html">for attribute</a> - Associates output with form controls</li>
<li><a href="/reference/htmlattributes/val.html">val attribute</a> - Output value attribute</li>
<li><a href="/reference/htmlattributes/name.html">name attribute</a> - Names form elements</li>
<li><a href="/reference/htmlattributes/id.html">id attribute</a> - Unique identifier</li>
<li><a href="/reference/binding/">Data Binding</a> - Dynamic data binding</li>
<li><a href="/reference/forms/">HTML Forms</a> - Complete form reference</li>
</ul>
<hr />
</p>
</section>
</template>
Data Model Example:
{
"isHidden": false,
"userRole": "admin",
"isDraft": false,
"isArchived": false,
"optionalText": "Some text",
"items": [
{ "name": "Item 1" },
{ "name": "Item 2" }
],
"sections": [
{
"title": "Section 1",
"content": "Content",
"includeInReport": true
},
{
"title": "Section 2",
"content": "Draft content",
"includeInReport": false
}
]
}
Notes
Hidden vs Display None
The hidden attribute in Scryber works similarly to display: none in CSS:
- Element is completely removed from layout
- Does not take up any space
- Child elements are also hidden
- Element does not appear in the PDF output
<!-- These are functionally equivalent -->
<div hidden="hidden">Content</div>
<div style="display: none;">Content</div>
Attribute Values
The hidden attribute recognizes these values:
hidden="hidden"- Element is hiddenhidden=""- Element is visible (empty value)- Attribute omitted - Element is visible (default)
<!-- Hidden -->
<div hidden="hidden">Hidden</div>
<!-- Visible -->
<div hidden="">Visible</div>
<div>Visible (no attribute)</div>
Boolean Logic in Data Binding
Use boolean expressions to control visibility dynamically:
<!-- Show if true -->
<div hidden="">
Content shown when showContent is true
</div>
<!-- Hide if true -->
<div hidden="">
Content hidden when hideContent is true
</div>
<!-- Complex conditions -->
<div hidden="">
Only shown when published AND approved
</div>
Hiding Table Rows and Cells
You can conditionally hide table rows, cells, and other table elements:
<table>
<tr>
<th>Name</th>
<th>Status</th>
<th hidden="">Details</th>
</tr>
<template data-bind="">
<tr hidden="">
<td></td>
<td></td>
<td hidden=""></td>
</tr>
</template>
</table>
Hiding vs Conditional Rendering
There are two approaches to conditional content:
1. Using hidden attribute:
<div hidden="">
Content always in source, conditionally rendered
</div>
2. Using conditional template logic (if available):
<!-- Some templating systems support conditional blocks -->
<!-- Check Scryber's template documentation for specific syntax -->
The hidden attribute is simpler and works consistently across all elements.
Performance Considerations
Hidden elements:
- Are still parsed and processed
- Don’t consume space in the final layout
- Are excluded from the PDF output
- Don’t significantly impact performance
For large documents with many conditionally hidden sections, this is generally efficient.
Debugging Hidden Content
When debugging, temporarily remove hidden attributes to see all content:
<!-- During development, comment out hidden to see all content -->
<!-- <div hidden="hidden"> -->
<div>
Debug content - normally hidden
</div>
Hiding Entire Sections
You can hide large document sections including all nested content:
<section hidden="">
<h1>Draft Section</h1>
<p>This entire section and all its contents will be hidden...</p>
<div>
<h2>Subsection</h2>
<p>All nested elements are hidden too</p>
</div>
</section>
Examples
Basic Visibility Control
<!-- Always visible -->
<p>This paragraph is always visible</p>
<!-- Always hidden -->
<p hidden="hidden">This paragraph is never shown</p>
<!-- Conditionally visible -->
<p hidden="">This paragraph is visible (empty value)</p>
Conditional Content Based on User Role
<!-- Model: { user: { role: "admin" } } -->
<div>
<h1>Dashboard</h1>
<!-- Visible to everyone -->
<section>
<h2>Overview</h2>
<p>General information visible to all users</p>
</section>
<!-- Admin-only section -->
<section hidden="">
<h2>Administration</h2>
<p>This section is only visible to administrators</p>
</section>
<!-- Non-admin section -->
<section hidden="">
<h2>Standard User Information</h2>
<p>This section is hidden for administrators</p>
</section>
</div>
Show/Hide Based on Data Presence
<!-- Model: { orderNotes: "", specialInstructions: "Handle with care" } -->
<div>
<h2>Order Information</h2>
<!-- Hidden when orderNotes is empty -->
<div hidden="">
<h3>Order Notes</h3>
<p></p>
</div>
<!-- Hidden when specialInstructions is empty -->
<div hidden="">
<h3>Special Instructions</h3>
<p></p>
</div>
</div>
Conditional Report Sections
<!-- Model: { report: { includeExecutiveSummary: true, includeAppendix: false } } -->
<div>
<h1>Annual Report</h1>
<section hidden="">
<h2>Executive Summary</h2>
<p>High-level overview of the report...</p>
</section>
<section>
<h2>Main Content</h2>
<p>Always included...</p>
</section>
<section hidden="">
<h2>Appendix</h2>
<p>Additional reference materials...</p>
</section>
</div>
Hiding Table Columns
<!-- Model: { showPricing: true, showStock: false } -->
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="border: 1pt solid #ccc; padding: 8pt;">Product</th>
<th style="border: 1pt solid #ccc; padding: 8pt;"
hidden="">
Price
</th>
<th style="border: 1pt solid #ccc; padding: 8pt;"
hidden="">
Stock
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1pt solid #ccc; padding: 8pt;">Widget A</td>
<td style="border: 1pt solid #ccc; padding: 8pt;"
hidden="">
$25.00
</td>
<td style="border: 1pt solid #ccc; padding: 8pt;"
hidden="">
150
</td>
</tr>
<tr>
<td style="border: 1pt solid #ccc; padding: 8pt;">Widget B</td>
<td style="border: 1pt solid #ccc; padding: 8pt;"
hidden="">
$35.00
</td>
<td style="border: 1pt solid #ccc; padding: 8pt;"
hidden="">
200
</td>
</tr>
</tbody>
</table>
Conditional Warning Messages
<!-- Model: { hasErrors: true, hasWarnings: false, hasInfo: true } -->
<div>
<h2>Status Messages</h2>
<div hidden=""
style="padding: 10pt; background-color: #f8d7da;
border: 1pt solid #f5c6cb; color: #721c24; margin-bottom: 10pt;">
<strong>Error:</strong> There are errors that need attention.
</div>
<div hidden=""
style="padding: 10pt; background-color: #fff3cd;
border: 1pt solid #ffeeba; color: #856404; margin-bottom: 10pt;">
<strong>Warning:</strong> Please review the warnings.
</div>
<div hidden=""
style="padding: 10pt; background-color: #d1ecf1;
border: 1pt solid #bee5eb; color: #0c5460;">
<strong>Info:</strong> Additional information is available.
</div>
</div>
Hiding List Items
<!-- Model: { tasks: [{name: "Task 1", completed: true}, {name: "Task 2", completed: false}] } -->
<div>
<h2>Active Tasks</h2>
<ul>
<template data-bind="">
<!-- Only show incomplete tasks -->
<li hidden="">
</li>
</template>
</ul>
<h2>Completed Tasks</h2>
<ul>
<template data-bind="">
<!-- Only show completed tasks -->
<li hidden="">
</li>
</template>
</ul>
</div>
Draft vs Final Document
<!-- Model: { documentMode: "final" } -->
<div>
<h1>Document Title</h1>
<!-- Draft watermark -->
<div hidden=""
style="position: fixed; top: 50%; left: 50%; transform: rotate(-45deg);
font-size: 72pt; color: rgba(255, 0, 0, 0.2);
z-index: -1;">
DRAFT
</div>
<!-- Draft notes section -->
<section hidden=""
style="background-color: #fff3cd; padding: 15pt; border: 2pt solid #ffc107;">
<h2>Draft Notes</h2>
<p>This section contains notes for reviewers and will not appear in the final version.</p>
</section>
<!-- Main content -->
<section>
<h2>Main Content</h2>
<p>This content appears in both draft and final versions.</p>
</section>
</div>
Conditional Page Sections
<!-- Model: { includeTableOfContents: true, includeCoverPage: true, includeIndex: false } -->
<!DOCTYPE html>
<html>
<body>
<!-- Cover page -->
<div hidden="">
<div style="text-align: center; padding-top: 200pt;">
<h1 style="font-size: 36pt;">Document Title</h1>
<p style="font-size: 18pt;">Subtitle</p>
</div>
<div style="page-break-after: always;"></div>
</div>
<!-- Table of contents -->
<div hidden="">
<h1>Table of Contents</h1>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
<div style="page-break-after: always;"></div>
</div>
<!-- Main content -->
<section id="section1">
<h1>Section 1</h1>
<p>Content...</p>
</section>
<section id="section2">
<h1>Section 2</h1>
<p>Content...</p>
</section>
<!-- Index -->
<div hidden="">
<div style="page-break-before: always;"></div>
<h1>Index</h1>
<p>Index entries...</p>
</div>
</body>
</html>
Hiding Sensitive Information
<!-- Model: { user: { clearanceLevel: 2 }, document: { classificationLevel: 1 } } -->
<div>
<h1>Report</h1>
<!-- Public information (clearance 0) -->
<section>
<h2>Public Summary</h2>
<p>This information is available to everyone.</p>
</section>
<!-- Confidential (clearance 1) -->
<section hidden="">
<h2>Confidential Details</h2>
<p>This section requires clearance level 1 or higher.</p>
</section>
<!-- Secret (clearance 2) -->
<section hidden="">
<h2>Secret Information</h2>
<p>This section requires clearance level 2 or higher.</p>
</section>
<!-- Top Secret (clearance 3) -->
<section hidden="">
<h2>Top Secret</h2>
<p>This section requires clearance level 3.</p>
</section>
</div>
Conditional Graphics and Images
<!-- Model: { includeCharts: true, includePhotos: false } -->
<div>
<h2>Data Analysis</h2>
<p>Analysis summary text...</p>
<!-- Charts section -->
<div hidden="">
<h3>Charts and Graphs</h3>
<img src="chart1.png" style="width: 400pt; height: 300pt;" />
<img src="chart2.png" style="width: 400pt; height: 300pt;" />
</div>
<!-- Photos section -->
<div hidden="">
<h3>Photographs</h3>
<img src="photo1.jpg" style="width: 300pt; height: 200pt;" />
<img src="photo2.jpg" style="width: 300pt; height: 200pt;" />
</div>
</div>
Dynamic Form Sections
<!-- Model: { formType: "business", includeShipping: true } -->
<div>
<h2>Registration Form</h2>
<!-- Always visible -->
<div>
<h3>Basic Information</h3>
<p>Name: [field]</p>
<p>Email: [field]</p>
</div>
<!-- Only for business forms -->
<div hidden="">
<h3>Business Information</h3>
<p>Company Name: [field]</p>
<p>Tax ID: [field]</p>
</div>
<!-- Only for personal forms -->
<div hidden="">
<h3>Personal Information</h3>
<p>Date of Birth: [field]</p>
</div>
<!-- Conditional shipping -->
<div hidden="">
<h3>Shipping Address</h3>
<p>Address: [field]</p>
<p>City: [field]</p>
<p>Postal Code: [field]</p>
</div>
</div>
Hiding Empty Sections
<!-- Model: { notes: "", recommendations: "Follow up in 30 days", attachments: [] } -->
<div>
<h2>Report Details</h2>
<!-- Only show if notes exist -->
<div hidden="">
<h3>Notes</h3>
<p></p>
</div>
<!-- Only show if recommendations exist -->
<div hidden="">
<h3>Recommendations</h3>
<p></p>
</div>
<!-- Only show if attachments exist -->
<div hidden="">
<h3>Attachments</h3>
<ul>
<template data-bind="">
<li></li>
</template>
</ul>
</div>
</div>
Multi-Language Documents
<!-- Model: { language: "en" } -->
<div>
<!-- English version -->
<div hidden="">
<h1>Welcome</h1>
<p>This is the English version of the document.</p>
</div>
<!-- French version -->
<div hidden="">
<h1>Bienvenue</h1>
<p>Ceci est la version française du document.</p>
</div>
<!-- Spanish version -->
<div hidden="">
<h1>Bienvenido</h1>
<p>Esta es la versión en español del documento.</p>
</div>
</div>
Conditional Footer Information
<!-- Model: { includeConfidential: true, includePageNumbers: true, documentVersion: "1.2" } -->
<footer style="position: fixed; bottom: 0; width: 100%; padding: 10pt;
border-top: 1pt solid #ccc; font-size: 9pt;">
<div style="display: flex; justify-content: space-between;">
<span hidden=""
style="color: red; font-weight: bold;">
CONFIDENTIAL
</span>
<span>Document v</span>
<span hidden="">
Page [page-number]
</span>
</div>
</footer>
Status-Based Content
<!-- Model: { order: { status: "shipped", trackingNumber: "123456" } } -->
<div>
<h2>Order Status</h2>
<div hidden="">
<p style="color: #ffc107;">Your order is pending confirmation.</p>
</div>
<div hidden="">
<p style="color: #336699;">Your order is being processed.</p>
</div>
<div hidden="">
<p style="color: #28a745;">Your order has been shipped!</p>
<p>Tracking number: </p>
</div>
<div hidden="">
<p style="color: #28a745; font-weight: bold;">Your order has been delivered.</p>
</div>
<div hidden="">
<p style="color: #dc3545;">Your order has been cancelled.</p>
</div>
</div>
See Also
- id - Unique identifier attribute
- class - CSS class attribute
- style - Inline CSS styling (including display property)
- Data Binding - Dynamic data binding and expressions
- template - Template element for repeating content
- Conditional Rendering - Conditional content patterns