@open : The Details Open State Attribute
The open attribute specifies whether a <details> element should be expanded (open) or collapsed (closed) by default. As a boolean attribute, its presence indicates the element is open, while its absence means closed. This enables creation of expandable/collapsible content sections in PDF documents, though PDF support for interactive elements is limited.
Usage
The open attribute controls disclosure widget state:
- Boolean attribute (presence = open, absence = closed)
- Used exclusively with
<details>element - Determines initial expanded/collapsed state
- No value required (presence is sufficient)
- In PDF context, typically renders content as expanded
- Supports data binding for dynamic state control
<!-- Open/expanded by default -->
<details open>
<summary>Click to collapse</summary>
<p>This content is visible by default.</p>
</details>
<!-- Closed/collapsed by default -->
<details>
<summary>Click to expand</summary>
<p>This content is hidden by default.</p>
</details>
<!-- Boolean attribute - these are equivalent -->
<details open>Expanded</details>
<details open="">Expanded</details>
<details open="open">Expanded</details>
<!-- Dynamic open state -->
<details open="">
<summary></summary>
<p></p>
</details>
Supported Elements
The open attribute is used exclusively with:
Details Element
<details>- Disclosure widget (only element that uses open)
Binding Values
The open attribute supports data binding for dynamic state control:
<!-- Dynamic open state from model -->
<details open="">
<summary>Section Title</summary>
<p>Section content</p>
</details>
<!-- Conditional open -->
<details open="">
<summary></summary>
<div></div>
</details>
<!-- Repeating details with different states -->
<template data-bind="">
<details open="">
<summary></summary>
<div><h1 id="name--the-name-attribute">@name : The Name Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">name</code> attribute provides an identifier for form input fields. It serves as a semantic label for the field and is used for grouping related inputs (like radio buttons). While PDFs generated by Scryber are static and don’t submit form data, the <code class="language-plaintext highlighter-rouge">name</code> attribute is still useful for organization, documentation, and potential future interactive form support.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">name</code> attribute identifies form fields and:</p>
<ul>
<li>Provides a semantic identifier for the input field</li>
<li>Groups radio buttons together so only one can be selected</li>
<li>Documents field purposes for code readability</li>
<li>Can be used for internal references and organization</li>
<li>Auto-generated if not specified (for PDF form field metadata)</li>
<li>Supports data binding for dynamic names</li>
<li>Essential for radio button groups</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Named text input --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"customerName"</span> <span class="na">value=</span><span class="s">"John Doe"</span> <span class="nt">/></span>
<span class="c"><!-- Radio button group with shared name --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"paymentMethod"</span> <span class="na">value=</span><span class="s">"selected"</span> <span class="nt">/></span>
<span class="nt"><label></span>Credit Card<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"paymentMethod"</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><label></span>PayPal<span class="nt"></label></span>
<span class="c"><!-- Checkbox with name --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"agreeTerms"</span> <span class="na">value=</span><span class="s">"checked"</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">name</code> attribute is supported by the following elements:</p>
<table>
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge"><input></code></td>
<td>Form input field element - all types</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge"><select></code></td>
<td>Dropdown selection element (if supported)</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge"><textarea></code></td>
<td>Multi-line text area element (if supported)</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="name-attribute-behavior">Name Attribute Behavior</h2>
<h3 id="for-text-based-inputs">For Text-Based Inputs</h3>
<p>The name provides an identifier for the field:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"firstName"</span> <span class="na">value=</span><span class="s">"John"</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"><input</span> <span class="na">type=</span><span class="s">"tel"</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>
</code></pre></div></div>
<p><strong>Purpose</strong>: Documents the field’s purpose and provides metadata for the PDF form field.</p>
<h3 id="for-radio-button-groups">For Radio Button Groups</h3>
<p>The name groups radio buttons together:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Only one radio with name="gender" can be selected --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gender"</span> <span class="na">value=</span><span class="s">"selected"</span> <span class="nt">/></span>
<span class="nt"><label></span>Male<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gender"</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><label></span>Female<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gender"</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><label></span>Other<span class="nt"></label></span>
</code></pre></div></div>
<p><strong>Behavior</strong>: All radio buttons with the same <code class="language-plaintext highlighter-rouge">name</code> are treated as a group. In the visual representation, only one can appear selected.</p>
<h3 id="for-checkboxes">For Checkboxes</h3>
<p>Each checkbox typically has a unique name:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"emailNotifications"</span> <span class="na">value=</span><span class="s">"checked"</span> <span class="nt">/></span>
<span class="nt"><label></span>Email notifications<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"smsAlerts"</span> <span class="na">value=</span><span class="s">"checked"</span> <span class="nt">/></span>
<span class="nt"><label></span>SMS alerts<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"newsletter"</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><label></span>Newsletter<span class="nt"></label></span>
</code></pre></div></div>
<p><strong>Purpose</strong>: Identifies each checkbox independently for documentation and organization.</p>
<h3 id="auto-generated-names">Auto-Generated Names</h3>
<p>If no name is specified, Scryber auto-generates one:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- No name specified --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"Auto-named field"</span> <span class="nt">/></span>
<span class="c"><!-- Scryber generates something like "input_1", "input_2", etc. --></span>
</code></pre></div></div>
<p><strong>Best Practice</strong>: Always specify meaningful names for better code organization and documentation.</p>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">name</code> attribute can be set statically or dynamically:</p>
<h3 id="static-name">Static Name</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"customerName"</span> <span class="na">value=</span><span class="s">"John Doe"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="dynamic-name-with-data-binding">Dynamic Name with Data Binding</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { fieldName: "customerEmail" } --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">""</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="conditional-name">Conditional Name</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { isPrimary: true } --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span>
<span class="na">name=</span><span class="s">""</span>
<span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="name-in-repeating-templates">Name in Repeating Templates</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { fields: [{id: "field1", value: "Value 1"}, ...] } --></span>
<span class="nt"><template</span> <span class="na">data-bind=</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">""</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
</code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="radio-button-grouping">Radio Button Grouping</h3>
<p>Radio buttons with the same <code class="language-plaintext highlighter-rouge">name</code> form a group:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Payment method group --></span>
<span class="nt"><div></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"payment"</span> <span class="na">value=</span><span class="s">"selected"</span> <span class="nt">/></span>
<span class="nt"><label></span>Credit Card<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"payment"</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><label></span>PayPal<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"payment"</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><label></span>Bank Transfer<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="c"><!-- Shipping method group (different name) --></span>
<span class="nt"><div></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"shipping"</span> <span class="na">value=</span><span class="s">"selected"</span> <span class="nt">/></span>
<span class="nt"><label></span>Standard<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"shipping"</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><label></span>Express<span class="nt"></label></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p><strong>Important</strong>: Different groups must have different names.</p>
<h3 id="name-uniqueness">Name Uniqueness</h3>
<p>For most input types, names should be unique within the form:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Good: Unique names --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"firstName"</span> <span class="na">value=</span><span class="s">"John"</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">"lastName"</span> <span class="na">value=</span><span class="s">"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="c"><!-- Avoid: Duplicate names (except for radio groups) --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</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"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"jane@example.com"</span> <span class="nt">/></span>
</code></pre></div></div>
<p><strong>Exception</strong>: Radio buttons in the same group intentionally share a name.</p>
<h3 id="name-conventions">Name Conventions</h3>
<p>Use clear, descriptive names following common conventions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- camelCase --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"firstName"</span> <span class="na">value=</span><span class="s">"John"</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">"lastName"</span> <span class="na">value=</span><span class="s">"Doe"</span> <span class="nt">/></span>
<span class="c"><!-- snake_case --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"first_name"</span> <span class="na">value=</span><span class="s">"John"</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">"last_name"</span> <span class="na">value=</span><span class="s">"Doe"</span> <span class="nt">/></span>
<span class="c"><!-- kebab-case --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"first-name"</span> <span class="na">value=</span><span class="s">"John"</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">"last-name"</span> <span class="na">value=</span><span class="s">"Doe"</span> <span class="nt">/></span>
<span class="c"><!-- PascalCase --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"FirstName"</span> <span class="na">value=</span><span class="s">"John"</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">"LastName"</span> <span class="na">value=</span><span class="s">"Doe"</span> <span class="nt">/></span>
</code></pre></div></div>
<p><strong>Best Practice</strong>: Choose one convention and use it consistently throughout your document.</p>
<h3 id="name-vs-id">Name vs. ID</h3>
<p>The <code class="language-plaintext highlighter-rouge">name</code> and <code class="language-plaintext highlighter-rouge">id</code> attributes serve different purposes:</p>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Purpose</th>
<th>Uniqueness</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">name</code></td>
<td>Field identifier for grouping and data</td>
<td>Unique per field (except radio groups)</td>
<td>Form field identification</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">id</code></td>
<td>Element identifier for styling and references</td>
<td>Must be unique per document</td>
<td>CSS selectors, label <code class="language-plaintext highlighter-rouge">for</code> attribute</td>
</tr>
</tbody>
</table>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Both name and id --></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-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="c"><!-- Label references id, not name --></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"customer-email"</span><span class="nt">></span>Email:<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">"customer-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>
</code></pre></div></div>
<h3 id="name-and-pdf-form-fields">Name and PDF Form Fields</h3>
<p>In the generated PDF, the <code class="language-plaintext highlighter-rouge">name</code> attribute becomes metadata for the form field:</p>
<ul>
<li>Used internally by Scryber for field identification</li>
<li>May appear in PDF form field properties</li>
<li>Helps with debugging and document inspection</li>
<li>Not visible to end users viewing the PDF</li>
</ul>
<h3 id="empty-or-missing-names">Empty or Missing Names</h3>
<p>If no name is provided:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- No name attribute --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"Unnamed field"</span> <span class="nt">/></span>
</code></pre></div></div>
<p><strong>Behavior</strong>:</p>
<ul>
<li>Scryber auto-generates a name (e.g., “input_1”, “input_2”)</li>
<li>Field still renders correctly in PDF</li>
<li>Less readable code and harder to maintain</li>
</ul>
<p><strong>Recommendation</strong>: Always provide meaningful names.</p>
<h3 id="names-with-special-characters">Names with Special Characters</h3>
<p>Names can contain letters, numbers, hyphens, and underscores:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Valid names --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"customer_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">"text"</span> <span class="na">name=</span><span class="s">"email-address"</span> <span class="na">value=</span><span class="s">"john@example.com"</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">"field123"</span> <span class="na">value=</span><span class="s">"Value"</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">"Field_123_ABC"</span> <span class="na">value=</span><span class="s">"Value"</span> <span class="nt">/></span>
<span class="c"><!-- Avoid spaces and special characters --></span>
<span class="c"><!-- Not recommended --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"customer 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">"text"</span> <span class="na">name=</span><span class="s">"email@address"</span> <span class="na">value=</span><span class="s">"john@example.com"</span> <span class="nt">/></span>
</code></pre></div></div>
<p><strong>Best Practice</strong>: Use only letters, numbers, hyphens, and underscores.</p>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-named-inputs">Basic Named Inputs</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Personal information form --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 10pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 120pt; font-weight: bold;"</span><span class="nt">></span>
First Name:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"firstName"</span> <span class="na">value=</span><span class="s">"John"</span>
<span class="na">style=</span><span class="s">"width: 200pt; padding: 6pt; border: 1pt solid #cccccc;"</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: 10pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 120pt; font-weight: bold;"</span><span class="nt">></span>
Last Name:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"lastName"</span> <span class="na">value=</span><span class="s">"Doe"</span>
<span class="na">style=</span><span class="s">"width: 200pt; padding: 6pt; border: 1pt solid #cccccc;"</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: 10pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 120pt; font-weight: bold;"</span><span class="nt">></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">name=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"john.doe@example.com"</span>
<span class="na">style=</span><span class="s">"width: 300pt; padding: 6pt; border: 1pt solid #cccccc;"</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: 10pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 120pt; font-weight: bold;"</span><span class="nt">></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">name=</span><span class="s">"phone"</span> <span class="na">value=</span><span class="s">"(555) 123-4567"</span>
<span class="na">style=</span><span class="s">"width: 180pt; padding: 6pt; border: 1pt solid #cccccc;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="radio-button-groups">Radio Button Groups</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Gender selection --></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> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
Gender:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gender"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Male<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gender"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Female<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gender"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Other<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gender"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Prefer not to say<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Payment method selection --></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> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
Payment Method:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"paymentMethod"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Credit Card<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"paymentMethod"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>PayPal<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"paymentMethod"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Bank Transfer<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"paymentMethod"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Cash on Delivery<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Shipping speed selection --></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> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
Shipping Speed:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"shippingSpeed"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Standard (5-7 days) - Free<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"shippingSpeed"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Express (2-3 days) - $9.99<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"shippingSpeed"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Overnight (1 day) - $24.99<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="named-checkboxes">Named Checkboxes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Preferences with individual names --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 15pt; border: 1pt solid #e0e0e0; background-color: #f9f9f9;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 10pt;"</span><span class="nt">></span>
Communication Preferences:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"emailNotifications"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Email notifications<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"smsAlerts"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>SMS alerts<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"pushNotifications"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Push notifications<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"newsletter"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Weekly newsletter<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"marketingEmails"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Marketing emails<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"productUpdates"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Product updates<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="form-with-name-and-id-attributes">Form with Name and ID Attributes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.form-row</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.form-label</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#333333</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.form-input</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#cccccc</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">3pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"user-fullname"</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></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">"user-fullname"</span> <span class="na">name=</span><span class="s">"fullName"</span> <span class="na">value=</span><span class="s">"Alice Johnson"</span>
<span class="na">class=</span><span class="s">"form-input"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"user-email"</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Email Address:<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">"user-email"</span> <span class="na">name=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"alice.johnson@email.com"</span>
<span class="na">class=</span><span class="s">"form-input"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"user-phone"</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Phone Number:<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">"user-phone"</span> <span class="na">name=</span><span class="s">"phone"</span> <span class="na">value=</span><span class="s">"(555) 987-6543"</span>
<span class="na">class=</span><span class="s">"form-input"</span> <span class="na">style=</span><span class="s">"width: 250pt;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"user-address"</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Address:<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">"user-address"</span> <span class="na">name=</span><span class="s">"address"</span>
<span class="na">value=</span><span class="s">"123 Main Street, Apartment 4B"</span>
<span class="na">class=</span><span class="s">"form-input"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"user-comments"</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Comments:<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">"user-comments"</span> <span class="na">name=</span><span class="s">"comments"</span>
<span class="na">value=</span><span class="s">"Please deliver between 9 AM and 5 PM."</span>
<span class="na">options=</span><span class="s">"MultiLine"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 80pt; padding: 10pt;
border: 1pt solid #cccccc; font-size: 10pt;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="survey-form-with-named-fields">Survey Form with Named Fields</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2</span> <span class="na">style=</span><span class="s">"color: #336699;"</span><span class="nt">></span>Customer Feedback Survey<span class="nt"></h2></span>
<span class="c"><!-- Question 1: Text input --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
1. What is your name?
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"respondentName"</span> <span class="na">value=</span><span class="s">"Michael Chen"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="c"><!-- Question 2: Email input --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
2. What is your email address?
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">name=</span><span class="s">"respondentEmail"</span> <span class="na">value=</span><span class="s">"michael.chen@email.com"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="c"><!-- Question 3: Radio group --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
3. How satisfied are you with our product?
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"satisfactionLevel"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Very Satisfied<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"satisfactionLevel"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Satisfied<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"satisfactionLevel"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Neutral<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"satisfactionLevel"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Dissatisfied<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"satisfactionLevel"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Very Dissatisfied<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Question 4: Checkboxes --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
4. Which features do you use? (Select all that apply)
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"featureDashboard"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Dashboard<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"featureReporting"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Reporting<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"featureAnalytics"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Analytics<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"featureAPI"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>API Integration<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"featureMobile"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Mobile App<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Question 5: Number input --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
5. How many years have you been a customer?
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">name=</span><span class="s">"yearsAsCustomer"</span> <span class="na">value=</span><span class="s">"3"</span>
<span class="na">style=</span><span class="s">"width: 100pt; padding: 8pt; border: 1pt solid #cccccc;
text-align: center; font-size: 14pt;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="c"><!-- Question 6: Text area --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
6. What improvements would you suggest?
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"suggestions"</span>
<span class="na">value=</span><span class="s">"I would love to see better mobile app integration and more customizable dashboard widgets."</span>
<span class="na">options=</span><span class="s">"MultiLine"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 100pt; padding: 10pt;
border: 1pt solid #cccccc; font-size: 10pt;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="c"><!-- Question 7: Radio group --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
7. Would you recommend us to others?
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"recommendUs"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Yes, definitely<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"recommendUs"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Maybe<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"recommendUs"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Probably not<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="data-bound-names">Data-Bound Names</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
fields: [
{name: "firstName", label: "First Name", value: "Sarah"},
{name: "lastName", label: "Last Name", value: "Williams"},
{name: "email", label: "Email", value: "sarah.w@email.com"}
]
} --></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"color: #336699;"</span><span class="nt">></span>Dynamic Form Fields<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">""</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="registration-form-with-organized-names">Registration Form with Organized Names</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2</span> <span class="na">style=</span><span class="s">"color: #336699; border-bottom: 3pt solid #336699; padding-bottom: 10pt;"</span><span class="nt">></span>
New User Registration
<span class="nt"></h2></span>
<span class="c"><!-- Personal Information Section --></span>
<span class="nt"><fieldset</span> <span class="na">style=</span><span class="s">"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><legend</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"</span><span class="nt">></span>
Personal Information
<span class="nt"></legend></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></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">name=</span><span class="s">"personalFullName"</span> <span class="na">value=</span><span class="s">"Jennifer Martinez"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"</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: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
Date of Birth:
<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">"personalDOB"</span> <span class="na">value=</span><span class="s">"1990-05-15"</span>
<span class="na">style=</span><span class="s">"width: 180pt; padding: 8pt; border: 1pt solid #cccccc;"</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: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
Gender:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-right: 25pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"personalGender"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Male<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-right: 25pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"personalGender"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Female<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"personalGender"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Other<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></fieldset></span>
<span class="c"><!-- Contact Information Section --></span>
<span class="nt"><fieldset</span> <span class="na">style=</span><span class="s">"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><legend</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"</span><span class="nt">></span>
Contact Information
<span class="nt"></legend></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
Email Address:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">name=</span><span class="s">"contactEmail"</span> <span class="na">value=</span><span class="s">"jennifer.m@email.com"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"</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: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
Phone Number:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"tel"</span> <span class="na">name=</span><span class="s">"contactPhone"</span> <span class="na">value=</span><span class="s">"(555) 234-5678"</span>
<span class="na">style=</span><span class="s">"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;"</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: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
Address:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"contactAddress"</span> <span class="na">value=</span><span class="s">"789 Oak Avenue"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"</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: 12pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 48%; margin-right: 2%;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
City:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"contactCity"</span> <span class="na">value=</span><span class="s">"Portland"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 24%; margin-right: 2%;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
State:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"contactState"</span> <span class="na">value=</span><span class="s">"OR"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
text-align: center;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 24%;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
ZIP Code:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"contactZIP"</span> <span class="na">value=</span><span class="s">"97201"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
text-align: center;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
Preferred Contact Method:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"contactPreferredMethod"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Email<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"contactPreferredMethod"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Phone<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"contactPreferredMethod"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Mail<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></fieldset></span>
<span class="c"><!-- Account Settings Section --></span>
<span class="nt"><fieldset</span> <span class="na">style=</span><span class="s">"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><legend</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"</span><span class="nt">></span>
Account Settings
<span class="nt"></legend></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
Username:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"accountUsername"</span> <span class="na">value=</span><span class="s">"jmartinez2024"</span>
<span class="na">style=</span><span class="s">"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;
font-family: monospace;"</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: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
Password:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">name=</span><span class="s">"accountPassword"</span> <span class="na">value=</span><span class="s">"••••••••••"</span>
<span class="na">style=</span><span class="s">"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;
font-family: monospace;"</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: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 8pt;"</span><span class="nt">></span>
Security Question:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"accountSecurityQuestion"</span>
<span class="na">value=</span><span class="s">"What was your first pet's name?"</span>
<span class="na">style=</span><span class="s">"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
background-color: #f9f9f9;"</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: 12pt;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 5pt;"</span><span class="nt">></span>
Security Answer:
<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"accountSecurityAnswer"</span> <span class="na">value=</span><span class="s">"Fluffy"</span>
<span class="na">style=</span><span class="s">"width: 300pt; padding: 8pt; border: 1pt solid #cccccc;"</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"></fieldset></span>
<span class="c"><!-- Preferences Section --></span>
<span class="nt"><fieldset</span> <span class="na">style=</span><span class="s">"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><legend</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"</span><span class="nt">></span>
Preferences
<span class="nt"></legend></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> <span class="na">style=</span><span class="s">"font-weight: bold; display: block; margin-bottom: 8pt;"</span><span class="nt">></span>
Newsletter and Communications:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"prefNewsletter"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Weekly newsletter<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"prefProductUpdates"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Product updates<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"prefPromotions"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Promotional offers<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 0;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"font-weight: bold; display: block; margin-bottom: 8pt;"</span><span class="nt">></span>
Account Type:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"prefAccountType"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Personal<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"prefAccountType"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Business<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"prefAccountType"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Enterprise<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></fieldset></span>
<span class="c"><!-- Agreement --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"agreementTerms"</span> <span class="na">value=</span><span class="s">"checked"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt; font-weight: bold;"</span><span class="nt">></span>
I agree to the Terms of Service and Privacy Policy
<span class="nt"></label></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="multiple-radio-button-groups">Multiple Radio Button Groups</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h3</span> <span class="na">style=</span><span class="s">"color: #336699;"</span><span class="nt">></span>Product Configuration<span class="nt"></h3></span>
<span class="c"><!-- Size selection --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 10pt;"</span><span class="nt">></span>
Select Size:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productSize"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Small<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productSize"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Medium<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productSize"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Large<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productSize"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>X-Large<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Color selection --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 10pt;"</span><span class="nt">></span>
Select Color:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productColor"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Blue<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productColor"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Red<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productColor"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Green<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productColor"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Black<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Material selection --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"display: block; font-weight: bold; margin-bottom: 10pt;"</span><span class="nt">></span>
Select Material:
<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productMaterial"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Cotton<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productMaterial"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Polyester<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productMaterial"</span> <span class="na">value=</span><span class="s">"selected"</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Cotton/Polyester Blend<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"productMaterial"</span> <span class="na">value=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 15pt; height: 15pt;"</span> <span class="nt">/></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"margin-left: 8pt;"</span><span class="nt">></span>Wool<span class="nt"></label></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/input.html">input</a> - Input field element</li>
<li><a href="/reference/htmlattributes/type.html">type</a> - Input type attribute</li>
<li><a href="/reference/htmlattributes/value.html">value</a> - Value attribute for form fields</li>
<li><a href="/reference/htmlattributes/for.html">for</a> - Label for attribute</li>
<li><a href="/reference/htmltags/label.html">label</a> - Label element for form fields</li>
<li><a href="/reference/htmltags/fieldset.html">fieldset</a> - Fieldset and legend for grouping</li>
<li><a href="/reference/binding/">Data Binding</a> - Dynamic data binding and expressions</li>
<li><a href="/reference/styles/">CSS Styles</a> - Complete CSS styling reference</li>
</ul>
<hr />
</div>
</details>
</template>
<!-- Open first section, close others -->
<template data-bind="">
<details open="">
<summary></summary>
<p></p>
</details>
</template>
Data Model Example:
{
"expanded": true,
"showByDefault": true,
"heading": "Important Information",
"body": "Content details...",
"sections": [
{
"title": "Section 1",
"content": "First section content",
"isOpen": true
},
{
"title": "Section 2",
"content": "Second section content",
"isOpen": false
}
],
"faqs": [
{
"index": 0,
"question": "What is this?",
"answer": "This is the answer."
},
{
"index": 1,
"question": "How does it work?",
"answer": "It works like this."
}
]
}
Notes
Boolean Attribute
The open attribute is a boolean attribute:
<!-- These all mean "open" -->
<details open>Expanded</details>
<details open="">Expanded</details>
<details open="open">Expanded</details>
<details open="true">Expanded</details>
<!-- These all mean "closed" -->
<details>Collapsed</details>
<!-- Omitting the attribute = closed -->
<!-- WRONG: Cannot set to false -->
<details open="false">Still treated as open!</details>
Important: To close a details element, omit the attribute entirely. Setting open="false" still counts as having the attribute and will be treated as open.
Details Element Structure
The <details> element works with <summary>:
<details open>
<!-- Summary is the visible heading/toggle -->
<summary>Click to toggle</summary>
<!-- Content shown when open -->
<p>This is the expandable content.</p>
<p>Multiple elements can be included.</p>
</details>
Components:
<details>- Container for the disclosure widget<summary>- Heading/label (always visible)- Content - Additional elements (visible when open)
Default State
Without the open attribute:
<!-- Closed by default -->
<details>
<summary>Expand for more</summary>
<p>Hidden content</p>
</details>
<!-- Equivalent to: -->
<details open="null">
<summary>Expand for more</summary>
<p>Hidden content</p>
</details>
PDF Context Limitations
In PDF documents:
- Interactive toggles are not typically supported
- Open state usually determines static rendering
- Content with open is rendered as expanded
- Content without open may be rendered collapsed or expanded depending on PDF generator
<!-- In PDF: Usually renders expanded -->
<details open>
<summary>Important Information</summary>
<p>This content is visible in the PDF.</p>
</details>
<!-- In PDF: May render collapsed or expanded -->
<details>
<summary>Additional Details</summary>
<p>Rendering depends on PDF generator settings.</p>
</details>
Best Practice for PDFs:
- Use
openfor important content that should always be visible - Omit
openfor supplementary content (may be omitted or included) - Test rendering in your PDF generator
Summary Element
The <summary> element is the visible label:
<details open>
<!-- Summary is always visible -->
<summary>Chapter 1: Introduction</summary>
<!-- Content visible only when open -->
<p>
This chapter introduces the fundamental concepts
that will be explored throughout the document.
</p>
</details>
If <summary> is omitted, browsers typically add default text like “Details”:
<!-- Without summary -->
<details open>
<p>Content without explicit summary</p>
</details>
<!-- Browser may render as: -->
<!-- Details -->
<!-- Content without explicit summary -->
Best Practice: Always include <summary> for clarity.
Nesting Details
Details elements can be nested:
<details open>
<summary>Parent Section</summary>
<p>Parent content</p>
<!-- Nested details (closed by default) -->
<details>
<summary>Subsection A</summary>
<p>Subsection A content</p>
</details>
<details>
<summary>Subsection B</summary>
<p>Subsection B content</p>
</details>
</details>
Styling Details
CSS can style details elements:
<style>
details {
border: 1pt solid #ccc;
padding: 10pt;
margin: 10pt 0;
border-radius: 5pt;
}
summary {
font-weight: bold;
cursor: pointer;
padding: 5pt;
background-color: #f8f9fa;
margin: -10pt -10pt 10pt -10pt;
padding: 10pt;
}
/* Style for open state */
details[open] {
background-color: #f0f8ff;
}
details[open] summary {
background-color: #e3f2fd;
border-bottom: 1pt solid #ccc;
}
</style>
<details open>
<summary>Styled Details Element</summary>
<p>Content with custom styling</p>
</details>
Accessibility
Proper use improves accessibility:
<!-- Good: Clear summary text -->
<details>
<summary>What are the system requirements?</summary>
<ul>
<li>Operating System: Windows 10 or later</li>
<li>RAM: 4GB minimum, 8GB recommended</li>
<li>Storage: 500MB available space</li>
</ul>
</details>
<!-- Good: Descriptive summary -->
<details open>
<summary>Important Safety Information</summary>
<p>Read this before operating the equipment...</p>
</details>
Screen readers announce:
- The summary text
- The expanded/collapsed state
- How to toggle (if interactive)
JavaScript Interaction (Web)
In web browsers (not PDFs), details can be controlled via JavaScript:
<details id="myDetails">
<summary>Toggle Me</summary>
<p>Content</p>
</details>
<script>
// Get element
const details = document.getElementById('myDetails');
// Open programmatically
details.open = true;
// Close programmatically
details.open = false;
// Toggle
details.open = !details.open;
// Listen for toggle event
details.addEventListener('toggle', function() {
console.log('Details toggled:', this.open);
});
</script>
Note: This JavaScript functionality is for web browsers only and does not apply to static PDFs.
Use Cases
Common uses for details elements:
- FAQ sections - Collapsible question/answer pairs
- Additional information - Optional supplementary content
- Long content - Breaking up lengthy documents
- Progressive disclosure - Revealing information as needed
- Footnotes - Expandable annotations
<!-- FAQ -->
<details>
<summary>What is your return policy?</summary>
<p>We accept returns within 30 days of purchase...</p>
</details>
<!-- Additional info -->
<details>
<summary>Technical specifications</summary>
<table>
<!-- Detailed specs -->
</table>
</details>
<!-- Footnote -->
<p>
Important concept<sup>1</sup>
</p>
<details>
<summary>Footnote 1</summary>
<p>Additional context and references...</p>
</details>
Examples
Basic Open and Closed Details
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Details Example</title>
<style>
details {
border: 1pt solid #ccc;
padding: 10pt;
margin: 10pt 0;
}
summary {
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Product Information</h1>
<!-- Open by default -->
<details open>
<summary>Description (expanded by default)</summary>
<p>
This product features advanced technology and premium
materials for exceptional performance.
</p>
</details>
<!-- Closed by default -->
<details>
<summary>Technical Specifications (collapsed by default)</summary>
<ul>
<li>Dimensions: 10 x 5 x 3 inches</li>
<li>Weight: 2.5 lbs</li>
<li>Material: Aluminum alloy</li>
<li>Color: Matte black</li>
</ul>
</details>
<!-- Closed by default -->
<details>
<summary>Shipping Information (collapsed by default)</summary>
<p>
Free shipping on orders over $50.
Standard delivery: 5-7 business days.
Express delivery: 2-3 business days.
</p>
</details>
</body>
</html>
FAQ Section
<section>
<h1>Frequently Asked Questions</h1>
<!-- First FAQ open, others closed -->
<details open>
<summary>What is Scryber?</summary>
<p>
Scryber is a .NET library for generating PDF documents from
HTML and CSS templates.
</p>
</details>
<details>
<summary>How do I install Scryber?</summary>
<p>
Install via NuGet Package Manager:
</p>
<pre><code>Install-Package Scryber.Core</code></pre>
</details>
<details>
<summary>Is Scryber free to use?</summary>
<p>
Yes, Scryber.Core is open source and free to use under
the LGPL-3.0 license.
</p>
</details>
<details>
<summary>What HTML elements are supported?</summary>
<p>
Scryber supports most standard HTML5 elements including
divs, spans, tables, lists, images, and semantic elements.
</p>
</details>
<details>
<summary>Can I use CSS for styling?</summary>
<p>
Yes, Scryber supports CSS for styling including external
stylesheets, inline styles, and embedded style blocks.
</p>
</details>
</section>
Styled Details Elements
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Styled Details</title>
<style>
.info-section {
border: 2pt solid #336699;
border-radius: 5pt;
margin: 15pt 0;
overflow: hidden;
}
.info-section summary {
background-color: #336699;
color: white;
padding: 15pt;
font-size: 12pt;
font-weight: bold;
cursor: pointer;
}
.info-section[open] summary {
background-color: #4a7ba7;
}
.info-section > *:not(summary) {
padding: 15pt;
}
.warning-section {
border: 2pt solid #ffc107;
border-left-width: 5pt;
padding: 10pt;
margin: 15pt 0;
background-color: #fff3cd;
}
.warning-section summary {
color: #856404;
font-weight: bold;
font-size: 11pt;
}
</style>
</head>
<body>
<h1>Important Information</h1>
<!-- Blue styled section (open) -->
<details class="info-section" open>
<summary>Getting Started</summary>
<div>
<p>Follow these steps to get started:</p>
<ol>
<li>Install the required software</li>
<li>Configure your environment</li>
<li>Run the setup wizard</li>
</ol>
</div>
</details>
<!-- Warning styled section (closed) -->
<details class="warning-section">
<summary>⚠ Important Safety Notice</summary>
<p>
Always disconnect power before performing maintenance.
Failure to do so may result in electric shock or injury.
</p>
</details>
<!-- Blue styled section (closed) -->
<details class="info-section">
<summary>Advanced Configuration</summary>
<div>
<p>Advanced users can customize additional settings...</p>
</div>
</details>
</body>
</html>
Nested Details
<section>
<h1>Product Documentation</h1>
<!-- Parent details (open) -->
<details open style="border: 2pt solid #336699; padding: 15pt; margin: 10pt 0;">
<summary style="font-size: 14pt; font-weight: bold; margin-bottom: 10pt;">
Chapter 1: Getting Started
</summary>
<p>This chapter covers the basics of using the product.</p>
<!-- Nested child details (closed) -->
<details style="border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;">
<summary style="font-weight: bold;">1.1 Installation</summary>
<p>Step-by-step installation instructions...</p>
<ol>
<li>Download the installer</li>
<li>Run setup.exe</li>
<li>Follow the wizard</li>
</ol>
</details>
<!-- Nested child details (open) -->
<details open style="border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;">
<summary style="font-weight: bold;">1.2 First Steps</summary>
<p>Getting started with your first project...</p>
<!-- Deeply nested details (closed) -->
<details style="border: 1pt solid #ddd; padding: 5pt; margin: 5pt 0;">
<summary>1.2.1 Creating a Project</summary>
<p>Click File → New → Project...</p>
</details>
<details style="border: 1pt solid #ddd; padding: 5pt; margin: 5pt 0;">
<summary>1.2.2 Basic Configuration</summary>
<p>Configure your project settings...</p>
</details>
</details>
<!-- Nested child details (closed) -->
<details style="border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;">
<summary style="font-weight: bold;">1.3 Quick Tutorial</summary>
<p>A quick 5-minute tutorial...</p>
</details>
</details>
<!-- Parent details (closed) -->
<details style="border: 2pt solid #336699; padding: 15pt; margin: 10pt 0;">
<summary style="font-size: 14pt; font-weight: bold;">
Chapter 2: Advanced Features
</summary>
<p>Advanced topics for experienced users...</p>
</details>
</section>
Data-Bound FAQ
<!-- Model: {
faqs: [
{
question: "What payment methods do you accept?",
answer: "We accept all major credit cards, PayPal, and bank transfers.",
defaultOpen: true
},
{
question: "How long does shipping take?",
answer: "Standard shipping takes 5-7 business days. Express shipping takes 2-3 days.",
defaultOpen: false
},
{
question: "What is your return policy?",
answer: "We accept returns within 30 days of purchase with original packaging.",
defaultOpen: false
}
]
} -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FAQ</title>
<style>
details {
border: 1pt solid #ccc;
padding: 15pt;
margin: 10pt 0;
border-radius: 5pt;
}
summary {
font-weight: bold;
font-size: 11pt;
cursor: pointer;
color: #336699;
}
details[open] {
background-color: #f8f9fa;
}
</style>
</head>
<body>
<h1>Frequently Asked Questions</h1>
<template data-bind="">
<details open="">
<summary></summary>
<p></p>
</details>
</template>
</body>
</html>
Technical Documentation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>API Documentation</title>
<style>
.api-method {
border: 1pt solid #ccc;
margin: 15pt 0;
border-radius: 3pt;
}
.api-method summary {
background-color: #f8f9fa;
padding: 10pt;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.api-method[open] summary {
background-color: #e9ecef;
border-bottom: 1pt solid #ccc;
}
.api-method > div {
padding: 15pt;
}
.http-method {
display: inline-block;
padding: 3pt 8pt;
border-radius: 3pt;
font-size: 9pt;
font-weight: bold;
margin-right: 5pt;
}
.get { background-color: #28a745; color: white; }
.post { background-color: #007bff; color: white; }
.delete { background-color: #dc3545; color: white; }
</style>
</head>
<body>
<h1>REST API Documentation</h1>
<h2>User Endpoints</h2>
<!-- GET endpoint (open) -->
<details class="api-method" open>
<summary>
<span class="http-method get">GET</span>
/api/users
</summary>
<div>
<p><strong>Description:</strong> Retrieve all users</p>
<p><strong>Response:</strong></p>
<pre><code>{
"users": [
{ "id": 1, "name": "John Doe" },
{ "id": 2, "name": "Jane Smith" }
]
}</code></pre>
</div>
</details>
<!-- POST endpoint (closed) -->
<details class="api-method">
<summary>
<span class="http-method post">POST</span>
/api/users
</summary>
<div>
<p><strong>Description:</strong> Create a new user</p>
<p><strong>Request Body:</strong></p>
<pre><code>{
"name": "New User",
"email": "user@example.com"
}</code></pre>
<p><strong>Response:</strong></p>
<pre><code>{
"id": 3,
"name": "New User",
"email": "user@example.com"
}</code></pre>
</div>
</details>
<!-- DELETE endpoint (closed) -->
<details class="api-method">
<summary>
<span class="http-method delete">DELETE</span>
/api/users/:id
</summary>
<div>
<p><strong>Description:</strong> Delete a user by ID</p>
<p><strong>Parameters:</strong></p>
<ul>
<li><code>id</code> (required): User ID</li>
</ul>
<p><strong>Response:</strong></p>
<pre><code>{
"success": true,
"message": "User deleted"
}</code></pre>
</div>
</details>
</body>
</html>
Expandable Sections in Report
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Annual Report</title>
<style>
.report-section {
border: 2pt solid #336699;
margin: 20pt 0;
border-radius: 5pt;
}
.report-section summary {
background-color: #336699;
color: white;
padding: 15pt;
font-size: 14pt;
font-weight: bold;
}
.report-section > div {
padding: 20pt;
}
</style>
</head>
<body>
<h1>Annual Report 2025</h1>
<p><em>Click section headings to expand/collapse content.</em></p>
<!-- Executive Summary (open) -->
<details class="report-section" open>
<summary>Executive Summary</summary>
<div>
<p>
Fiscal year 2025 demonstrated strong performance across
all business units with 25% revenue growth and market
expansion into three new regions.
</p>
<ul>
<li>Total Revenue: $50M (+25% YoY)</li>
<li>Net Profit: $10M (+30% YoY)</li>
<li>Customer Base: 10,000 (+40% YoY)</li>
</ul>
</div>
</details>
<!-- Financial Performance (closed) -->
<details class="report-section">
<summary>Financial Performance</summary>
<div>
<h3>Revenue Breakdown</h3>
<table style="width: 100%; border-collapse: collapse;">
<tr>
<th style="border: 1pt solid #ddd; padding: 8pt;">Category</th>
<th style="border: 1pt solid #ddd; padding: 8pt;">Revenue</th>
<th style="border: 1pt solid #ddd; padding: 8pt;">Growth</th>
</tr>
<tr>
<td style="border: 1pt solid #ddd; padding: 8pt;">Product Sales</td>
<td style="border: 1pt solid #ddd; padding: 8pt;">$30M</td>
<td style="border: 1pt solid #ddd; padding: 8pt;">+20%</td>
</tr>
<tr>
<td style="border: 1pt solid #ddd; padding: 8pt;">Services</td>
<td style="border: 1pt solid #ddd; padding: 8pt;">$20M</td>
<td style="border: 1pt solid #ddd; padding: 8pt;">+35%</td>
</tr>
</table>
</div>
</details>
<!-- Operations (closed) -->
<details class="report-section">
<summary>Operations</summary>
<div>
<p>
Operational efficiency improved through automation
initiatives and process optimization...
</p>
</div>
</details>
<!-- Future Outlook (closed) -->
<details class="report-section">
<summary>Future Outlook</summary>
<div>
<p>
Looking ahead to 2026, we anticipate continued growth
driven by product innovation and market expansion...
</p>
</div>
</details>
</body>
</html>
Product Comparison with Expandable Details
<section>
<h1>Product Comparison</h1>
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="border: 1pt solid #ddd; padding: 10pt;">Feature</th>
<th style="border: 1pt solid #ddd; padding: 10pt;">Basic</th>
<th style="border: 1pt solid #ddd; padding: 10pt;">Pro</th>
<th style="border: 1pt solid #ddd; padding: 10pt;">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1pt solid #ddd; padding: 10pt;">Price</td>
<td style="border: 1pt solid #ddd; padding: 10pt;">$9.99/mo</td>
<td style="border: 1pt solid #ddd; padding: 10pt;">$29.99/mo</td>
<td style="border: 1pt solid #ddd; padding: 10pt;">$99.99/mo</td>
</tr>
<tr>
<td style="border: 1pt solid #ddd; padding: 10pt;">Storage</td>
<td style="border: 1pt solid #ddd; padding: 10pt;">10 GB</td>
<td style="border: 1pt solid #ddd; padding: 10pt;">100 GB</td>
<td style="border: 1pt solid #ddd; padding: 10pt;">Unlimited</td>
</tr>
</tbody>
</table>
<h2>Detailed Feature Comparison</h2>
<!-- Basic plan details -->
<details style="border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;">
<summary style="font-weight: bold;">Basic Plan Details</summary>
<ul>
<li>10 GB storage</li>
<li>1 user</li>
<li>Email support</li>
<li>Basic features</li>
</ul>
</details>
<!-- Pro plan details (open) -->
<details open style="border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;">
<summary style="font-weight: bold;">Pro Plan Details (Most Popular)</summary>
<ul>
<li>100 GB storage</li>
<li>Up to 5 users</li>
<li>Email + chat support</li>
<li>Advanced features</li>
<li>Priority support</li>
</ul>
</details>
<!-- Enterprise plan details -->
<details style="border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;">
<summary style="font-weight: bold;">Enterprise Plan Details</summary>
<ul>
<li>Unlimited storage</li>
<li>Unlimited users</li>
<li>24/7 phone support</li>
<li>All features</li>
<li>Dedicated account manager</li>
<li>Custom integrations</li>
<li>SLA guarantee</li>
</ul>
</details>
</section>
Troubleshooting Guide
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Troubleshooting Guide</title>
<style>
.problem {
border-left: 4pt solid #dc3545;
padding: 10pt;
margin: 15pt 0;
background-color: #f8d7da;
}
.problem summary {
font-weight: bold;
color: #721c24;
}
.solution {
margin-top: 10pt;
padding: 10pt;
background-color: white;
border: 1pt solid #ccc;
}
</style>
</head>
<body>
<h1>Troubleshooting Guide</h1>
<p>Click on a problem to see the solution.</p>
<details class="problem" open>
<summary>Problem: Application won't start</summary>
<div class="solution">
<p><strong>Solution:</strong></p>
<ol>
<li>Verify system requirements are met</li>
<li>Check for conflicting software</li>
<li>Reinstall the application</li>
<li>Contact support if issue persists</li>
</ol>
</div>
</details>
<details class="problem">
<summary>Problem: Slow performance</summary>
<div class="solution">
<p><strong>Solution:</strong></p>
<ol>
<li>Close unnecessary background applications</li>
<li>Clear application cache</li>
<li>Increase available memory</li>
<li>Check for software updates</li>
</ol>
</div>
</details>
<details class="problem">
<summary>Problem: Error message on startup</summary>
<div class="solution">
<p><strong>Solution:</strong></p>
<ol>
<li>Note the exact error message</li>
<li>Check the error log in /logs/error.log</li>
<li>Search our knowledge base</li>
<li>Contact support with error details</li>
</ol>
</div>
</details>
</body>
</html>
See Also
- details - Details disclosure element
- summary - Summary element for details
- hidden - Hidden attribute for visibility
- Collapsible Content - Creating collapsible sections
- Interactive Elements - Interactive HTML elements