@optimum : The Optimal Value Attribute
The optimum attribute specifies the ideal target value for the meter element in PDF documents. It works with low and high threshold attributes to determine which range is considered optimal, directly controlling the color-coding logic that visually indicates whether the current value is in an optimal, suboptimal, or critically suboptimal state.
Usage
The optimum attribute controls semantic coloring logic:
- Defines the ideal target value for measurements
- Determines which range (below low, between low/high, above high) is optimal
- Controls automatic color selection (green for optimal, orange/red for suboptimal)
- Must fall within the min/max range
- Works with low/high thresholds to create three-zone color logic
- Supports decimal and integer values
- Enables data binding for dynamic optimal targets
- Default: NaN (not set - middle range assumed optimal)
<!-- Lower is better: optimum near min -->
<meter value="25" min="0" max="100" low="30" high="75" optimum="0">
25% - Green (near optimum, below low threshold)
</meter>
<!-- Higher is better: optimum near max -->
<meter value="85" min="0" max="100" low="20" high="50" optimum="100">
85% - Green (near optimum, above high threshold)
</meter>
<!-- Middle is better: optimum in middle range -->
<meter value="72" min="60" max="90" low="68" high="78" optimum="72">
72°F - Green (at optimum, in middle range)
</meter>
<!-- Dynamic optimum with data binding -->
<meter value=""
min=""
max=""
low=""
high=""
optimum="">
</meter>
Supported Elements
The optimum attribute is supported by:
| Element | Description |
|---|---|
<meter> |
Gauge/measurement element - uses optimum to determine color logic |
Note: The <progress> element does not support the optimum attribute as it represents simple completion without optimal value concepts.
How Optimum Affects Color Logic
Three Semantic Patterns
The optimum value position relative to low/high thresholds creates three distinct patterns:
Pattern 1: Lower is Better (optimum < low)
When optimum is below the low threshold, lower values are optimal:
min [optimum]----[low]--------[high]---- max
OPTIMAL SUBOPTIMAL CRITICAL
Green Orange Dark Orange
Use cases: CPU usage, memory usage, disk usage, costs, errors
<!-- Disk usage: Lower is better -->
<meter value="25" min="0" max="100" low="30" high="75" optimum="0">
25% - Green (near optimum, optimal range)
</meter>
<meter value="50" min="0" max="100" low="30" high="75" optimum="0">
50% - Orange (middle range, suboptimal)
</meter>
<meter value="85" min="0" max="100" low="30" high="75" optimum="0">
85% - Dark Orange (above high, critically suboptimal)
</meter>
Pattern 2: Higher is Better (optimum > high)
When optimum is above the high threshold, higher values are optimal:
min ----[low]--------[high]---- [optimum] max
CRITICAL SUBOPTIMAL OPTIMAL
Dark Orange Orange Green
Use cases: Battery level, quality scores, performance ratings, revenue
<!-- Battery level: Higher is better -->
<meter value="85" min="0" max="100" low="20" high="50" optimum="100">
85% - Green (near optimum, optimal range)
</meter>
<meter value="35" min="0" max="100" low="20" high="50" optimum="100">
35% - Orange (middle range, suboptimal)
</meter>
<meter value="15" min="0" max="100" low="20" high="50" optimum="100">
15% - Dark Orange (below low, critically suboptimal)
</meter>
Pattern 3: Middle is Better (low ≤ optimum ≤ high)
When optimum is in the middle range, moderate values are optimal:
min ----[low]-- [optimum] --[high]---- max
SUBOPTIMAL OPTIMAL SUBOPTIMAL
Orange Green Orange
Use cases: Temperature, pH levels, pressure, humidity
<!-- Temperature: Middle range is optimal -->
<meter value="72" min="60" max="90" low="68" high="78" optimum="72">
72°F - Green (at optimum, optimal range)
</meter>
<meter value="82" min="60" max="90" low="68" high="78" optimum="72">
82°F - Orange (above high, too hot)
</meter>
<meter value="64" min="60" max="90" low="68" high="78" optimum="72">
64°F - Orange (below low, too cold)
</meter>
Color Decision Tree
The meter evaluates color using this logic:
- Determine optimal zone based on optimum position:
- If optimum < low: Low range is optimal
- If optimum > high: High range is optimal
- If low ≤ optimum ≤ high: Middle range is optimal
- Evaluate current value against optimal zone:
- Value in optimal zone: Green
- Value in adjacent zone: Orange (suboptimal)
- Value in far zone: Dark Orange/Red (critically suboptimal)
Practical Examples by Use Case
Resource Usage (Lower is Better):
<!-- CPU: 0% is ideal, higher is worse -->
<meter value="45" min="0" max="100" low="30" high="75" optimum="0">
45% CPU - Orange (suboptimal)
</meter>
<!-- Memory: 0 GB used is ideal -->
<meter value="2.5" min="0" max="16" low="4" high="12" optimum="0">
2.5 GB - Green (optimal, below low threshold)
</meter>
<!-- Error rate: 0 errors is ideal -->
<meter value="5" min="0" max="100" low="10" high="50" optimum="0">
5 errors - Green (optimal, below low threshold)
</meter>
Performance/Quality (Higher is Better):
<!-- Score: 100% is ideal -->
<meter value="92" min="0" max="100" low="60" high="85" optimum="100">
92% - Green (optimal, above high threshold)
</meter>
<!-- Battery: 100% charge is ideal -->
<meter value="75" min="0" max="100" low="20" high="50" optimum="100">
75% - Green (optimal, above high threshold)
</meter>
<!-- Customer satisfaction: 5 stars is ideal -->
<meter value="4.7" min="1" max="5" low="3" high="4" optimum="5">
4.7 stars - Green (optimal, above high threshold)
</meter>
Balanced Range (Middle is Better):
<!-- Room temperature: 72°F is ideal -->
<meter value="71" min="60" max="85" low="68" high="76" optimum="72">
71°F - Green (optimal, near target)
</meter>
<!-- pH level: 7.0 is ideal (neutral) -->
<meter value="7.2" min="0" max="14" low="6.5" high="8.5" optimum="7">
pH 7.2 - Green (optimal, near neutral)
</meter>
<!-- Blood pressure: 120 mmHg is ideal -->
<meter value="118" min="90" max="180" low="110" high="140" optimum="120">
118 mmHg - Green (optimal, near ideal)
</meter>
Binding Values
The optimum attribute supports data binding for dynamic target values:
Simple Optimum Binding
<!-- Model: { currentValue: 75, targetValue: 80 } -->
<meter value=""
min="0"
max="100"
low="60"
high="90"
optimum="">
% (Target: %)
</meter>
Calculated Optimum
<!-- Model: { maxCapacity: 100, targetUtilization: 0.8 } -->
<!-- Optimal value is 80% of max capacity -->
<meter value=""
min="0"
max=""
low=""
high=""
optimum="">
(Target: )
</meter>
Conditional Optimum
<!-- Model: { metric: "cpu", value: 45 } -->
<!-- Different optimum for different metric types -->
<meter value=""
min="0"
max="100"
low="30"
high="75"
optimum="">
%
</meter>
Context-Specific Optimum
<!-- Model: { season: "summer", temp: 75, winterTarget: 68, summerTarget: 72 } -->
<!-- Different optimal temperatures for different seasons -->
<meter value=""
min="60"
max="85"
low=""
high=""
optimum="">
°F ()
</meter>
Dynamic Targets from Collection
<!-- Model: {
goals: [
{name: "Sales", current: 875000, target: 1000000},
{name: "Customers", current: 156, target: 200},
{name: "Satisfaction", current: 4.6, target: 4.5}
]
} -->
<template data-bind="">
<div style="margin-bottom: 15pt;">
<strong>:</strong>
<meter value="" min="0" max=""
low="" high=""
optimum=""
style="width: 250pt; height: 20pt;">
</meter>
<span style="margin-left: 10pt;">
Target:
</span>
</div>
</template>
Notes
Optimum Positioning Requirements
The optimum value must be within the min/max range:
<!-- Valid: optimum within range -->
<meter value="50" min="0" max="100" low="30" high="70" optimum="50">
Valid configuration
</meter>
<!-- Invalid: optimum below min -->
<meter value="50" min="10" max="100" low="30" high="70" optimum="5">
Invalid: optimum < min
</meter>
<!-- Invalid: optimum above max -->
<meter value="50" min="0" max="100" low="30" high="70" optimum="120">
Invalid: optimum > max
</meter>
<!-- Valid: optimum at boundary -->
<meter value="50" min="0" max="100" low="30" high="70" optimum="0">
Valid: optimum = min (lower is better pattern)
</meter>
<meter value="50" min="0" max="100" low="30" high="70" optimum="100">
Valid: optimum = max (higher is better pattern)
</meter>
Default Behavior Without Optimum
If optimum is not specified, the middle range is assumed optimal:
<!-- No optimum: middle range defaults as optimal -->
<meter value="50" min="0" max="100" low="30" high="70">
Assumes middle range (30-70) is optimal
</meter>
<!-- Equivalent to setting optimum in middle -->
<meter value="50" min="0" max="100" low="30" high="70" optimum="50">
Explicit middle optimum
</meter>
Optimum Precision
The optimum attribute supports decimal values:
<!-- Decimal optimum -->
<meter value="0.67" min="0" max="1" low="0.3" high="0.8" optimum="0.5">
0.67 (Target: 0.5)
</meter>
<!-- Scientific measurement -->
<meter value="7.2" min="0" max="14" low="6.5" high="8.5" optimum="7.0">
pH 7.2 (Target: 7.0 neutral)
</meter>
<!-- Precise targeting -->
<meter value="98.6" min="95" max="105" low="97" high="100" optimum="98.6">
98.6°F (Normal body temperature)
</meter>
Optimum vs. Value
The optimum is the target, not the current value:
<!-- Current value: 75, Target (optimum): 50 -->
<meter value="75" min="0" max="100" low="30" high="70" optimum="50">
Current: 75, Target: 50 (above optimal range)
</meter>
<!-- Don't set optimum to current value -->
<!-- This would make the color always green -->
<meter value="75" min="0" max="100" low="30" high="70" optimum="75">
Incorrect: optimum should be target, not current
</meter>
Multiple Meters, Same Optimum
Consistent optimum values for related measurements:
<!-- All servers should target 0% (minimal usage) -->
<meter value="45" min="0" max="100" low="30" high="75" optimum="0">
Server 1: 45%
</meter>
<meter value="62" min="0" max="100" low="30" high="75" optimum="0">
Server 2: 62%
</meter>
<meter value="88" min="0" max="100" low="30" high="75" optimum="0">
Server 3: 88% (Critical!)
</meter>
Optimum in Different Scenarios
Fixed Optimum:
<!-- Room temperature: always 72°F -->
<meter value="" min="60" max="85"
low="68" high="76" optimum="72">
°F
</meter>
Variable Optimum:
<!-- Target changes based on workout intensity -->
<meter value="" min="60" max="200"
low=""
high=""
optimum="">
bpm
</meter>
Context-Dependent Optimum:
<!-- Humidity: different optimal based on season -->
<meter value="" min="0" max="100"
low="30" high="60"
optimum="">
% humidity
</meter>
Visual Impact of Optimum Position
Same thresholds, different optimum, different colors:
<!-- Value: 85, optimum at min (0) -->
<meter value="85" min="0" max="100" low="30" high="75" optimum="0"
style="width: 250pt; height: 24pt;">
85% - Dark Orange (value far from optimum)
</meter>
<!-- Value: 85, optimum at max (100) -->
<meter value="85" min="0" max="100" low="30" high="75" optimum="100"
style="width: 250pt; height: 24pt;">
85% - Green (value near optimum)
</meter>
<!-- Value: 85, optimum in middle (50) -->
<meter value="85" min="0" max="100" low="30" high="75" optimum="50"
style="width: 250pt; height: 24pt;">
85% - Orange (value above optimal range)
</meter>
Threshold Symmetry Around Optimum
For middle-is-better patterns, center the optimum:
<!-- Symmetric: optimum centered in middle range -->
<meter value="50" min="0" max="100" low="40" high="60" optimum="50">
Perfect centering: 40-[50]-60
</meter>
<!-- Asymmetric: optimum offset -->
<meter value="45" min="0" max="100" low="40" high="60" optimum="45">
Offset optimum: closer to low threshold
</meter>
Common Patterns
Minimize pattern (optimum = min):
<!-- Errors, usage, costs - less is better -->
<meter value="25" min="0" max="100" low="30" high="70" optimum="0">
Minimize pattern
</meter>
Maximize pattern (optimum = max):
<!-- Scores, battery, quality - more is better -->
<meter value="85" min="0" max="100" low="30" high="70" optimum="100">
Maximize pattern
</meter>
Target pattern (optimum = specific value):
<!-- Temperature, levels, balance - specific target -->
<meter value="72" min="60" max="85" low="68" high="76" optimum="72">
Target pattern
</meter>
Optimum and User Expectations
Align optimum with user intuition:
Good alignment:
<!-- Users expect low disk usage to be good -->
<meter value="25" min="0" max="100" low="30" high="75" optimum="0">
25% disk used - Green (matches expectation)
</meter>
<!-- Users expect high battery to be good -->
<meter value="85" min="0" max="100" low="20" high="50" optimum="100">
85% battery - Green (matches expectation)
</meter>
Poor alignment (confusing):
<!-- Confusing: High disk usage shown as good -->
<meter value="85" min="0" max="100" low="30" high="75" optimum="100">
85% disk used - Green (misleading!)
</meter>
Testing Optimum Configuration
Test each zone to verify color logic:
<!-- Test low zone (should be green if optimum=0) -->
<meter value="15" min="0" max="100" low="30" high="70" optimum="0">
15% - Expected: Green
</meter>
<!-- Test middle zone (should be orange if optimum=0) -->
<meter value="50" min="0" max="100" low="30" high="70" optimum="0">
50% - Expected: Orange
</meter>
<!-- Test high zone (should be dark orange if optimum=0) -->
<meter value="85" min="0" max="100" low="30" high="70" optimum="0">
85% - Expected: Dark Orange
</meter>
Examples
CPU Usage Monitor (Lower is Better)
<div style="padding: 25pt; background-color: #263238; color: white; border-radius: 10pt;">
<h2 style="margin: 0 0 25pt 0; text-align: center;">CPU Usage Monitor</h2>
<div style="margin-bottom: 20pt; padding: 18pt; background-color: #37474f;
border-radius: 8pt;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 12pt; color: #4CAF50;">Core 1</strong>
<span style="float: right; font-size: 18pt; font-weight: bold; color: #4CAF50;">
22%
</span>
<div style="clear: both;"></div>
</div>
<meter value="22" min="0" max="100" low="30" high="75" optimum="0"
style="width: 100%; height: 32pt; border: 2pt solid rgba(255,255,255,0.3);">
22%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; opacity: 0.9; color: #4CAF50;">
Optimal - Low usage (below 30% threshold). Target: 0% (idle)
</p>
</div>
<div style="margin-bottom: 20pt; padding: 18pt; background-color: #37474f;
border-radius: 8pt;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 12pt; color: #FF9800;">Core 2</strong>
<span style="float: right; font-size: 18pt; font-weight: bold; color: #FF9800;">
52%
</span>
<div style="clear: both;"></div>
</div>
<meter value="52" min="0" max="100" low="30" high="75" optimum="0"
style="width: 100%; height: 32pt; border: 2pt solid rgba(255,255,255,0.3);">
52%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; opacity: 0.9; color: #FF9800;">
Suboptimal - Moderate usage (30-75% range). Target: 0% (idle)
</p>
</div>
<div style="margin-bottom: 0; padding: 18pt; background-color: #37474f;
border-radius: 8pt;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 12pt; color: #FF5722;">Core 3</strong>
<span style="float: right; font-size: 18pt; font-weight: bold; color: #FF5722;">
88%
</span>
<div style="clear: both;"></div>
</div>
<meter value="88" min="0" max="100" low="30" high="75" optimum="0"
style="width: 100%; height: 32pt; border: 2pt solid rgba(255,255,255,0.3);">
88%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; opacity: 0.9; color: #FF5722;">
Critical - High usage (above 75% threshold). Target: 0% (idle)
</p>
</div>
<div style="margin-top: 25pt; padding: 18pt; background-color: rgba(255,255,255,0.1);
border-radius: 8pt; font-size: 10pt;">
<strong>Configuration:</strong><br/>
Optimum: 0% (idle state is ideal)<br/>
Low Threshold: 30% | High Threshold: 75%<br/>
<br/>
<strong>Logic:</strong> Lower CPU usage is better. Optimum at minimum (0%)
means green appears below 30%, orange between 30-75%, and red above 75%.
</div>
</div>
Battery Level Indicator (Higher is Better)
<div style="border: 3pt solid #4CAF50; border-radius: 12pt; padding: 25pt;">
<h2 style="margin: 0 0 25pt 0; color: #2e7d32; text-align: center;">
Device Battery Status
</h2>
<div style="margin-bottom: 22pt; padding: 18pt; background-color: #e8f5e9;
border-radius: 8pt; border-left: 5pt solid #4CAF50;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt;">Laptop</strong>
<span style="float: right; font-size: 22pt; font-weight: bold; color: #4CAF50;">
92%
</span>
<div style="clear: both;"></div>
</div>
<meter value="92" min="0" max="100" low="20" high="50" optimum="100"
style="width: 100%; height: 30pt; border: 2pt solid #4CAF50;">
92%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #2e7d32;">
Excellent - High charge (above 50% threshold). Target: 100% (full charge)
</p>
</div>
<div style="margin-bottom: 22pt; padding: 18pt; background-color: #fff3e0;
border-radius: 8pt; border-left: 5pt solid #FF9800;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt;">Tablet</strong>
<span style="float: right; font-size: 22pt; font-weight: bold; color: #FF9800;">
38%
</span>
<div style="clear: both;"></div>
</div>
<meter value="38" min="0" max="100" low="20" high="50" optimum="100"
style="width: 100%; height: 30pt; border: 2pt solid #FF9800;">
38%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #e65100;">
Moderate - Medium charge (20-50% range). Target: 100% (full charge)
</p>
</div>
<div style="margin-bottom: 0; padding: 18pt; background-color: #ffebee;
border-radius: 8pt; border-left: 5pt solid #d32f2f;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt;">Phone</strong>
<span style="float: right; font-size: 22pt; font-weight: bold; color: #d32f2f;">
12%
</span>
<div style="clear: both;"></div>
</div>
<meter value="12" min="0" max="100" low="20" high="50" optimum="100"
style="width: 100%; height: 30pt; border: 2pt solid #d32f2f;">
12%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #c62828;">
Critical - Low battery (below 20% threshold). Target: 100% (full charge)
<br/>
<strong>⚠ Charge immediately!</strong>
</p>
</div>
<div style="margin-top: 25pt; padding: 18pt; background-color: #e3f2fd;
border-radius: 8pt; font-size: 10pt;">
<strong>Configuration:</strong><br/>
Optimum: 100% (full charge is ideal)<br/>
Low Threshold: 20% | High Threshold: 50%<br/>
<br/>
<strong>Logic:</strong> Higher battery percentage is better. Optimum at
maximum (100%) means green appears above 50%, orange between 20-50%,
and red below 20%.
</div>
</div>
Room Temperature Control (Middle is Better)
<div style="padding: 25pt; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; border-radius: 12pt;">
<h2 style="margin: 0 0 30pt 0; text-align: center; font-size: 20pt;">
Smart Thermostat Control
</h2>
<div style="background-color: rgba(255,255,255,0.15); padding: 20pt;
border-radius: 10pt; margin-bottom: 20pt;">
<h3 style="margin: 0 0 15pt 0; color: #4CAF50;">Living Room</h3>
<meter value="72" min="60" max="85" low="68" high="76" optimum="72"
style="width: 100%; height: 36pt; border: 3pt solid rgba(255,255,255,0.3);">
72°F
</meter>
<div style="margin-top: 15pt; text-align: center;">
<span style="font-size: 36pt; font-weight: bold; color: #4CAF50;">
72°F
</span>
<br/>
<span style="font-size: 12pt; opacity: 0.95;">
Perfect - At optimal temperature (target: 72°F)
</span>
</div>
</div>
<div style="background-color: rgba(255,255,255,0.15); padding: 20pt;
border-radius: 10pt; margin-bottom: 20pt;">
<h3 style="margin: 0 0 15pt 0; color: #FF9800;">Bedroom</h3>
<meter value="65" min="60" max="85" low="68" high="76" optimum="72"
style="width: 100%; height: 36pt; border: 3pt solid rgba(255,255,255,0.3);">
65°F
</meter>
<div style="margin-top: 15pt; text-align: center;">
<span style="font-size: 36pt; font-weight: bold; color: #FF9800;">
65°F
</span>
<br/>
<span style="font-size: 12pt; opacity: 0.95;">
Too Cold - Below optimal range (target: 72°F)
</span>
</div>
</div>
<div style="background-color: rgba(255,255,255,0.15); padding: 20pt;
border-radius: 10pt;">
<h3 style="margin: 0 0 15pt 0; color: #FF5722;">Kitchen</h3>
<meter value="80" min="60" max="85" low="68" high="76" optimum="72"
style="width: 100%; height: 36pt; border: 3pt solid rgba(255,255,255,0.3);">
80°F
</meter>
<div style="margin-top: 15pt; text-align: center;">
<span style="font-size: 36pt; font-weight: bold; color: #FF5722;">
80°F
</span>
<br/>
<span style="font-size: 12pt; opacity: 0.95;">
Too Hot - Above optimal range (target: 72°F)
</span>
</div>
</div>
<div style="margin-top: 25pt; padding: 20pt; background-color: rgba(255,255,255,0.1);
border-radius: 10pt; font-size: 11pt;">
<strong>Configuration:</strong><br/>
Optimum: 72°F (comfortable room temperature)<br/>
Low Threshold: 68°F | High Threshold: 76°F<br/>
<br/>
<strong>Logic:</strong> Middle temperature is best. Optimum in the middle
range (68-76°F) means green appears when temperature is near 72°F, orange
when too cold (<68°F) or too hot (>76°F).
</div>
</div>
Student Performance Scoring (Higher is Better)
<div style="border: 2pt solid #673AB7; border-radius: 10pt; padding: 25pt;">
<h2 style="margin: 0 0 25pt 0; color: #673AB7; text-align: center;">
Student Performance Dashboard
</h2>
<div style="margin-bottom: 20pt; padding: 18pt; background-color: #e8f5e9;
border-radius: 8pt; border: 1pt solid #4CAF50;">
<div style="margin-bottom: 10pt;">
<strong style="font-size: 13pt;">Alice Johnson - Mathematics</strong>
<span style="float: right; font-size: 20pt; font-weight: bold; color: #4CAF50;">
A (95%)
</span>
<div style="clear: both;"></div>
</div>
<meter value="95" min="0" max="100" low="60" high="85" optimum="100"
style="width: 100%; height: 28pt; border: 2pt solid #4CAF50;">
95%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #2e7d32;">
Excellent - Above high threshold (85%). Target: 100% (perfect score)
</p>
</div>
<div style="margin-bottom: 20pt; padding: 18pt; background-color: #e8f5e9;
border-radius: 8pt; border: 1pt solid #8BC34A;">
<div style="margin-bottom: 10pt;">
<strong style="font-size: 13pt;">Bob Smith - Science</strong>
<span style="float: right; font-size: 20pt; font-weight: bold; color: #8BC34A;">
B (82%)
</span>
<div style="clear: both;"></div>
</div>
<meter value="82" min="0" max="100" low="60" high="85" optimum="100"
style="width: 100%; height: 28pt; border: 2pt solid #8BC34A;">
82%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #558b2f;">
Good - In target range (60-85%). Target: 100% (perfect score)
</p>
</div>
<div style="margin-bottom: 20pt; padding: 18pt; background-color: #fff3e0;
border-radius: 8pt; border: 1pt solid #FF9800;">
<div style="margin-bottom: 10pt;">
<strong style="font-size: 13pt;">Carol Williams - English</strong>
<span style="float: right; font-size: 20pt; font-weight: bold; color: #FF9800;">
C (68%)
</span>
<div style="clear: both;"></div>
</div>
<meter value="68" min="0" max="100" low="60" high="85" optimum="100"
style="width: 100%; height: 28pt; border: 2pt solid #FF9800;">
68%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #e65100;">
Satisfactory - In passing range but below good threshold (85%).
Target: 100% (perfect score)
</p>
</div>
<div style="margin-bottom: 0; padding: 18pt; background-color: #ffebee;
border-radius: 8pt; border: 1pt solid #d32f2f;">
<div style="margin-bottom: 10pt;">
<strong style="font-size: 13pt;">David Brown - History</strong>
<span style="float: right; font-size: 20pt; font-weight: bold; color: #d32f2f;">
D (55%)
</span>
<div style="clear: both;"></div>
</div>
<meter value="55" min="0" max="100" low="60" high="85" optimum="100"
style="width: 100%; height: 28pt; border: 2pt solid #d32f2f;">
55%
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #c62828;">
Needs Improvement - Below passing threshold (60%).
Target: 100% (perfect score)
<br/>
<strong>⚠ Tutoring recommended</strong>
</p>
</div>
<div style="margin-top: 25pt; padding: 18pt; background-color: #e3f2fd;
border-radius: 8pt; font-size: 10pt;">
<strong>Grading Configuration:</strong><br/>
Optimum: 100% (perfect score is ideal)<br/>
Low Threshold: 60% (passing grade) | High Threshold: 85% (honor roll)<br/>
<br/>
<strong>Logic:</strong> Higher scores are better. Optimum at maximum (100%)
means green appears above 85%, orange between 60-85%, and red below 60%.
</div>
</div>
Storage Capacity Management (Lower is Better)
<div style="padding: 25pt; background-color: #f5f5f5; border-radius: 10pt;">
<h2 style="margin: 0 0 25pt 0; color: #333; text-align: center;">
Storage Capacity Management
</h2>
<div style="margin-bottom: 20pt; padding: 20pt; background-color: white;
border-radius: 8pt; box-shadow: 0 2pt 8pt rgba(0,0,0,0.1);">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt; color: #4CAF50;">SSD System Drive (C:)</strong>
<span style="float: right;">
<span style="font-size: 20pt; font-weight: bold; color: #4CAF50;">120 GB</span>
<span style="font-size: 11pt; color: #666;"> / 500 GB</span>
</span>
<div style="clear: both;"></div>
</div>
<meter value="24" min="0" max="100" low="30" high="75" optimum="0"
style="width: 100%; height: 30pt; border: 2pt solid #4CAF50;">
24% used
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #4CAF50;">
Excellent - Low usage (24%, below 30% threshold). Target: 0% (minimal usage)
<br/>
380 GB free space available
</p>
</div>
<div style="margin-bottom: 20pt; padding: 20pt; background-color: white;
border-radius: 8pt; box-shadow: 0 2pt 8pt rgba(0,0,0,0.1);">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt; color: #FF9800;">HDD Data Drive (D:)</strong>
<span style="float: right;">
<span style="font-size: 20pt; font-weight: bold; color: #FF9800;">550 GB</span>
<span style="font-size: 11pt; color: #666;"> / 1000 GB</span>
</span>
<div style="clear: both;"></div>
</div>
<meter value="55" min="0" max="100" low="30" high="75" optimum="0"
style="width: 100%; height: 30pt; border: 2pt solid #FF9800;">
55% used
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #FF9800;">
Moderate - Medium usage (55%, in 30-75% range). Target: 0% (minimal usage)
<br/>
450 GB free space remaining - Monitor usage
</p>
</div>
<div style="margin-bottom: 0; padding: 20pt; background-color: white;
border-radius: 8pt; box-shadow: 0 2pt 8pt rgba(0,0,0,0.1);">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt; color: #d32f2f;">Archive Drive (E:)</strong>
<span style="float: right;">
<span style="font-size: 20pt; font-weight: bold; color: #d32f2f;">1850 GB</span>
<span style="font-size: 11pt; color: #666;"> / 2000 GB</span>
</span>
<div style="clear: both;"></div>
</div>
<meter value="92.5" min="0" max="100" low="30" high="75" optimum="0"
style="width: 100%; height: 30pt; border: 2pt solid #d32f2f;">
92.5% used
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #d32f2f;">
Critical - High usage (92.5%, well above 75% threshold). Target: 0% (minimal usage)
<br/>
<strong>⚠ Only 150 GB free - Cleanup required immediately!</strong>
</p>
</div>
<div style="margin-top: 25pt; padding: 20pt; background-color: #e3f2fd;
border-radius: 8pt; font-size: 10pt;">
<strong>Storage Policy Configuration:</strong><br/>
Optimum: 0% (minimal storage usage is ideal for maximum available space)<br/>
Low Threshold: 30% (comfortable usage) | High Threshold: 75% (high usage warning)<br/>
<br/>
<strong>Logic:</strong> Lower storage usage is better. Optimum at minimum (0%)
means green appears below 30% used, orange between 30-75% used, and red
above 75% used (critical - cleanup needed).
</div>
</div>
pH Balance Monitoring (Middle is Better)
<div style="padding: 25pt; background-color: #eceff1; border-radius: 10pt;">
<h2 style="margin: 0 0 25pt 0; color: #37474f; text-align: center;">
Water Quality pH Monitoring
</h2>
<div style="margin-bottom: 20pt; padding: 20pt; background-color: white;
border-radius: 8pt; border-left: 5pt solid #4CAF50;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt; color: #2e7d32;">Drinking Water Supply</strong>
<span style="float: right; font-size: 20pt; font-weight: bold; color: #4CAF50;">
pH 7.1
</span>
<div style="clear: both;"></div>
</div>
<meter value="7.1" min="0" max="14" low="6.5" high="8.5" optimum="7.0"
style="width: 100%; height: 30pt; border: 2pt solid #607d8b;">
pH 7.1
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #2e7d32;">
Optimal - Near neutral pH (7.1, close to target 7.0). Safe for consumption.
</p>
</div>
<div style="margin-bottom: 20pt; padding: 20pt; background-color: white;
border-radius: 8pt; border-left: 5pt solid #4CAF50;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt; color: #2e7d32;">Swimming Pool</strong>
<span style="float: right; font-size: 20pt; font-weight: bold; color: #4CAF50;">
pH 7.5
</span>
<div style="clear: both;"></div>
</div>
<meter value="7.5" min="0" max="14" low="7.2" high="7.8" optimum="7.5"
style="width: 100%; height: 30pt; border: 2pt solid #607d8b;">
pH 7.5
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #2e7d32;">
Perfect - Exactly at optimal pH (7.5). Ideal for swimming.
</p>
</div>
<div style="margin-bottom: 20pt; padding: 20pt; background-color: white;
border-radius: 8pt; border-left: 5pt solid #FF9800;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt; color: #e65100;">Aquarium (Freshwater)</strong>
<span style="float: right; font-size: 20pt; font-weight: bold; color: #FF9800;">
pH 8.8
</span>
<div style="clear: both;"></div>
</div>
<meter value="8.8" min="0" max="14" low="6.5" high="7.5" optimum="7.0"
style="width: 100%; height: 30pt; border: 2pt solid #607d8b;">
pH 8.8
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #e65100;">
Too Alkaline - Above optimal range (8.8, target 7.0). Adjust water chemistry.
</p>
</div>
<div style="margin-bottom: 0; padding: 20pt; background-color: white;
border-radius: 8pt; border-left: 5pt solid #d32f2f;">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 13pt; color: #c62828;">Industrial Wastewater</strong>
<span style="float: right; font-size: 20pt; font-weight: bold; color: #d32f2f;">
pH 3.8
</span>
<div style="clear: both;"></div>
</div>
<meter value="3.8" min="0" max="14" low="6.5" high="8.5" optimum="7.0"
style="width: 100%; height: 30pt; border: 2pt solid #607d8b;">
pH 3.8
</meter>
<p style="margin: 10pt 0 0 0; font-size: 10pt; color: #c62828;">
Critically Acidic - Far below optimal range (3.8, target 7.0).
<br/>
<strong>⚠ Must neutralize before discharge - Environmental hazard!</strong>
</p>
</div>
<div style="margin-top: 25pt; padding: 20pt; background-color: #bbdefb;
border-radius: 8pt; font-size: 10pt;">
<strong>pH Scale Configuration:</strong><br/>
<table style="width: 100%; margin-top: 12pt; font-size: 9pt;">
<tr>
<td style="padding: 6pt;">pH 0-6.5:</td>
<td style="padding: 6pt;">Acidic (corrosive)</td>
</tr>
<tr>
<td style="padding: 6pt;">pH 6.5-8.5:</td>
<td style="padding: 6pt;">Neutral Range (safe)</td>
</tr>
<tr>
<td style="padding: 6pt;">pH 8.5-14:</td>
<td style="padding: 6pt;">Alkaline (caustic)</td>
</tr>
</table>
<div style="margin-top: 12pt;">
<strong>General Configuration:</strong><br/>
Optimum: 7.0 (neutral pH is ideal for most applications)<br/>
Low Threshold: 6.5 | High Threshold: 8.5<br/>
<br/>
<strong>Logic:</strong> Middle pH is best. Optimum at neutral (7.0) means
green appears in neutral range (6.5-8.5), orange when too acidic (<6.5)
or too alkaline (>8.5).
</div>
</div>
</div>
Sales Performance Target (Higher is Better)
<div style="padding: 30pt; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white; border-radius: 12pt;">
<h1 style="margin: 0 0 30pt 0; text-align: center; font-size: 24pt;">
Q4 2024 Sales Performance
</h1>
<div style="background-color: rgba(255,255,255,0.2); padding: 25pt;
border-radius: 10pt; margin-bottom: 25pt;">
<h3 style="margin: 0 0 15pt 0; font-size: 16pt;">Revenue Goal</h3>
<meter value="875000" min="0" max="1000000" low="400000" high="800000" optimum="1000000"
style="width: 100%; height: 45pt; border: 3pt solid rgba(255,255,255,0.4);">
$875K
</meter>
<div style="margin-top: 18pt; text-align: center;">
<span style="font-size: 42pt; font-weight: bold;">
$875,000
</span>
<span style="font-size: 18pt; opacity: 0.9;"> / $1,000,000</span>
<br/>
<span style="font-size: 14pt; opacity: 0.95; margin-top: 8pt; display: block;">
87.5% of target achieved - Above high threshold (80%)
</span>
</div>
<div style="margin-top: 15pt; padding: 15pt; background-color: rgba(76,175,80,0.3);
border-radius: 8pt; font-size: 11pt;">
<strong>Status:</strong> Excellent performance! On track to exceed goal.<br/>
Only $125,000 remaining to reach target of $1M.
</div>
</div>
<div style="background-color: rgba(255,255,255,0.2); padding: 25pt;
border-radius: 10pt; margin-bottom: 25pt;">
<h3 style="margin: 0 0 15pt 0; font-size: 16pt;">New Customer Acquisition</h3>
<meter value="156" min="0" max="200" low="80" high="150" optimum="200"
style="width: 100%; height: 45pt; border: 3pt solid rgba(255,255,255,0.4);">
156 customers
</meter>
<div style="margin-top: 18pt; text-align: center;">
<span style="font-size: 42pt; font-weight: bold;">
156
</span>
<span style="font-size: 18pt; opacity: 0.9;"> / 200</span>
<br/>
<span style="font-size: 14pt; opacity: 0.95; margin-top: 8pt; display: block;">
78% of target achieved - Above high threshold (75%)
</span>
</div>
<div style="margin-top: 15pt; padding: 15pt; background-color: rgba(76,175,80,0.3);
border-radius: 8pt; font-size: 11pt;">
<strong>Status:</strong> Great progress! 44 more customers needed to reach target.
</div>
</div>
<div style="background-color: rgba(255,255,255,0.2); padding: 25pt;
border-radius: 10pt;">
<h3 style="margin: 0 0 15pt 0; font-size: 16pt;">Customer Satisfaction Score</h3>
<meter value="4.7" min="1" max="5" low="3" high="4.5" optimum="5"
style="width: 100%; height: 45pt; border: 3pt solid rgba(255,255,255,0.4);">
4.7/5.0
</meter>
<div style="margin-top: 18pt; text-align: center;">
<span style="font-size: 42pt; font-weight: bold;">
4.7
</span>
<span style="font-size: 18pt; opacity: 0.9;"> / 5.0</span>
<br/>
<span style="font-size: 14pt; opacity: 0.95; margin-top: 8pt; display: block;">
94% satisfaction - Well above high threshold (4.5/5)
</span>
</div>
<div style="margin-top: 15pt; padding: 15pt; background-color: rgba(76,175,80,0.3);
border-radius: 8pt; font-size: 11pt;">
<strong>Status:</strong> Outstanding customer satisfaction!<br/>
Exceeds excellent threshold (4.5) - maintain quality service.
</div>
</div>
<div style="margin-top: 30pt; padding: 25pt; background-color: rgba(0,0,0,0.2);
border-radius: 10pt; font-size: 11pt;">
<strong style="font-size: 13pt;">Performance Target Configuration:</strong><br/>
<table style="width: 100%; margin-top: 15pt; font-size: 10pt;">
<tr>
<td style="padding: 8pt; width: 180pt;"><strong>Revenue:</strong></td>
<td style="padding: 8pt;">
Optimum: $1M (maximum target)<br/>
Low: $400K (40%) | High: $800K (80%)
</td>
</tr>
<tr>
<td style="padding: 8pt;"><strong>New Customers:</strong></td>
<td style="padding: 8pt;">
Optimum: 200 (maximum target)<br/>
Low: 80 (40%) | High: 150 (75%)
</td>
</tr>
<tr>
<td style="padding: 8pt;"><strong>Satisfaction:</strong></td>
<td style="padding: 8pt;">
Optimum: 5.0 (perfect score)<br/>
Low: 3.0 (acceptable) | High: 4.5 (excellent)
</td>
</tr>
</table>
<div style="margin-top: 15pt; padding-top: 15pt;
border-top: 1pt solid rgba(255,255,255,0.3);">
<strong>Logic:</strong> Higher values are better for all metrics. Optimum
at maximum means green appears above high thresholds, orange in middle
ranges, and red below low thresholds.
</div>
</div>
</div>
Dynamic Optimum Based on Context
<!-- Model: {
environment: "production",
cpuUsage: 45,
devOptimum: 50,
prodOptimum: 0
} -->
<div style="padding: 20pt; border: 2pt solid #336699; border-radius: 8pt;">
<h3 style="margin: 0 0 20pt 0; color: #336699;">
Environment-Specific CPU Monitoring
</h3>
<div style="margin-bottom: 15pt; padding: 15pt; background-color: #e3f2fd;
border-radius: 6pt;">
<div style="margin-bottom: 8pt;">
<strong>Environment:</strong>
<span style="margin-left: 10pt; padding: 4pt 12pt; background-color: #1976d2;
color: white; border-radius: 4pt; font-weight: bold;">
</span>
</div>
<div style="font-size: 10pt; color: #666; margin-top: 8pt;">
Production: Optimum = 0% (minimal load preferred)<br/>
Development: Optimum = 50% (moderate load expected during testing)
</div>
</div>
<div style="margin-bottom: 12pt;">
<strong>Current CPU Usage:</strong>
<span style="float: right; font-weight: bold; font-size: 14pt;">
%
</span>
<div style="clear: both;"></div>
</div>
<meter value=""
min="0"
max="100"
low="30"
high="75"
optimum=""
style="width: 100%; height: 30pt; border: 2pt solid #336699;">
%
</meter>
<div style="margin-top: 12pt; padding: 12pt; background-color: #fff3e0;
border-radius: 4pt; font-size: 10pt;">
<strong>Interpretation:</strong><br/>
In <strong></strong> environment, optimal CPU is
<strong>%</strong>.
<br/><br/>
Current usage (%) is
.
<br/><br/>
Color logic changes based on environment - same value can be green in
development but orange in production due to different optimum settings.
</div>
</div>
Multiple Meters with Different Optimum Values
<!-- Model: {
metrics: [
{name: "CPU Usage", value: 45, min: 0, max: 100, low: 30, high: 75, optimum: 0, unit: "%", pattern: "minimize"},
{name: "Throughput", value: 850, min: 0, max: 1000, low: 400, high: 700, optimum: 1000, unit: " req/s", pattern: "maximize"},
{name: "Temperature", value: 72, min: 60, max: 90, low: 68, high: 78, optimum: 72, unit: "°F", pattern: "target"}
]
} -->
<div style="padding: 25pt; background-color: #fafafa; border-radius: 10pt;">
<h2 style="margin: 0 0 25pt 0; color: #333; text-align: center;">
System Metrics Dashboard
</h2>
<template data-bind="">
<div style="margin-bottom: 25pt; padding: 20pt; background-color: white;
border-radius: 8pt; box-shadow: 0 2pt 6pt rgba(0,0,0,0.1);">
<div style="margin-bottom: 12pt;">
<strong style="font-size: 14pt;"></strong>
<span style="float: right; font-size: 18pt; font-weight: bold;">
</span>
<div style="clear: both;"></div>
</div>
<meter value=""
min="content<h1 id="open--the-details-open-state-attribute">@open : The Details Open State Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute specifies whether a <code class="language-plaintext highlighter-rouge"><details></code> 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.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute controls disclosure widget state:</p>
<ul>
<li>Boolean attribute (presence = open, absence = closed)</li>
<li>Used exclusively with <code class="language-plaintext highlighter-rouge"><details></code> element</li>
<li>Determines initial expanded/collapsed state</li>
<li>No value required (presence is sufficient)</li>
<li>In PDF context, typically renders content as expanded</li>
<li>Supports data binding for dynamic state control</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Open/expanded by default --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Click to collapse<span class="nt"></summary></span>
<span class="nt"><p></span>This content is visible by default.<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Closed/collapsed by default --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Click to expand<span class="nt"></summary></span>
<span class="nt"><p></span>This content is hidden by default.<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Boolean attribute - these are equivalent --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"open"</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="c"><!-- Dynamic open state --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><p></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute is used exclusively with:</p>
<h3 id="details-element">Details Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><details></code> - Disclosure widget (only element that uses open)</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute supports data binding for dynamic state control:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic open state from model --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></span>Section Title<span class="nt"></summary></span>
<span class="nt"><p></span>Section content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Conditional open --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><div></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Repeating details with different states --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><div><h1</span> <span class="na">id=</span><span class="s">"name--the-name-attribute"</span><span class="nt">></span>@name : The Name Attribute<span class="nt"></h1></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> 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 <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute is still useful for organization, documentation, and potential future interactive form support.<span class="nt"></p></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"usage"</span><span class="nt">></span>Usage<span class="nt"></h2></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute identifies form fields and:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Provides a semantic identifier for the input field<span class="nt"></li></span>
<span class="nt"><li></span>Groups radio buttons together so only one can be selected<span class="nt"></li></span>
<span class="nt"><li></span>Documents field purposes for code readability<span class="nt"></li></span>
<span class="nt"><li></span>Can be used for internal references and organization<span class="nt"></li></span>
<span class="nt"><li></span>Auto-generated if not specified (for PDF form field metadata)<span class="nt"></li></span>
<span class="nt"><li></span>Supports data binding for dynamic names<span class="nt"></li></span>
<span class="nt"><li></span>Essential for radio button groups<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Named text input --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customerName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Radio button group with shared name --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Credit Card<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>PayPal<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Checkbox with name --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"agreeTerms"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"supported-elements"</span><span class="nt">></span>Supported Elements<span class="nt"></h2></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute is supported by the following elements:<span class="nt"></p></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Element<span class="nt"></th></span>
<span class="nt"><th></span>Description<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="ni">&gt;</span><span class="nt"></code></td></span>
<span class="nt"><td></span>Form input field element - all types<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span><span class="ni">&lt;</span>select<span class="ni">&gt;</span><span class="nt"></code></td></span>
<span class="nt"><td></span>Dropdown selection element (if supported)<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span><span class="ni">&lt;</span>textarea<span class="ni">&gt;</span><span class="nt"></code></td></span>
<span class="nt"><td></span>Multi-line text area element (if supported)<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"name-attribute-behavior"</span><span class="nt">></span>Name Attribute Behavior<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"for-text-based-inputs"</span><span class="nt">></span>For Text-Based Inputs<span class="nt"></h3></span>
<span class="nt"><p></span>The name provides an identifier for the field:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"firstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"tel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"(555) 123-4567"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Purpose<span class="nt"></strong></span>: Documents the field’s purpose and provides metadata for the PDF form field.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"for-radio-button-groups"</span><span class="nt">></span>For Radio Button Groups<span class="nt"></h3></span>
<span class="nt"><p></span>The name groups radio buttons together:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Only one radio with name="gender" can be selected --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Male<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Female<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Other<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Behavior<span class="nt"></strong></span>: All radio buttons with the same <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> are treated as a group. In the visual representation, only one can appear selected.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"for-checkboxes"</span><span class="nt">></span>For Checkboxes<span class="nt"></h3></span>
<span class="nt"><p></span>Each checkbox typically has a unique name:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"emailNotifications"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Email notifications<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"smsAlerts"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>SMS alerts<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"newsletter"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Newsletter<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Purpose<span class="nt"></strong></span>: Identifies each checkbox independently for documentation and organization.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"auto-generated-names"</span><span class="nt">></span>Auto-Generated Names<span class="nt"></h3></span>
<span class="nt"><p></span>If no name is specified, Scryber auto-generates one:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- No name specified --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Auto-named field"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Scryber generates something like "input_1", "input_2", etc. --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Best Practice<span class="nt"></strong></span>: Always specify meaningful names for better code organization and documentation.<span class="nt"></p></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"binding-values"</span><span class="nt">></span>Binding Values<span class="nt"></h2></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute can be set statically or dynamically:<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"static-name"</span><span class="nt">></span>Static Name<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customerName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"dynamic-name-with-data-binding"</span><span class="nt">></span>Dynamic Name with Data Binding<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Model: { fieldName: "customerEmail" } --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"conditional-name"</span><span class="nt">></span>Conditional Name<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Model: { isPrimary: true } --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-in-repeating-templates"</span><span class="nt">></span>Name in Repeating Templates<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Model: { fields: [{id: "field1", value: "Value 1"}, ...] } --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>template<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>data-bind=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/template<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"notes"</span><span class="nt">></span>Notes<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"radio-button-grouping"</span><span class="nt">></span>Radio Button Grouping<span class="nt"></h3></span>
<span class="nt"><p></span>Radio buttons with the same <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> form a group:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Payment method group --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"payment"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Credit Card<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"payment"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>PayPal<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"payment"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Bank Transfer<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Shipping method group (different name) --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shipping"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Standard<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shipping"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Express<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Important<span class="nt"></strong></span>: Different groups must have different names.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-uniqueness"</span><span class="nt">></span>Name Uniqueness<span class="nt"></h3></span>
<span class="nt"><p></span>For most input types, names should be unique within the form:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Good: Unique names --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"firstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"lastName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Avoid: Duplicate names (except for radio groups) --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"jane@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Exception<span class="nt"></strong></span>: Radio buttons in the same group intentionally share a name.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-conventions"</span><span class="nt">></span>Name Conventions<span class="nt"></h3></span>
<span class="nt"><p></span>Use clear, descriptive names following common conventions:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- camelCase --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"firstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"lastName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- snake_case --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"first_name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"last_name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- kebab-case --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"first-name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"last-name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- PascalCase --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"FirstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"LastName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Best Practice<span class="nt"></strong></span>: Choose one convention and use it consistently throughout your document.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-vs-id"</span><span class="nt">></span>Name vs. ID<span class="nt"></h3></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> and <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>id<span class="nt"></code></span> attributes serve different purposes:<span class="nt"></p></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Attribute<span class="nt"></th></span>
<span class="nt"><th></span>Purpose<span class="nt"></th></span>
<span class="nt"><th></span>Uniqueness<span class="nt"></th></span>
<span class="nt"><th></span>Usage<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></td></span>
<span class="nt"><td></span>Field identifier for grouping and data<span class="nt"></td></span>
<span class="nt"><td></span>Unique per field (except radio groups)<span class="nt"></td></span>
<span class="nt"><td></span>Form field identification<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>id<span class="nt"></code></td></span>
<span class="nt"><td></span>Element identifier for styling and references<span class="nt"></td></span>
<span class="nt"><td></span>Must be unique per document<span class="nt"></td></span>
<span class="nt"><td></span>CSS selectors, label <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>for<span class="nt"></code></span> attribute<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Both name and id --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer-email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Label references id, not name --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer-email"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Email:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer-email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-and-pdf-form-fields"</span><span class="nt">></span>Name and PDF Form Fields<span class="nt"></h3></span>
<span class="nt"><p></span>In the generated PDF, the <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute becomes metadata for the form field:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Used internally by Scryber for field identification<span class="nt"></li></span>
<span class="nt"><li></span>May appear in PDF form field properties<span class="nt"></li></span>
<span class="nt"><li></span>Helps with debugging and document inspection<span class="nt"></li></span>
<span class="nt"><li></span>Not visible to end users viewing the PDF<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"empty-or-missing-names"</span><span class="nt">></span>Empty or Missing Names<span class="nt"></h3></span>
<span class="nt"><p></span>If no name is provided:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- No name attribute --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Unnamed field"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Behavior<span class="nt"></strong></span>:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Scryber auto-generates a name (e.g., “input_1”, “input_2”)<span class="nt"></li></span>
<span class="nt"><li></span>Field still renders correctly in PDF<span class="nt"></li></span>
<span class="nt"><li></span>Less readable code and harder to maintain<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><strong></span>Recommendation<span class="nt"></strong></span>: Always provide meaningful names.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"names-with-special-characters"</span><span class="nt">></span>Names with Special Characters<span class="nt"></h3></span>
<span class="nt"><p></span>Names can contain letters, numbers, hyphens, and underscores:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Valid names --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer_name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email-address"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"field123"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Value"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Field_123_ABC"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Value"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Avoid spaces and special characters --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Not recommended --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email@address"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Best Practice<span class="nt"></strong></span>: Use only letters, numbers, hyphens, and underscores.<span class="nt"></p></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"examples"</span><span class="nt">></span>Examples<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"basic-named-inputs"</span><span class="nt">></span>Basic Named Inputs<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Personal information form --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 120pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
First Name:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"firstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 200pt; padding: 6pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 120pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Last Name:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"lastName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 200pt; padding: 6pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 120pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Email:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john.doe@example.com"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 300pt; padding: 6pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 120pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Phone:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"tel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"(555) 123-4567"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 180pt; padding: 6pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"radio-button-groups"</span><span class="nt">></span>Radio Button Groups<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Gender selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Gender:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Male<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Female<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Other<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Prefer not to say<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Payment method selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Payment Method:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Credit Card<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>PayPal<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Bank Transfer<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Cash on Delivery<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Shipping speed selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Shipping Speed:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shippingSpeed"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Standard (5-7 days) - Free<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shippingSpeed"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Express (2-3 days) - $9.99<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shippingSpeed"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Overnight (1 day) - $24.99<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"named-checkboxes"</span><span class="nt">></span>Named Checkboxes<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Preferences with individual names --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"padding: 15pt; border: 1pt solid #e0e0e0; background-color: #f9f9f9;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Communication Preferences:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"emailNotifications"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Email notifications<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"smsAlerts"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>SMS alerts<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"pushNotifications"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Push notifications<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"newsletter"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Weekly newsletter<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"marketingEmails"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Marketing emails<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productUpdates"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Product updates<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"form-with-name-and-id-attributes"</span><span class="nt">></span>Form with Name and ID Attributes<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>style<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nc"</span><span class="nt">></span>.form-row<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>{<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>margin-bottom<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>12pt<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>}<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nc"</span><span class="nt">></span>.form-label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>{<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>display<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nb"</span><span class="nt">></span>block<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>font-weight<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nb"</span><span class="nt">></span>bold<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>margin-bottom<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>5pt<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>color<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>#333333<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>}<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nc"</span><span class="nt">></span>.form-input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>{<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>width<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>100%<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>padding<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>8pt<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>border<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>1pt<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nb"</span><span class="nt">></span>solid<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>#cccccc<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>border-radius<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>3pt<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>}<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/style<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-fullname"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Full Name:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-fullname"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"fullName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Alice Johnson"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-input"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Email Address:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"alice.johnson@email.com"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-input"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Phone Number:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"tel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"(555) 987-6543"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-input"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 250pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-address"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Address:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-address"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"address"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"123 Main Street, Apartment 4B"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-input"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-comments"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Comments:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-comments"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"comments"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Please deliver between 9 AM and 5 PM."<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>options=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"MultiLine"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; height: 80pt; padding: 10pt;
border: 1pt solid #cccccc; font-size: 10pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"survey-form-with-named-fields"</span><span class="nt">></span>Survey Form with Named Fields<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h2<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"color: #336699;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Customer Feedback Survey<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h2<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 1: Text input --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
1. What is your name?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"respondentName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Michael Chen"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 2: Email input --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
2. What is your email address?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"respondentEmail"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"michael.chen@email.com"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 3: Radio group --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
3. How satisfied are you with our product?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Very Satisfied<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Satisfied<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Neutral<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Dissatisfied<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Very Dissatisfied<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 4: Checkboxes --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
4. Which features do you use? (Select all that apply)
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureDashboard"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Dashboard<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureReporting"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Reporting<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureAnalytics"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Analytics<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureAPI"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>API Integration<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureMobile"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Mobile App<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 5: Number input --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
5. How many years have you been a customer?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"number"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"yearsAsCustomer"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"3"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100pt; padding: 8pt; border: 1pt solid #cccccc;
text-align: center; font-size: 14pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 6: Text area --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
6. What improvements would you suggest?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"suggestions"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"I would love to see better mobile app integration and more customizable dashboard widgets."<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>options=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"MultiLine"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; height: 100pt; padding: 10pt;
border: 1pt solid #cccccc; font-size: 10pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 7: Radio group --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
7. Would you recommend us to others?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"recommendUs"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Yes, definitely<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"recommendUs"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Maybe<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"recommendUs"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Probably not<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"data-bound-names"</span><span class="nt">></span>Data-Bound Names<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- 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 class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h3<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"color: #336699;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Dynamic Form Fields<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h3<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>template<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>data-bind=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/template<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"registration-form-with-organized-names"</span><span class="nt">></span>Registration Form with Organized Names<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h2<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"color: #336699; border-bottom: 3pt solid #336699; padding-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
New User Registration
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h2<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Personal Information Section --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>fieldset<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>legend<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Personal Information
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/legend<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Full Name:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalFullName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Jennifer Martinez"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Date of Birth:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"date"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalDOB"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"1990-05-15"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 180pt; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Gender:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalGender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Male<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalGender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Female<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalGender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Other<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/fieldset<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Contact Information Section --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>fieldset<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>legend<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Contact Information
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/legend<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Email Address:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactEmail"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"jennifer.m@email.com"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Phone Number:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"tel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactPhone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"(555) 234-5678"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Address:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactAddress"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"789 Oak Avenue"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 48%; margin-right: 2%;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
City:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactCity"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Portland"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 24%; margin-right: 2%;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
State:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactState"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"OR"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
text-align: center;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 24%;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
ZIP Code:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactZIP"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"97201"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
text-align: center;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Preferred Contact Method:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactPreferredMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Email<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactPreferredMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Phone<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactPreferredMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Mail<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/fieldset<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Account Settings Section --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>fieldset<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>legend<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Account Settings
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/legend<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Username:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"accountUsername"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"jmartinez2024"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;
font-family: monospace;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Password:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"password"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"accountPassword"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"••••••••••"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;
font-family: monospace;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Security Question:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"accountSecurityQuestion"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"What was your first pet's name?"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
background-color: #f9f9f9;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Security Answer:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"accountSecurityAnswer"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Fluffy"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 300pt; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/fieldset<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Preferences Section --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>fieldset<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>legend<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Preferences
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/legend<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; display: block; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Newsletter and Communications:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefNewsletter"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Weekly newsletter<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefProductUpdates"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Product updates<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefPromotions"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Promotional offers<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 0;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; display: block; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Account Type:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefAccountType"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Personal<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefAccountType"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Business<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefAccountType"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Enterprise<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/fieldset<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Agreement --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"agreementTerms"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
I agree to the Terms of Service and Privacy Policy
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"multiple-radio-button-groups"</span><span class="nt">></span>Multiple Radio Button Groups<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h3<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"color: #336699;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Product Configuration<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h3<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Size selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Select Size:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productSize"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Small<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productSize"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Medium<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productSize"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Large<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productSize"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>X-Large<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Color selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Select Color:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productColor"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Blue<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productColor"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Red<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productColor"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Green<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productColor"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Black<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Material selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Select Material:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productMaterial"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Cotton<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productMaterial"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Polyester<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productMaterial"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Cotton/Polyester Blend<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productMaterial"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Wool<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"see-also"</span><span class="nt">></span>See Also<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmltags/input.html"</span><span class="nt">></span>input<span class="nt"></a></span> - Input field element<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmlattributes/type.html"</span><span class="nt">></span>type<span class="nt"></a></span> - Input type attribute<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmlattributes/value.html"</span><span class="nt">></span>value<span class="nt"></a></span> - Value attribute for form fields<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmlattributes/for.html"</span><span class="nt">></span>for<span class="nt"></a></span> - Label for attribute<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmltags/label.html"</span><span class="nt">></span>label<span class="nt"></a></span> - Label element for form fields<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmltags/fieldset.html"</span><span class="nt">></span>fieldset<span class="nt"></a></span> - Fieldset and legend for grouping<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/binding/"</span><span class="nt">></span>Data Binding<span class="nt"></a></span> - Dynamic data binding and expressions<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/styles/"</span><span class="nt">></span>CSS Styles<span class="nt"></a></span> - Complete CSS styling reference<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></template></span>
<span class="c"><!-- Open first section, close others --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><p></p></span>
<span class="nt"></details></span>
<span class="nt"></template></span>
</code></pre></div></div>
<p><strong>Data Model Example:</strong></p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"expanded"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"showByDefault"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"heading"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Important Information"</span><span class="p">,</span><span class="w">
</span><span class="nl">"body"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Content details..."</span><span class="p">,</span><span class="w">
</span><span class="nl">"sections"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Section 1"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:</span><span class="w"> </span><span class="s2">"First section content"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isOpen"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Section 2"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Second section content"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isOpen"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nl">"faqs"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"index"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
</span><span class="nl">"question"</span><span class="p">:</span><span class="w"> </span><span class="s2">"What is this?"</span><span class="p">,</span><span class="w">
</span><span class="nl">"answer"</span><span class="p">:</span><span class="w"> </span><span class="s2">"This is the answer."</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"index"</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w">
</span><span class="nl">"question"</span><span class="p">:</span><span class="w"> </span><span class="s2">"How does it work?"</span><span class="p">,</span><span class="w">
</span><span class="nl">"answer"</span><span class="p">:</span><span class="w"> </span><span class="s2">"It works like this."</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="boolean-attribute">Boolean Attribute</h3>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute is a boolean attribute:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- These all mean "open" --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"open"</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"true"</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="c"><!-- These all mean "closed" --></span>
<span class="nt"><details></span>Collapsed<span class="nt"></details></span>
<span class="c"><!-- Omitting the attribute = closed --></span>
<span class="c"><!-- WRONG: Cannot set to false --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"false"</span><span class="nt">></span>Still treated as open!<span class="nt"></details></span>
</code></pre></div></div>
<p><strong>Important:</strong> To close a details element, <strong>omit the attribute entirely</strong>. Setting <code class="language-plaintext highlighter-rouge">open="false"</code> still counts as having the attribute and will be treated as open.</p>
<h3 id="details-element-structure">Details Element Structure</h3>
<p>The <code class="language-plaintext highlighter-rouge"><details></code> element works with <code class="language-plaintext highlighter-rouge"><summary></code>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="c"><!-- Summary is the visible heading/toggle --></span>
<span class="nt"><summary></span>Click to toggle<span class="nt"></summary></span>
<span class="c"><!-- Content shown when open --></span>
<span class="nt"><p></span>This is the expandable content.<span class="nt"></p></span>
<span class="nt"><p></span>Multiple elements can be included.<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<p>Components:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge"><details></code> - Container for the disclosure widget</li>
<li><code class="language-plaintext highlighter-rouge"><summary></code> - Heading/label (always visible)</li>
<li>Content - Additional elements (visible when open)</li>
</ul>
<h3 id="default-state">Default State</h3>
<p>Without the <code class="language-plaintext highlighter-rouge">open</code> attribute:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Closed by default --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Expand for more<span class="nt"></summary></span>
<span class="nt"><p></span>Hidden content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Equivalent to: --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"null"</span><span class="nt">></span>
<span class="nt"><summary></span>Expand for more<span class="nt"></summary></span>
<span class="nt"><p></span>Hidden content<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<h3 id="pdf-context-limitations">PDF Context Limitations</h3>
<p>In PDF documents:</p>
<ol>
<li><strong>Interactive toggles</strong> are not typically supported</li>
<li><strong>Open state</strong> usually determines static rendering</li>
<li><strong>Content with open</strong> is rendered as expanded</li>
<li><strong>Content without open</strong> may be rendered collapsed or expanded depending on PDF generator</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- In PDF: Usually renders expanded --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Important Information<span class="nt"></summary></span>
<span class="nt"><p></span>This content is visible in the PDF.<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- In PDF: May render collapsed or expanded --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Additional Details<span class="nt"></summary></span>
<span class="nt"><p></span>Rendering depends on PDF generator settings.<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<p><strong>Best Practice for PDFs:</strong></p>
<ul>
<li>Use <code class="language-plaintext highlighter-rouge">open</code> for important content that should always be visible</li>
<li>Omit <code class="language-plaintext highlighter-rouge">open</code> for supplementary content (may be omitted or included)</li>
<li>Test rendering in your PDF generator</li>
</ul>
<h3 id="summary-element">Summary Element</h3>
<p>The <code class="language-plaintext highlighter-rouge"><summary></code> element is the visible label:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="c"><!-- Summary is always visible --></span>
<span class="nt"><summary></span>Chapter 1: Introduction<span class="nt"></summary></span>
<span class="c"><!-- Content visible only when open --></span>
<span class="nt"><p></span>
This chapter introduces the fundamental concepts
that will be explored throughout the document.
<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<p>If <code class="language-plaintext highlighter-rouge"><summary></code> is omitted, browsers typically add default text like “Details”:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Without summary --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><p></span>Content without explicit summary<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Browser may render as: --></span>
<span class="c"><!-- Details --></span>
<span class="c"><!-- Content without explicit summary --></span>
</code></pre></div></div>
<p><strong>Best Practice:</strong> Always include <code class="language-plaintext highlighter-rouge"><summary></code> for clarity.</p>
<h3 id="nesting-details">Nesting Details</h3>
<p>Details elements can be nested:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Parent Section<span class="nt"></summary></span>
<span class="nt"><p></span>Parent content<span class="nt"></p></span>
<span class="c"><!-- Nested details (closed by default) --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Subsection A<span class="nt"></summary></span>
<span class="nt"><p></span>Subsection A content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Subsection B<span class="nt"></summary></span>
<span class="nt"><p></span>Subsection B content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></details></span>
</code></pre></div></div>
<h3 id="styling-details">Styling Details</h3>
<p>CSS can style details elements:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nt">details</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">#ccc</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">summary</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">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">-10pt</span> <span class="m">-10pt</span> <span class="m">10pt</span> <span class="m">-10pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Style for open state */</span>
<span class="nt">details</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f0f8ff</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">details</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#e3f2fd</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Styled Details Element<span class="nt"></summary></span>
<span class="nt"><p></span>Content with custom styling<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<h3 id="accessibility">Accessibility</h3>
<p>Proper use improves accessibility:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Good: Clear summary text --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>What are the system requirements?<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Operating System: Windows 10 or later<span class="nt"></li></span>
<span class="nt"><li></span>RAM: 4GB minimum, 8GB recommended<span class="nt"></li></span>
<span class="nt"><li></span>Storage: 500MB available space<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="c"><!-- Good: Descriptive summary --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Important Safety Information<span class="nt"></summary></span>
<span class="nt"><p></span>Read this before operating the equipment...<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<p>Screen readers announce:</p>
<ul>
<li>The summary text</li>
<li>The expanded/collapsed state</li>
<li>How to toggle (if interactive)</li>
</ul>
<h3 id="javascript-interaction-web">JavaScript Interaction (Web)</h3>
<p>In web browsers (not PDFs), details can be controlled via JavaScript:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><details</span> <span class="na">id=</span><span class="s">"myDetails"</span><span class="nt">></span>
<span class="nt"><summary></span>Toggle Me<span class="nt"></summary></span>
<span class="nt"><p></span>Content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><script></span>
<span class="c1">// Get element</span>
<span class="kd">const</span> <span class="nx">details</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">myDetails</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">// Open programmatically</span>
<span class="nx">details</span><span class="p">.</span><span class="nx">open</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="c1">// Close programmatically</span>
<span class="nx">details</span><span class="p">.</span><span class="nx">open</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="c1">// Toggle</span>
<span class="nx">details</span><span class="p">.</span><span class="nx">open</span> <span class="o">=</span> <span class="o">!</span><span class="nx">details</span><span class="p">.</span><span class="nx">open</span><span class="p">;</span>
<span class="c1">// Listen for toggle event</span>
<span class="nx">details</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">toggle</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Details toggled:</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">open</span><span class="p">);</span>
<span class="p">});</span>
<span class="nt"></script></span>
</code></pre></div></div>
<p><strong>Note:</strong> This JavaScript functionality is for web browsers only and does not apply to static PDFs.</p>
<h3 id="use-cases">Use Cases</h3>
<p>Common uses for details elements:</p>
<ol>
<li><strong>FAQ sections</strong> - Collapsible question/answer pairs</li>
<li><strong>Additional information</strong> - Optional supplementary content</li>
<li><strong>Long content</strong> - Breaking up lengthy documents</li>
<li><strong>Progressive disclosure</strong> - Revealing information as needed</li>
<li><strong>Footnotes</strong> - Expandable annotations</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- FAQ --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>What is your return policy?<span class="nt"></summary></span>
<span class="nt"><p></span>We accept returns within 30 days of purchase...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Additional info --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Technical specifications<span class="nt"></summary></span>
<span class="nt"><table></span>
<span class="c"><!-- Detailed specs --></span>
<span class="nt"></table></span>
<span class="nt"></details></span>
<span class="c"><!-- Footnote --></span>
<span class="nt"><p></span>
Important concept<span class="nt"><sup></span>1<span class="nt"></sup></span>
<span class="nt"></p></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Footnote 1<span class="nt"></summary></span>
<span class="nt"><p></span>Additional context and references...<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-open-and-closed-details">Basic Open and Closed Details</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Details Example<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nt">details</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">#ccc</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">summary</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">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Product Information<span class="nt"></h1></span>
<span class="c"><!-- Open by default --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Description (expanded by default)<span class="nt"></summary></span>
<span class="nt"><p></span>
This product features advanced technology and premium
materials for exceptional performance.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Closed by default --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Technical Specifications (collapsed by default)<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Dimensions: 10 x 5 x 3 inches<span class="nt"></li></span>
<span class="nt"><li></span>Weight: 2.5 lbs<span class="nt"></li></span>
<span class="nt"><li></span>Material: Aluminum alloy<span class="nt"></li></span>
<span class="nt"><li></span>Color: Matte black<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="c"><!-- Closed by default --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Shipping Information (collapsed by default)<span class="nt"></summary></span>
<span class="nt"><p></span>
Free shipping on orders over $50.
Standard delivery: 5-7 business days.
Express delivery: 2-3 business days.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="faq-section">FAQ Section</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h1></span>Frequently Asked Questions<span class="nt"></h1></span>
<span class="c"><!-- First FAQ open, others closed --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>What is Scryber?<span class="nt"></summary></span>
<span class="nt"><p></span>
Scryber is a .NET library for generating PDF documents from
HTML and CSS templates.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>How do I install Scryber?<span class="nt"></summary></span>
<span class="nt"><p></span>
Install via NuGet Package Manager:
<span class="nt"></p></span>
<span class="nt"><pre><code></span>Install-Package Scryber.Core<span class="nt"></code></pre></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Is Scryber free to use?<span class="nt"></summary></span>
<span class="nt"><p></span>
Yes, Scryber.Core is open source and free to use under
the LGPL-3.0 license.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>What HTML elements are supported?<span class="nt"></summary></span>
<span class="nt"><p></span>
Scryber supports most standard HTML5 elements including
divs, spans, tables, lists, images, and semantic elements.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Can I use CSS for styling?<span class="nt"></summary></span>
<span class="nt"><p></span>
Yes, Scryber supports CSS for styling including external
stylesheets, inline styles, and embedded style blocks.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="styled-details-elements">Styled Details Elements</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Styled Details<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nc">.info-section</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">overflow</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.info-section</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</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">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.info-section</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#4a7ba7</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.info-section</span> <span class="o">></span> <span class="o">*</span><span class="nd">:not</span><span class="o">(</span><span class="nt">summary</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.warning-section</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#ffc107</span><span class="p">;</span>
<span class="nl">border-left-width</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff3cd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.warning-section</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#856404</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">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Important Information<span class="nt"></h1></span>
<span class="c"><!-- Blue styled section (open) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"info-section"</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Getting Started<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>Follow these steps to get started:<span class="nt"></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Install the required software<span class="nt"></li></span>
<span class="nt"><li></span>Configure your environment<span class="nt"></li></span>
<span class="nt"><li></span>Run the setup wizard<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Warning styled section (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"warning-section"</span><span class="nt">></span>
<span class="nt"><summary></span>⚠ Important Safety Notice<span class="nt"></summary></span>
<span class="nt"><p></span>
Always disconnect power before performing maintenance.
Failure to do so may result in electric shock or injury.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Blue styled section (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"info-section"</span><span class="nt">></span>
<span class="nt"><summary></span>Advanced Configuration<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>Advanced users can customize additional settings...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="nested-details">Nested Details</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h1></span>Product Documentation<span class="nt"></h1></span>
<span class="c"><!-- Parent details (open) --></span>
<span class="nt"><details</span> <span class="na">open</span> <span class="na">style=</span><span class="s">"border: 2pt solid #336699; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-size: 14pt; font-weight: bold; margin-bottom: 10pt;"</span><span class="nt">></span>
Chapter 1: Getting Started
<span class="nt"></summary></span>
<span class="nt"><p></span>This chapter covers the basics of using the product.<span class="nt"></p></span>
<span class="c"><!-- Nested child details (closed) --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>1.1 Installation<span class="nt"></summary></span>
<span class="nt"><p></span>Step-by-step installation instructions...<span class="nt"></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Download the installer<span class="nt"></li></span>
<span class="nt"><li></span>Run setup.exe<span class="nt"></li></span>
<span class="nt"><li></span>Follow the wizard<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></details></span>
<span class="c"><!-- Nested child details (open) --></span>
<span class="nt"><details</span> <span class="na">open</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>1.2 First Steps<span class="nt"></summary></span>
<span class="nt"><p></span>Getting started with your first project...<span class="nt"></p></span>
<span class="c"><!-- Deeply nested details (closed) --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 5pt; margin: 5pt 0;"</span><span class="nt">></span>
<span class="nt"><summary></span>1.2.1 Creating a Project<span class="nt"></summary></span>
<span class="nt"><p></span>Click File → New → Project...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 5pt; margin: 5pt 0;"</span><span class="nt">></span>
<span class="nt"><summary></span>1.2.2 Basic Configuration<span class="nt"></summary></span>
<span class="nt"><p></span>Configure your project settings...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></details></span>
<span class="c"><!-- Nested child details (closed) --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>1.3 Quick Tutorial<span class="nt"></summary></span>
<span class="nt"><p></span>A quick 5-minute tutorial...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></details></span>
<span class="c"><!-- Parent details (closed) --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 2pt solid #336699; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-size: 14pt; font-weight: bold;"</span><span class="nt">></span>
Chapter 2: Advanced Features
<span class="nt"></summary></span>
<span class="nt"><p></span>Advanced topics for experienced users...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="data-bound-faq">Data-Bound FAQ</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- 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
}
]
} --></span>
<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>FAQ<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nt">details</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">#ccc</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">summary</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">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">details</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Frequently Asked Questions<span class="nt"></h1></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><p></p></span>
<span class="nt"></details></span>
<span class="nt"></template></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="technical-documentation">Technical Documentation</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>API Documentation<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nc">.api-method</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">#ccc</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</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="nc">.api-method</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Courier New'</span><span class="p">,</span> <span class="nb">monospace</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="p">}</span>
<span class="nc">.api-method</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#e9ecef</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.api-method</span> <span class="o">></span> <span class="nt">div</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.http-method</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">3pt</span> <span class="m">8pt</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="nl">font-size</span><span class="p">:</span> <span class="m">9pt</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-right</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.get</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.post</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.delete</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>REST API Documentation<span class="nt"></h1></span>
<span class="nt"><h2></span>User Endpoints<span class="nt"></h2></span>
<span class="c"><!-- GET endpoint (open) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"api-method"</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"http-method get"</span><span class="nt">></span>GET<span class="nt"></span></span>
/api/users
<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p><strong></span>Description:<span class="nt"></strong></span> Retrieve all users<span class="nt"></p></span>
<span class="nt"><p><strong></span>Response:<span class="nt"></strong></p></span>
<span class="nt"><pre><code></span>{
"users": [
{ "id": 1, "name": "John Doe" },
{ "id": 2, "name": "Jane Smith" }
]
}<span class="nt"></code></pre></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- POST endpoint (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"api-method"</span><span class="nt">></span>
<span class="nt"><summary></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"http-method post"</span><span class="nt">></span>POST<span class="nt"></span></span>
/api/users
<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p><strong></span>Description:<span class="nt"></strong></span> Create a new user<span class="nt"></p></span>
<span class="nt"><p><strong></span>Request Body:<span class="nt"></strong></p></span>
<span class="nt"><pre><code></span>{
"name": "New User",
"email": "user@example.com"
}<span class="nt"></code></pre></span>
<span class="nt"><p><strong></span>Response:<span class="nt"></strong></p></span>
<span class="nt"><pre><code></span>{
"id": 3,
"name": "New User",
"email": "user@example.com"
}<span class="nt"></code></pre></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- DELETE endpoint (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"api-method"</span><span class="nt">></span>
<span class="nt"><summary></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"http-method delete"</span><span class="nt">></span>DELETE<span class="nt"></span></span>
/api/users/:id
<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p><strong></span>Description:<span class="nt"></strong></span> Delete a user by ID<span class="nt"></p></span>
<span class="nt"><p><strong></span>Parameters:<span class="nt"></strong></p></span>
<span class="nt"><ul></span>
<span class="nt"><li><code></span>id<span class="nt"></code></span> (required): User ID<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><strong></span>Response:<span class="nt"></strong></p></span>
<span class="nt"><pre><code></span>{
"success": true,
"message": "User deleted"
}<span class="nt"></code></pre></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="expandable-sections-in-report">Expandable Sections in Report</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Annual Report<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nc">.report-section</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.report-section</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</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="p">}</span>
<span class="nc">.report-section</span> <span class="o">></span> <span class="nt">div</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><p><em></span>Click section headings to expand/collapse content.<span class="nt"></em></p></span>
<span class="c"><!-- Executive Summary (open) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"report-section"</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Executive Summary<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>
Fiscal year 2025 demonstrated strong performance across
all business units with 25% revenue growth and market
expansion into three new regions.
<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Total Revenue: $50M (+25% YoY)<span class="nt"></li></span>
<span class="nt"><li></span>Net Profit: $10M (+30% YoY)<span class="nt"></li></span>
<span class="nt"><li></span>Customer Base: 10,000 (+40% YoY)<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Financial Performance (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"report-section"</span><span class="nt">></span>
<span class="nt"><summary></span>Financial Performance<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><h3></span>Revenue Breakdown<span class="nt"></h3></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Category<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Revenue<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Growth<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Product Sales<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>$30M<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>+20%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Services<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>$20M<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>+35%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Operations (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"report-section"</span><span class="nt">></span>
<span class="nt"><summary></span>Operations<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>
Operational efficiency improved through automation
initiatives and process optimization...
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Future Outlook (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"report-section"</span><span class="nt">></span>
<span class="nt"><summary></span>Future Outlook<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>
Looking ahead to 2026, we anticipate continued growth
driven by product innovation and market expansion...
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="product-comparison-with-expandable-details">Product Comparison with Expandable Details</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h1></span>Product Comparison<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Feature<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Basic<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Pro<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Enterprise<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Price<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>$9.99/mo<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>$29.99/mo<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>$99.99/mo<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Storage<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>10 GB<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>100 GB<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Unlimited<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><h2></span>Detailed Feature Comparison<span class="nt"></h2></span>
<span class="c"><!-- Basic plan details --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>Basic Plan Details<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>10 GB storage<span class="nt"></li></span>
<span class="nt"><li></span>1 user<span class="nt"></li></span>
<span class="nt"><li></span>Email support<span class="nt"></li></span>
<span class="nt"><li></span>Basic features<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="c"><!-- Pro plan details (open) --></span>
<span class="nt"><details</span> <span class="na">open</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>Pro Plan Details (Most Popular)<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>100 GB storage<span class="nt"></li></span>
<span class="nt"><li></span>Up to 5 users<span class="nt"></li></span>
<span class="nt"><li></span>Email + chat support<span class="nt"></li></span>
<span class="nt"><li></span>Advanced features<span class="nt"></li></span>
<span class="nt"><li></span>Priority support<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="c"><!-- Enterprise plan details --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>Enterprise Plan Details<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Unlimited storage<span class="nt"></li></span>
<span class="nt"><li></span>Unlimited users<span class="nt"></li></span>
<span class="nt"><li></span>24/7 phone support<span class="nt"></li></span>
<span class="nt"><li></span>All features<span class="nt"></li></span>
<span class="nt"><li></span>Dedicated account manager<span class="nt"></li></span>
<span class="nt"><li></span>Custom integrations<span class="nt"></li></span>
<span class="nt"><li></span>SLA guarantee<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="troubleshooting-guide">Troubleshooting Guide</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Troubleshooting Guide<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nc">.problem</span> <span class="p">{</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#dc3545</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8d7da</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.problem</span> <span class="nt">summary</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">color</span><span class="p">:</span> <span class="m">#721c24</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.solution</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">white</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">#ccc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Troubleshooting Guide<span class="nt"></h1></span>
<span class="nt"><p></span>Click on a problem to see the solution.<span class="nt"></p></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"problem"</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Problem: Application won't start<span class="nt"></summary></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"solution"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Solution:<span class="nt"></strong></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Verify system requirements are met<span class="nt"></li></span>
<span class="nt"><li></span>Check for conflicting software<span class="nt"></li></span>
<span class="nt"><li></span>Reinstall the application<span class="nt"></li></span>
<span class="nt"><li></span>Contact support if issue persists<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"problem"</span><span class="nt">></span>
<span class="nt"><summary></span>Problem: Slow performance<span class="nt"></summary></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"solution"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Solution:<span class="nt"></strong></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Close unnecessary background applications<span class="nt"></li></span>
<span class="nt"><li></span>Clear application cache<span class="nt"></li></span>
<span class="nt"><li></span>Increase available memory<span class="nt"></li></span>
<span class="nt"><li></span>Check for software updates<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"problem"</span><span class="nt">></span>
<span class="nt"><summary></span>Problem: Error message on startup<span class="nt"></summary></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"solution"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Solution:<span class="nt"></strong></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Note the exact error message<span class="nt"></li></span>
<span class="nt"><li></span>Check the error log in /logs/error.log<span class="nt"></li></span>
<span class="nt"><li></span>Search our knowledge base<span class="nt"></li></span>
<span class="nt"><li></span>Contact support with error details<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/details.html">details</a> - Details disclosure element</li>
<li><a href="/reference/htmltags/summary.html">summary</a> - Summary element for details</li>
<li><a href="/reference/htmlattributes/hidden.html">hidden</a> - Hidden attribute for visibility</li>
<li><a href="/reference/techniques/collapsible.html">Collapsible Content</a> - Creating collapsible sections</li>
<li><a href="/reference/interactive/">Interactive Elements</a> - Interactive HTML elements</li>
</ul>
<hr />
"
max="themeJekyll::Drops::ThemeDrop"
low=""
high=""
optimum=""
style="width: 100%; height: 32pt; border: 2pt solid #666;">
</meter>
<div style="margin-top: 12pt; padding: 12pt; background-color: #f5f5f5;
border-radius: 4pt; font-size: 10pt;">
<strong>Configuration:</strong><br/>
Pattern: <strong></strong> | Optimum: <br/>
Range: content<h1 id="open--the-details-open-state-attribute">@open : The Details Open State Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute specifies whether a <code class="language-plaintext highlighter-rouge"><details></code> 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.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute controls disclosure widget state:</p>
<ul>
<li>Boolean attribute (presence = open, absence = closed)</li>
<li>Used exclusively with <code class="language-plaintext highlighter-rouge"><details></code> element</li>
<li>Determines initial expanded/collapsed state</li>
<li>No value required (presence is sufficient)</li>
<li>In PDF context, typically renders content as expanded</li>
<li>Supports data binding for dynamic state control</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Open/expanded by default --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Click to collapse<span class="nt"></summary></span>
<span class="nt"><p></span>This content is visible by default.<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Closed/collapsed by default --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Click to expand<span class="nt"></summary></span>
<span class="nt"><p></span>This content is hidden by default.<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Boolean attribute - these are equivalent --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"open"</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="c"><!-- Dynamic open state --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><p></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute is used exclusively with:</p>
<h3 id="details-element">Details Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><details></code> - Disclosure widget (only element that uses open)</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute supports data binding for dynamic state control:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic open state from model --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></span>Section Title<span class="nt"></summary></span>
<span class="nt"><p></span>Section content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Conditional open --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><div></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Repeating details with different states --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><div><h1</span> <span class="na">id=</span><span class="s">"name--the-name-attribute"</span><span class="nt">></span>@name : The Name Attribute<span class="nt"></h1></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> 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 <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute is still useful for organization, documentation, and potential future interactive form support.<span class="nt"></p></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"usage"</span><span class="nt">></span>Usage<span class="nt"></h2></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute identifies form fields and:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Provides a semantic identifier for the input field<span class="nt"></li></span>
<span class="nt"><li></span>Groups radio buttons together so only one can be selected<span class="nt"></li></span>
<span class="nt"><li></span>Documents field purposes for code readability<span class="nt"></li></span>
<span class="nt"><li></span>Can be used for internal references and organization<span class="nt"></li></span>
<span class="nt"><li></span>Auto-generated if not specified (for PDF form field metadata)<span class="nt"></li></span>
<span class="nt"><li></span>Supports data binding for dynamic names<span class="nt"></li></span>
<span class="nt"><li></span>Essential for radio button groups<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Named text input --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customerName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Radio button group with shared name --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Credit Card<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>PayPal<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Checkbox with name --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"agreeTerms"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"supported-elements"</span><span class="nt">></span>Supported Elements<span class="nt"></h2></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute is supported by the following elements:<span class="nt"></p></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Element<span class="nt"></th></span>
<span class="nt"><th></span>Description<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="ni">&gt;</span><span class="nt"></code></td></span>
<span class="nt"><td></span>Form input field element - all types<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span><span class="ni">&lt;</span>select<span class="ni">&gt;</span><span class="nt"></code></td></span>
<span class="nt"><td></span>Dropdown selection element (if supported)<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span><span class="ni">&lt;</span>textarea<span class="ni">&gt;</span><span class="nt"></code></td></span>
<span class="nt"><td></span>Multi-line text area element (if supported)<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"name-attribute-behavior"</span><span class="nt">></span>Name Attribute Behavior<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"for-text-based-inputs"</span><span class="nt">></span>For Text-Based Inputs<span class="nt"></h3></span>
<span class="nt"><p></span>The name provides an identifier for the field:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"firstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"tel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"(555) 123-4567"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Purpose<span class="nt"></strong></span>: Documents the field’s purpose and provides metadata for the PDF form field.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"for-radio-button-groups"</span><span class="nt">></span>For Radio Button Groups<span class="nt"></h3></span>
<span class="nt"><p></span>The name groups radio buttons together:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Only one radio with name="gender" can be selected --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Male<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Female<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Other<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Behavior<span class="nt"></strong></span>: All radio buttons with the same <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> are treated as a group. In the visual representation, only one can appear selected.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"for-checkboxes"</span><span class="nt">></span>For Checkboxes<span class="nt"></h3></span>
<span class="nt"><p></span>Each checkbox typically has a unique name:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"emailNotifications"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Email notifications<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"smsAlerts"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>SMS alerts<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"newsletter"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Newsletter<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Purpose<span class="nt"></strong></span>: Identifies each checkbox independently for documentation and organization.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"auto-generated-names"</span><span class="nt">></span>Auto-Generated Names<span class="nt"></h3></span>
<span class="nt"><p></span>If no name is specified, Scryber auto-generates one:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- No name specified --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Auto-named field"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Scryber generates something like "input_1", "input_2", etc. --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Best Practice<span class="nt"></strong></span>: Always specify meaningful names for better code organization and documentation.<span class="nt"></p></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"binding-values"</span><span class="nt">></span>Binding Values<span class="nt"></h2></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute can be set statically or dynamically:<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"static-name"</span><span class="nt">></span>Static Name<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customerName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"dynamic-name-with-data-binding"</span><span class="nt">></span>Dynamic Name with Data Binding<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Model: { fieldName: "customerEmail" } --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"conditional-name"</span><span class="nt">></span>Conditional Name<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Model: { isPrimary: true } --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-in-repeating-templates"</span><span class="nt">></span>Name in Repeating Templates<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Model: { fields: [{id: "field1", value: "Value 1"}, ...] } --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>template<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>data-bind=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/template<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"notes"</span><span class="nt">></span>Notes<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"radio-button-grouping"</span><span class="nt">></span>Radio Button Grouping<span class="nt"></h3></span>
<span class="nt"><p></span>Radio buttons with the same <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> form a group:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Payment method group --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"payment"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Credit Card<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"payment"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>PayPal<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"payment"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Bank Transfer<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Shipping method group (different name) --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shipping"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Standard<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shipping"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="ni">&gt;</span><span class="nt"></span></span>Express<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Important<span class="nt"></strong></span>: Different groups must have different names.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-uniqueness"</span><span class="nt">></span>Name Uniqueness<span class="nt"></h3></span>
<span class="nt"><p></span>For most input types, names should be unique within the form:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Good: Unique names --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"firstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"lastName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Avoid: Duplicate names (except for radio groups) --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"jane@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Exception<span class="nt"></strong></span>: Radio buttons in the same group intentionally share a name.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-conventions"</span><span class="nt">></span>Name Conventions<span class="nt"></h3></span>
<span class="nt"><p></span>Use clear, descriptive names following common conventions:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- camelCase --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"firstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"lastName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- snake_case --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"first_name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"last_name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- kebab-case --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"first-name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"last-name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- PascalCase --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"FirstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"LastName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Best Practice<span class="nt"></strong></span>: Choose one convention and use it consistently throughout your document.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-vs-id"</span><span class="nt">></span>Name vs. ID<span class="nt"></h3></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> and <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>id<span class="nt"></code></span> attributes serve different purposes:<span class="nt"></p></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Attribute<span class="nt"></th></span>
<span class="nt"><th></span>Purpose<span class="nt"></th></span>
<span class="nt"><th></span>Uniqueness<span class="nt"></th></span>
<span class="nt"><th></span>Usage<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></td></span>
<span class="nt"><td></span>Field identifier for grouping and data<span class="nt"></td></span>
<span class="nt"><td></span>Unique per field (except radio groups)<span class="nt"></td></span>
<span class="nt"><td></span>Form field identification<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>id<span class="nt"></code></td></span>
<span class="nt"><td></span>Element identifier for styling and references<span class="nt"></td></span>
<span class="nt"><td></span>Must be unique per document<span class="nt"></td></span>
<span class="nt"><td></span>CSS selectors, label <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>for<span class="nt"></code></span> attribute<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Both name and id --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer-email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Label references id, not name --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer-email"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Email:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer-email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"name-and-pdf-form-fields"</span><span class="nt">></span>Name and PDF Form Fields<span class="nt"></h3></span>
<span class="nt"><p></span>In the generated PDF, the <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>name<span class="nt"></code></span> attribute becomes metadata for the form field:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Used internally by Scryber for field identification<span class="nt"></li></span>
<span class="nt"><li></span>May appear in PDF form field properties<span class="nt"></li></span>
<span class="nt"><li></span>Helps with debugging and document inspection<span class="nt"></li></span>
<span class="nt"><li></span>Not visible to end users viewing the PDF<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"empty-or-missing-names"</span><span class="nt">></span>Empty or Missing Names<span class="nt"></h3></span>
<span class="nt"><p></span>If no name is provided:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- No name attribute --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Unnamed field"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Behavior<span class="nt"></strong></span>:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Scryber auto-generates a name (e.g., “input_1”, “input_2”)<span class="nt"></li></span>
<span class="nt"><li></span>Field still renders correctly in PDF<span class="nt"></li></span>
<span class="nt"><li></span>Less readable code and harder to maintain<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><strong></span>Recommendation<span class="nt"></strong></span>: Always provide meaningful names.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"names-with-special-characters"</span><span class="nt">></span>Names with Special Characters<span class="nt"></h3></span>
<span class="nt"><p></span>Names can contain letters, numbers, hyphens, and underscores:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Valid names --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer_name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email-address"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"field123"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Value"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Field_123_ABC"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Value"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Avoid spaces and special characters --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Not recommended --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"customer name"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John Doe"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email@address"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john@example.com"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Best Practice<span class="nt"></strong></span>: Use only letters, numbers, hyphens, and underscores.<span class="nt"></p></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"examples"</span><span class="nt">></span>Examples<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"basic-named-inputs"</span><span class="nt">></span>Basic Named Inputs<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Personal information form --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 120pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
First Name:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"firstName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"John"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 200pt; padding: 6pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 120pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Last Name:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"lastName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Doe"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 200pt; padding: 6pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 120pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Email:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"john.doe@example.com"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 300pt; padding: 6pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 120pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Phone:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"tel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"(555) 123-4567"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 180pt; padding: 6pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"radio-button-groups"</span><span class="nt">></span>Radio Button Groups<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Gender selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Gender:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Male<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Female<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Other<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"gender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Prefer not to say<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Payment method selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Payment Method:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Credit Card<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>PayPal<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Bank Transfer<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"paymentMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Cash on Delivery<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Shipping speed selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Shipping Speed:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shippingSpeed"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Standard (5-7 days) - Free<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shippingSpeed"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Express (2-3 days) - $9.99<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"shippingSpeed"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Overnight (1 day) - $24.99<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"named-checkboxes"</span><span class="nt">></span>Named Checkboxes<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Preferences with individual names --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"padding: 15pt; border: 1pt solid #e0e0e0; background-color: #f9f9f9;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Communication Preferences:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"emailNotifications"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Email notifications<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"smsAlerts"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>SMS alerts<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"pushNotifications"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Push notifications<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"newsletter"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Weekly newsletter<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"marketingEmails"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Marketing emails<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productUpdates"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Product updates<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"form-with-name-and-id-attributes"</span><span class="nt">></span>Form with Name and ID Attributes<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>style<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nc"</span><span class="nt">></span>.form-row<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>{<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>margin-bottom<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>12pt<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>}<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nc"</span><span class="nt">></span>.form-label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>{<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>display<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nb"</span><span class="nt">></span>block<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>font-weight<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nb"</span><span class="nt">></span>bold<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>margin-bottom<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>5pt<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>color<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>#333333<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>}<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nc"</span><span class="nt">></span>.form-input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>{<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>width<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>100%<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>padding<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>8pt<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>border<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>1pt<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nb"</span><span class="nt">></span>solid<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>#cccccc<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">></span>border-radius<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">></span>3pt<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">></span>}<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/style<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-fullname"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Full Name:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-fullname"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"fullName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Alice Johnson"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-input"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Email Address:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"alice.johnson@email.com"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-input"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Phone Number:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"tel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"phone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"(555) 987-6543"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-input"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 250pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-address"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Address:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-address"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"address"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"123 Main Street, Apartment 4B"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-input"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-row"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>for=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-comments"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>class=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"form-label"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Comments:<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>id=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"user-comments"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"comments"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Please deliver between 9 AM and 5 PM."<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>options=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"MultiLine"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; height: 80pt; padding: 10pt;
border: 1pt solid #cccccc; font-size: 10pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"survey-form-with-named-fields"</span><span class="nt">></span>Survey Form with Named Fields<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h2<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"color: #336699;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Customer Feedback Survey<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h2<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 1: Text input --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
1. What is your name?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"respondentName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Michael Chen"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 2: Email input --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
2. What is your email address?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"respondentEmail"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"michael.chen@email.com"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 3: Radio group --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
3. How satisfied are you with our product?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Very Satisfied<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Satisfied<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Neutral<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Dissatisfied<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"satisfactionLevel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Very Dissatisfied<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 4: Checkboxes --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
4. Which features do you use? (Select all that apply)
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureDashboard"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Dashboard<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureReporting"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Reporting<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureAnalytics"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Analytics<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureAPI"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>API Integration<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"featureMobile"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Mobile App<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 5: Number input --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
5. How many years have you been a customer?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"number"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"yearsAsCustomer"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"3"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100pt; padding: 8pt; border: 1pt solid #cccccc;
text-align: center; font-size: 14pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 6: Text area --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
6. What improvements would you suggest?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"suggestions"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"I would love to see better mobile app integration and more customizable dashboard widgets."<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>options=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"MultiLine"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; height: 100pt; padding: 10pt;
border: 1pt solid #cccccc; font-size: 10pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Question 7: Radio group --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
7. Would you recommend us to others?
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"recommendUs"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Yes, definitely<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"recommendUs"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Maybe<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"recommendUs"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Probably not<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"data-bound-names"</span><span class="nt">></span>Data-Bound Names<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- 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 class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h3<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"color: #336699;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Dynamic Form Fields<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h3<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>template<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>data-bind=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/template<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"registration-form-with-organized-names"</span><span class="nt">></span>Registration Form with Organized Names<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h2<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"color: #336699; border-bottom: 3pt solid #336699; padding-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
New User Registration
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h2<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Personal Information Section --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>fieldset<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>legend<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Personal Information
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/legend<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Full Name:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalFullName"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Jennifer Martinez"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Date of Birth:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"date"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalDOB"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"1990-05-15"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 180pt; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Gender:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalGender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Male<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalGender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Female<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"personalGender"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Other<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/fieldset<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Contact Information Section --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>fieldset<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>legend<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Contact Information
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/legend<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Email Address:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"email"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactEmail"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"jennifer.m@email.com"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Phone Number:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"tel"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactPhone"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"(555) 234-5678"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Address:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactAddress"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"789 Oak Avenue"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 48%; margin-right: 2%;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
City:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactCity"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Portland"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 24%; margin-right: 2%;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
State:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactState"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"OR"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
text-align: center;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; width: 24%;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
ZIP Code:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactZIP"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"97201"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
text-align: center;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Preferred Contact Method:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactPreferredMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Email<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactPreferredMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Phone<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"contactPreferredMethod"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Mail<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/fieldset<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Account Settings Section --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>fieldset<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>legend<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Account Settings
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/legend<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Username:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"accountUsername"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"jmartinez2024"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;
font-family: monospace;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Password:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"password"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"accountPassword"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"••••••••••"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 250pt; padding: 8pt; border: 1pt solid #cccccc;
font-family: monospace;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Security Question:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"accountSecurityQuestion"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"What was your first pet's name?"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 100%; padding: 8pt; border: 1pt solid #cccccc;
background-color: #f9f9f9;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 12pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 5pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Security Answer:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"text"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"accountSecurityAnswer"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"Fluffy"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 300pt; padding: 8pt; border: 1pt solid #cccccc;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/fieldset<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Preferences Section --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>fieldset<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>legend<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Preferences
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/legend<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; display: block; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Newsletter and Communications:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefNewsletter"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Weekly newsletter<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefProductUpdates"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Product updates<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefPromotions"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Promotional offers<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 0;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-weight: bold; display: block; margin-bottom: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Account Type:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefAccountType"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Personal<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefAccountType"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Business<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"prefAccountType"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Enterprise<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/fieldset<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Agreement --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checkbox"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"agreementTerms"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"checked"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt; font-weight: bold;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
I agree to the Terms of Service and Privacy Policy
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"multiple-radio-button-groups"</span><span class="nt">></span>Multiple Radio Button Groups<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h3<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"color: #336699;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Product Configuration<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h3<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Size selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Select Size:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productSize"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Small<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productSize"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Medium<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productSize"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Large<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productSize"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>X-Large<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Color selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Select Color:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productColor"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Blue<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productColor"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Red<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-right: 25pt; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productColor"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Green<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: inline-block; margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productColor"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Black<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Material selection --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"display: block; font-weight: bold; margin-bottom: 10pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Select Material:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 15pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productMaterial"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Cotton<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productMaterial"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Polyester<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productMaterial"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"selected"<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Cotton/Polyester Blend<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-bottom: 6pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>input<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>type=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"radio"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>name=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"productMaterial"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>value=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>""<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"width: 15pt; height: 15pt;"<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>/<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"margin-left: 8pt;"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>Wool<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"see-also"</span><span class="nt">></span>See Also<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmltags/input.html"</span><span class="nt">></span>input<span class="nt"></a></span> - Input field element<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmlattributes/type.html"</span><span class="nt">></span>type<span class="nt"></a></span> - Input type attribute<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmlattributes/value.html"</span><span class="nt">></span>value<span class="nt"></a></span> - Value attribute for form fields<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmlattributes/for.html"</span><span class="nt">></span>for<span class="nt"></a></span> - Label for attribute<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmltags/label.html"</span><span class="nt">></span>label<span class="nt"></a></span> - Label element for form fields<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmltags/fieldset.html"</span><span class="nt">></span>fieldset<span class="nt"></a></span> - Fieldset and legend for grouping<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/binding/"</span><span class="nt">></span>Data Binding<span class="nt"></a></span> - Dynamic data binding and expressions<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/styles/"</span><span class="nt">></span>CSS Styles<span class="nt"></a></span> - Complete CSS styling reference<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></template></span>
<span class="c"><!-- Open first section, close others --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><p></p></span>
<span class="nt"></details></span>
<span class="nt"></template></span>
</code></pre></div></div>
<p><strong>Data Model Example:</strong></p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"expanded"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"showByDefault"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"heading"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Important Information"</span><span class="p">,</span><span class="w">
</span><span class="nl">"body"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Content details..."</span><span class="p">,</span><span class="w">
</span><span class="nl">"sections"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Section 1"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:</span><span class="w"> </span><span class="s2">"First section content"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isOpen"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Section 2"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Second section content"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isOpen"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nl">"faqs"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"index"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
</span><span class="nl">"question"</span><span class="p">:</span><span class="w"> </span><span class="s2">"What is this?"</span><span class="p">,</span><span class="w">
</span><span class="nl">"answer"</span><span class="p">:</span><span class="w"> </span><span class="s2">"This is the answer."</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"index"</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w">
</span><span class="nl">"question"</span><span class="p">:</span><span class="w"> </span><span class="s2">"How does it work?"</span><span class="p">,</span><span class="w">
</span><span class="nl">"answer"</span><span class="p">:</span><span class="w"> </span><span class="s2">"It works like this."</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="boolean-attribute">Boolean Attribute</h3>
<p>The <code class="language-plaintext highlighter-rouge">open</code> attribute is a boolean attribute:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- These all mean "open" --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"open"</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"true"</span><span class="nt">></span>Expanded<span class="nt"></details></span>
<span class="c"><!-- These all mean "closed" --></span>
<span class="nt"><details></span>Collapsed<span class="nt"></details></span>
<span class="c"><!-- Omitting the attribute = closed --></span>
<span class="c"><!-- WRONG: Cannot set to false --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"false"</span><span class="nt">></span>Still treated as open!<span class="nt"></details></span>
</code></pre></div></div>
<p><strong>Important:</strong> To close a details element, <strong>omit the attribute entirely</strong>. Setting <code class="language-plaintext highlighter-rouge">open="false"</code> still counts as having the attribute and will be treated as open.</p>
<h3 id="details-element-structure">Details Element Structure</h3>
<p>The <code class="language-plaintext highlighter-rouge"><details></code> element works with <code class="language-plaintext highlighter-rouge"><summary></code>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="c"><!-- Summary is the visible heading/toggle --></span>
<span class="nt"><summary></span>Click to toggle<span class="nt"></summary></span>
<span class="c"><!-- Content shown when open --></span>
<span class="nt"><p></span>This is the expandable content.<span class="nt"></p></span>
<span class="nt"><p></span>Multiple elements can be included.<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<p>Components:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge"><details></code> - Container for the disclosure widget</li>
<li><code class="language-plaintext highlighter-rouge"><summary></code> - Heading/label (always visible)</li>
<li>Content - Additional elements (visible when open)</li>
</ul>
<h3 id="default-state">Default State</h3>
<p>Without the <code class="language-plaintext highlighter-rouge">open</code> attribute:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Closed by default --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Expand for more<span class="nt"></summary></span>
<span class="nt"><p></span>Hidden content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Equivalent to: --></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">"null"</span><span class="nt">></span>
<span class="nt"><summary></span>Expand for more<span class="nt"></summary></span>
<span class="nt"><p></span>Hidden content<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<h3 id="pdf-context-limitations">PDF Context Limitations</h3>
<p>In PDF documents:</p>
<ol>
<li><strong>Interactive toggles</strong> are not typically supported</li>
<li><strong>Open state</strong> usually determines static rendering</li>
<li><strong>Content with open</strong> is rendered as expanded</li>
<li><strong>Content without open</strong> may be rendered collapsed or expanded depending on PDF generator</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- In PDF: Usually renders expanded --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Important Information<span class="nt"></summary></span>
<span class="nt"><p></span>This content is visible in the PDF.<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- In PDF: May render collapsed or expanded --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Additional Details<span class="nt"></summary></span>
<span class="nt"><p></span>Rendering depends on PDF generator settings.<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<p><strong>Best Practice for PDFs:</strong></p>
<ul>
<li>Use <code class="language-plaintext highlighter-rouge">open</code> for important content that should always be visible</li>
<li>Omit <code class="language-plaintext highlighter-rouge">open</code> for supplementary content (may be omitted or included)</li>
<li>Test rendering in your PDF generator</li>
</ul>
<h3 id="summary-element">Summary Element</h3>
<p>The <code class="language-plaintext highlighter-rouge"><summary></code> element is the visible label:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="c"><!-- Summary is always visible --></span>
<span class="nt"><summary></span>Chapter 1: Introduction<span class="nt"></summary></span>
<span class="c"><!-- Content visible only when open --></span>
<span class="nt"><p></span>
This chapter introduces the fundamental concepts
that will be explored throughout the document.
<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<p>If <code class="language-plaintext highlighter-rouge"><summary></code> is omitted, browsers typically add default text like “Details”:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Without summary --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><p></span>Content without explicit summary<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Browser may render as: --></span>
<span class="c"><!-- Details --></span>
<span class="c"><!-- Content without explicit summary --></span>
</code></pre></div></div>
<p><strong>Best Practice:</strong> Always include <code class="language-plaintext highlighter-rouge"><summary></code> for clarity.</p>
<h3 id="nesting-details">Nesting Details</h3>
<p>Details elements can be nested:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Parent Section<span class="nt"></summary></span>
<span class="nt"><p></span>Parent content<span class="nt"></p></span>
<span class="c"><!-- Nested details (closed by default) --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Subsection A<span class="nt"></summary></span>
<span class="nt"><p></span>Subsection A content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Subsection B<span class="nt"></summary></span>
<span class="nt"><p></span>Subsection B content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></details></span>
</code></pre></div></div>
<h3 id="styling-details">Styling Details</h3>
<p>CSS can style details elements:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nt">details</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">#ccc</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">summary</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">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">-10pt</span> <span class="m">-10pt</span> <span class="m">10pt</span> <span class="m">-10pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Style for open state */</span>
<span class="nt">details</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f0f8ff</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">details</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#e3f2fd</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Styled Details Element<span class="nt"></summary></span>
<span class="nt"><p></span>Content with custom styling<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<h3 id="accessibility">Accessibility</h3>
<p>Proper use improves accessibility:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Good: Clear summary text --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>What are the system requirements?<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Operating System: Windows 10 or later<span class="nt"></li></span>
<span class="nt"><li></span>RAM: 4GB minimum, 8GB recommended<span class="nt"></li></span>
<span class="nt"><li></span>Storage: 500MB available space<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="c"><!-- Good: Descriptive summary --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Important Safety Information<span class="nt"></summary></span>
<span class="nt"><p></span>Read this before operating the equipment...<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<p>Screen readers announce:</p>
<ul>
<li>The summary text</li>
<li>The expanded/collapsed state</li>
<li>How to toggle (if interactive)</li>
</ul>
<h3 id="javascript-interaction-web">JavaScript Interaction (Web)</h3>
<p>In web browsers (not PDFs), details can be controlled via JavaScript:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><details</span> <span class="na">id=</span><span class="s">"myDetails"</span><span class="nt">></span>
<span class="nt"><summary></span>Toggle Me<span class="nt"></summary></span>
<span class="nt"><p></span>Content<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><script></span>
<span class="c1">// Get element</span>
<span class="kd">const</span> <span class="nx">details</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">myDetails</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">// Open programmatically</span>
<span class="nx">details</span><span class="p">.</span><span class="nx">open</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="c1">// Close programmatically</span>
<span class="nx">details</span><span class="p">.</span><span class="nx">open</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="c1">// Toggle</span>
<span class="nx">details</span><span class="p">.</span><span class="nx">open</span> <span class="o">=</span> <span class="o">!</span><span class="nx">details</span><span class="p">.</span><span class="nx">open</span><span class="p">;</span>
<span class="c1">// Listen for toggle event</span>
<span class="nx">details</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">toggle</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Details toggled:</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">open</span><span class="p">);</span>
<span class="p">});</span>
<span class="nt"></script></span>
</code></pre></div></div>
<p><strong>Note:</strong> This JavaScript functionality is for web browsers only and does not apply to static PDFs.</p>
<h3 id="use-cases">Use Cases</h3>
<p>Common uses for details elements:</p>
<ol>
<li><strong>FAQ sections</strong> - Collapsible question/answer pairs</li>
<li><strong>Additional information</strong> - Optional supplementary content</li>
<li><strong>Long content</strong> - Breaking up lengthy documents</li>
<li><strong>Progressive disclosure</strong> - Revealing information as needed</li>
<li><strong>Footnotes</strong> - Expandable annotations</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- FAQ --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>What is your return policy?<span class="nt"></summary></span>
<span class="nt"><p></span>We accept returns within 30 days of purchase...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Additional info --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Technical specifications<span class="nt"></summary></span>
<span class="nt"><table></span>
<span class="c"><!-- Detailed specs --></span>
<span class="nt"></table></span>
<span class="nt"></details></span>
<span class="c"><!-- Footnote --></span>
<span class="nt"><p></span>
Important concept<span class="nt"><sup></span>1<span class="nt"></sup></span>
<span class="nt"></p></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Footnote 1<span class="nt"></summary></span>
<span class="nt"><p></span>Additional context and references...<span class="nt"></p></span>
<span class="nt"></details></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-open-and-closed-details">Basic Open and Closed Details</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Details Example<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nt">details</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">#ccc</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">summary</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">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Product Information<span class="nt"></h1></span>
<span class="c"><!-- Open by default --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Description (expanded by default)<span class="nt"></summary></span>
<span class="nt"><p></span>
This product features advanced technology and premium
materials for exceptional performance.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Closed by default --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Technical Specifications (collapsed by default)<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Dimensions: 10 x 5 x 3 inches<span class="nt"></li></span>
<span class="nt"><li></span>Weight: 2.5 lbs<span class="nt"></li></span>
<span class="nt"><li></span>Material: Aluminum alloy<span class="nt"></li></span>
<span class="nt"><li></span>Color: Matte black<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="c"><!-- Closed by default --></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Shipping Information (collapsed by default)<span class="nt"></summary></span>
<span class="nt"><p></span>
Free shipping on orders over $50.
Standard delivery: 5-7 business days.
Express delivery: 2-3 business days.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="faq-section">FAQ Section</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h1></span>Frequently Asked Questions<span class="nt"></h1></span>
<span class="c"><!-- First FAQ open, others closed --></span>
<span class="nt"><details</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>What is Scryber?<span class="nt"></summary></span>
<span class="nt"><p></span>
Scryber is a .NET library for generating PDF documents from
HTML and CSS templates.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>How do I install Scryber?<span class="nt"></summary></span>
<span class="nt"><p></span>
Install via NuGet Package Manager:
<span class="nt"></p></span>
<span class="nt"><pre><code></span>Install-Package Scryber.Core<span class="nt"></code></pre></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Is Scryber free to use?<span class="nt"></summary></span>
<span class="nt"><p></span>
Yes, Scryber.Core is open source and free to use under
the LGPL-3.0 license.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>What HTML elements are supported?<span class="nt"></summary></span>
<span class="nt"><p></span>
Scryber supports most standard HTML5 elements including
divs, spans, tables, lists, images, and semantic elements.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details></span>
<span class="nt"><summary></span>Can I use CSS for styling?<span class="nt"></summary></span>
<span class="nt"><p></span>
Yes, Scryber supports CSS for styling including external
stylesheets, inline styles, and embedded style blocks.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="styled-details-elements">Styled Details Elements</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Styled Details<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nc">.info-section</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">overflow</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.info-section</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</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">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.info-section</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#4a7ba7</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.info-section</span> <span class="o">></span> <span class="o">*</span><span class="nd">:not</span><span class="o">(</span><span class="nt">summary</span><span class="o">)</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.warning-section</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#ffc107</span><span class="p">;</span>
<span class="nl">border-left-width</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff3cd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.warning-section</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#856404</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">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Important Information<span class="nt"></h1></span>
<span class="c"><!-- Blue styled section (open) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"info-section"</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Getting Started<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>Follow these steps to get started:<span class="nt"></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Install the required software<span class="nt"></li></span>
<span class="nt"><li></span>Configure your environment<span class="nt"></li></span>
<span class="nt"><li></span>Run the setup wizard<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Warning styled section (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"warning-section"</span><span class="nt">></span>
<span class="nt"><summary></span>⚠ Important Safety Notice<span class="nt"></summary></span>
<span class="nt"><p></span>
Always disconnect power before performing maintenance.
Failure to do so may result in electric shock or injury.
<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="c"><!-- Blue styled section (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"info-section"</span><span class="nt">></span>
<span class="nt"><summary></span>Advanced Configuration<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>Advanced users can customize additional settings...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="nested-details">Nested Details</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h1></span>Product Documentation<span class="nt"></h1></span>
<span class="c"><!-- Parent details (open) --></span>
<span class="nt"><details</span> <span class="na">open</span> <span class="na">style=</span><span class="s">"border: 2pt solid #336699; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-size: 14pt; font-weight: bold; margin-bottom: 10pt;"</span><span class="nt">></span>
Chapter 1: Getting Started
<span class="nt"></summary></span>
<span class="nt"><p></span>This chapter covers the basics of using the product.<span class="nt"></p></span>
<span class="c"><!-- Nested child details (closed) --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>1.1 Installation<span class="nt"></summary></span>
<span class="nt"><p></span>Step-by-step installation instructions...<span class="nt"></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Download the installer<span class="nt"></li></span>
<span class="nt"><li></span>Run setup.exe<span class="nt"></li></span>
<span class="nt"><li></span>Follow the wizard<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></details></span>
<span class="c"><!-- Nested child details (open) --></span>
<span class="nt"><details</span> <span class="na">open</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>1.2 First Steps<span class="nt"></summary></span>
<span class="nt"><p></span>Getting started with your first project...<span class="nt"></p></span>
<span class="c"><!-- Deeply nested details (closed) --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 5pt; margin: 5pt 0;"</span><span class="nt">></span>
<span class="nt"><summary></span>1.2.1 Creating a Project<span class="nt"></summary></span>
<span class="nt"><p></span>Click File → New → Project...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 5pt; margin: 5pt 0;"</span><span class="nt">></span>
<span class="nt"><summary></span>1.2.2 Basic Configuration<span class="nt"></summary></span>
<span class="nt"><p></span>Configure your project settings...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></details></span>
<span class="c"><!-- Nested child details (closed) --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>1.3 Quick Tutorial<span class="nt"></summary></span>
<span class="nt"><p></span>A quick 5-minute tutorial...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></details></span>
<span class="c"><!-- Parent details (closed) --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 2pt solid #336699; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-size: 14pt; font-weight: bold;"</span><span class="nt">></span>
Chapter 2: Advanced Features
<span class="nt"></summary></span>
<span class="nt"><p></span>Advanced topics for experienced users...<span class="nt"></p></span>
<span class="nt"></details></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="data-bound-faq">Data-Bound FAQ</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- 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
}
]
} --></span>
<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>FAQ<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nt">details</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">#ccc</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">summary</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">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">details</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Frequently Asked Questions<span class="nt"></h1></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><details</span> <span class="na">open=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><summary></summary></span>
<span class="nt"><p></p></span>
<span class="nt"></details></span>
<span class="nt"></template></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="technical-documentation">Technical Documentation</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>API Documentation<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nc">.api-method</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">#ccc</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</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="nc">.api-method</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Courier New'</span><span class="p">,</span> <span class="nb">monospace</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="p">}</span>
<span class="nc">.api-method</span><span class="o">[</span><span class="nt">open</span><span class="o">]</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#e9ecef</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.api-method</span> <span class="o">></span> <span class="nt">div</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.http-method</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">3pt</span> <span class="m">8pt</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="nl">font-size</span><span class="p">:</span> <span class="m">9pt</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-right</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.get</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.post</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.delete</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>REST API Documentation<span class="nt"></h1></span>
<span class="nt"><h2></span>User Endpoints<span class="nt"></h2></span>
<span class="c"><!-- GET endpoint (open) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"api-method"</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"http-method get"</span><span class="nt">></span>GET<span class="nt"></span></span>
/api/users
<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p><strong></span>Description:<span class="nt"></strong></span> Retrieve all users<span class="nt"></p></span>
<span class="nt"><p><strong></span>Response:<span class="nt"></strong></p></span>
<span class="nt"><pre><code></span>{
"users": [
{ "id": 1, "name": "John Doe" },
{ "id": 2, "name": "Jane Smith" }
]
}<span class="nt"></code></pre></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- POST endpoint (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"api-method"</span><span class="nt">></span>
<span class="nt"><summary></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"http-method post"</span><span class="nt">></span>POST<span class="nt"></span></span>
/api/users
<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p><strong></span>Description:<span class="nt"></strong></span> Create a new user<span class="nt"></p></span>
<span class="nt"><p><strong></span>Request Body:<span class="nt"></strong></p></span>
<span class="nt"><pre><code></span>{
"name": "New User",
"email": "user@example.com"
}<span class="nt"></code></pre></span>
<span class="nt"><p><strong></span>Response:<span class="nt"></strong></p></span>
<span class="nt"><pre><code></span>{
"id": 3,
"name": "New User",
"email": "user@example.com"
}<span class="nt"></code></pre></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- DELETE endpoint (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"api-method"</span><span class="nt">></span>
<span class="nt"><summary></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"http-method delete"</span><span class="nt">></span>DELETE<span class="nt"></span></span>
/api/users/:id
<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p><strong></span>Description:<span class="nt"></strong></span> Delete a user by ID<span class="nt"></p></span>
<span class="nt"><p><strong></span>Parameters:<span class="nt"></strong></p></span>
<span class="nt"><ul></span>
<span class="nt"><li><code></span>id<span class="nt"></code></span> (required): User ID<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><strong></span>Response:<span class="nt"></strong></p></span>
<span class="nt"><pre><code></span>{
"success": true,
"message": "User deleted"
}<span class="nt"></code></pre></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="expandable-sections-in-report">Expandable Sections in Report</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Annual Report<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nc">.report-section</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.report-section</span> <span class="nt">summary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</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="p">}</span>
<span class="nc">.report-section</span> <span class="o">></span> <span class="nt">div</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><p><em></span>Click section headings to expand/collapse content.<span class="nt"></em></p></span>
<span class="c"><!-- Executive Summary (open) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"report-section"</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Executive Summary<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>
Fiscal year 2025 demonstrated strong performance across
all business units with 25% revenue growth and market
expansion into three new regions.
<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Total Revenue: $50M (+25% YoY)<span class="nt"></li></span>
<span class="nt"><li></span>Net Profit: $10M (+30% YoY)<span class="nt"></li></span>
<span class="nt"><li></span>Customer Base: 10,000 (+40% YoY)<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Financial Performance (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"report-section"</span><span class="nt">></span>
<span class="nt"><summary></span>Financial Performance<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><h3></span>Revenue Breakdown<span class="nt"></h3></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Category<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Revenue<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Growth<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Product Sales<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>$30M<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>+20%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Services<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>$20M<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>+35%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Operations (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"report-section"</span><span class="nt">></span>
<span class="nt"><summary></span>Operations<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>
Operational efficiency improved through automation
initiatives and process optimization...
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="c"><!-- Future Outlook (closed) --></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"report-section"</span><span class="nt">></span>
<span class="nt"><summary></span>Future Outlook<span class="nt"></summary></span>
<span class="nt"><div></span>
<span class="nt"><p></span>
Looking ahead to 2026, we anticipate continued growth
driven by product innovation and market expansion...
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="product-comparison-with-expandable-details">Product Comparison with Expandable Details</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h1></span>Product Comparison<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Feature<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Basic<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Pro<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Enterprise<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Price<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>$9.99/mo<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>$29.99/mo<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>$99.99/mo<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Storage<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>10 GB<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>100 GB<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt;"</span><span class="nt">></span>Unlimited<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><h2></span>Detailed Feature Comparison<span class="nt"></h2></span>
<span class="c"><!-- Basic plan details --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>Basic Plan Details<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>10 GB storage<span class="nt"></li></span>
<span class="nt"><li></span>1 user<span class="nt"></li></span>
<span class="nt"><li></span>Email support<span class="nt"></li></span>
<span class="nt"><li></span>Basic features<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="c"><!-- Pro plan details (open) --></span>
<span class="nt"><details</span> <span class="na">open</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>Pro Plan Details (Most Popular)<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>100 GB storage<span class="nt"></li></span>
<span class="nt"><li></span>Up to 5 users<span class="nt"></li></span>
<span class="nt"><li></span>Email + chat support<span class="nt"></li></span>
<span class="nt"><li></span>Advanced features<span class="nt"></li></span>
<span class="nt"><li></span>Priority support<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="c"><!-- Enterprise plan details --></span>
<span class="nt"><details</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><summary</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span>Enterprise Plan Details<span class="nt"></summary></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Unlimited storage<span class="nt"></li></span>
<span class="nt"><li></span>Unlimited users<span class="nt"></li></span>
<span class="nt"><li></span>24/7 phone support<span class="nt"></li></span>
<span class="nt"><li></span>All features<span class="nt"></li></span>
<span class="nt"><li></span>Dedicated account manager<span class="nt"></li></span>
<span class="nt"><li></span>Custom integrations<span class="nt"></li></span>
<span class="nt"><li></span>SLA guarantee<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></details></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="troubleshooting-guide">Troubleshooting Guide</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Troubleshooting Guide<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nc">.problem</span> <span class="p">{</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#dc3545</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8d7da</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.problem</span> <span class="nt">summary</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">color</span><span class="p">:</span> <span class="m">#721c24</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.solution</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">white</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">#ccc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Troubleshooting Guide<span class="nt"></h1></span>
<span class="nt"><p></span>Click on a problem to see the solution.<span class="nt"></p></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"problem"</span> <span class="na">open</span><span class="nt">></span>
<span class="nt"><summary></span>Problem: Application won't start<span class="nt"></summary></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"solution"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Solution:<span class="nt"></strong></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Verify system requirements are met<span class="nt"></li></span>
<span class="nt"><li></span>Check for conflicting software<span class="nt"></li></span>
<span class="nt"><li></span>Reinstall the application<span class="nt"></li></span>
<span class="nt"><li></span>Contact support if issue persists<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"problem"</span><span class="nt">></span>
<span class="nt"><summary></span>Problem: Slow performance<span class="nt"></summary></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"solution"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Solution:<span class="nt"></strong></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Close unnecessary background applications<span class="nt"></li></span>
<span class="nt"><li></span>Clear application cache<span class="nt"></li></span>
<span class="nt"><li></span>Increase available memory<span class="nt"></li></span>
<span class="nt"><li></span>Check for software updates<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"><details</span> <span class="na">class=</span><span class="s">"problem"</span><span class="nt">></span>
<span class="nt"><summary></span>Problem: Error message on startup<span class="nt"></summary></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"solution"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Solution:<span class="nt"></strong></p></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Note the exact error message<span class="nt"></li></span>
<span class="nt"><li></span>Check the error log in /logs/error.log<span class="nt"></li></span>
<span class="nt"><li></span>Search our knowledge base<span class="nt"></li></span>
<span class="nt"><li></span>Contact support with error details<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"></details></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/details.html">details</a> - Details disclosure element</li>
<li><a href="/reference/htmltags/summary.html">summary</a> - Summary element for details</li>
<li><a href="/reference/htmlattributes/hidden.html">hidden</a> - Hidden attribute for visibility</li>
<li><a href="/reference/techniques/collapsible.html">Collapsible Content</a> - Creating collapsible sections</li>
<li><a href="/reference/interactive/">Interactive Elements</a> - Interactive HTML elements</li>
</ul>
<hr />
-themeJekyll::Drops::ThemeDrop | Thresholds: Low=, High=
<br/><br/>
<strong>Logic:</strong>
</div>
</div>
</template>
<div style="margin-top: 25pt; padding: 20pt; background-color: #e3f2fd;
border-radius: 8pt; font-size: 11pt;">
<strong>Three Optimum Patterns Demonstrated:</strong><br/>
<table style="width: 100%; margin-top: 12pt; font-size: 10pt;">
<tr style="background-color: white;">
<td style="padding: 10pt; border: 1pt solid #ddd;">
<strong>Minimize Pattern</strong>
</td>
<td style="padding: 10pt; border: 1pt solid #ddd;">
Optimum at minimum (0)<br/>
Lower is better - CPU, errors, costs
</td>
</tr>
<tr style="background-color: white;">
<td style="padding: 10pt; border: 1pt solid #ddd;">
<strong>Maximize Pattern</strong>
</td>
<td style="padding: 10pt; border: 1pt solid #ddd;">
Optimum at maximum (1000)<br/>
Higher is better - throughput, quality, revenue
</td>
</tr>
<tr style="background-color: white;">
<td style="padding: 10pt; border: 1pt solid #ddd;">
<strong>Target Pattern</strong>
</td>
<td style="padding: 10pt; border: 1pt solid #ddd;">
Optimum in middle (72)<br/>
Middle is better - temperature, pH, pressure
</td>
</tr>
</table>
</div>
</div>
See Also
- meter - Meter/gauge element
- value - Value attribute
- min and max - Range attributes
- high and low - Threshold attributes
- progress - Progress bar element (no optimum)
- Data Binding - Dynamic data binding and expressions
- CSS Styles - Complete CSS styling reference