@name : The Name Attribute

The name 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 name attribute is still useful for organization, documentation, and potential future interactive form support.

Usage

The name attribute identifies form fields and:

Provides a semantic identifier for the input field
Groups radio buttons together so only one can be selected
Documents field purposes for code readability
Can be used for internal references and organization
Auto-generated if not specified (for PDF form field metadata)
Supports data binding for dynamic names
Essential for radio button groups

<!-- Named text input -->
<input type="text" name="customerName" value="John Doe" />

<!-- Radio button group with shared name -->
<input type="radio" name="paymentMethod" value="selected" />
<label>Credit Card</label>
<input type="radio" name="paymentMethod" value="" />
<label>PayPal</label>

<!-- Checkbox with name -->
<input type="checkbox" name="agreeTerms" value="checked" />

Supported Elements

The name attribute is supported by the following elements:

Element	Description
`<input>`	Form input field element - all types
`<select>`	Dropdown selection element (if supported)
`<textarea>`	Multi-line text area element (if supported)

Name Attribute Behavior

For Text-Based Inputs

The name provides an identifier for the field:

<input type="text" name="firstName" value="John" />
<input type="email" name="email" value="john@example.com" />
<input type="tel" name="phone" value="(555) 123-4567" />

Purpose: Documents the field’s purpose and provides metadata for the PDF form field.

For Radio Button Groups

The name groups radio buttons together:

<!-- Only one radio with name="gender" can be selected -->
<input type="radio" name="gender" value="selected" />
<label>Male</label>

<input type="radio" name="gender" value="" />
<label>Female</label>

<input type="radio" name="gender" value="" />
<label>Other</label>

Behavior: All radio buttons with the same name are treated as a group. In the visual representation, only one can appear selected.

For Checkboxes

Each checkbox typically has a unique name:

<input type="checkbox" name="emailNotifications" value="checked" />
<label>Email notifications</label>

<input type="checkbox" name="smsAlerts" value="checked" />
<label>SMS alerts</label>

<input type="checkbox" name="newsletter" value="" />
<label>Newsletter</label>

Purpose: Identifies each checkbox independently for documentation and organization.

Auto-Generated Names

If no name is specified, Scryber auto-generates one:

<!-- No name specified -->
<input type="text" value="Auto-named field" />

<!-- Scryber generates something like "input_1", "input_2", etc. -->

Best Practice: Always specify meaningful names for better code organization and documentation.

Binding Values

The name attribute can be set statically or dynamically:

Static Name

<input type="text" name="customerName" value="John Doe" />

Dynamic Name with Data Binding

<!-- Model: { fieldName: "customerEmail" } -->
<input type="text" name="" value="" />

Conditional Name

<!-- Model: { isPrimary: true } -->
<input type="text"
       name=""
       value="" />

Name in Repeating Templates

<!-- Model: { fields: [{id: "field1", value: "Value 1"}, ...] } -->
<template data-bind="">
    <input type="text" name="" value="" />
</template>

Notes

Radio Button Grouping

Radio buttons with the same name form a group:

<!-- Payment method group -->
<div>
    <input type="radio" name="payment" value="selected" />
    <label>Credit Card</label>

    <input type="radio" name="payment" value="" />
    <label>PayPal</label>

    <input type="radio" name="payment" value="" />
    <label>Bank Transfer</label>
</div>

<!-- Shipping method group (different name) -->
<div>
    <input type="radio" name="shipping" value="selected" />
    <label>Standard</label>

    <input type="radio" name="shipping" value="" />
    <label>Express</label>
</div>

Important: Different groups must have different names.

Name Uniqueness

For most input types, names should be unique within the form:

<!-- Good: Unique names -->
<input type="text" name="firstName" value="John" />
<input type="text" name="lastName" value="Doe" />
<input type="email" name="email" value="john@example.com" />

<!-- Avoid: Duplicate names (except for radio groups) -->
<input type="text" name="email" value="john@example.com" />
<input type="text" name="email" value="jane@example.com" />

Exception: Radio buttons in the same group intentionally share a name.

Name Conventions

Use clear, descriptive names following common conventions:

<!-- camelCase -->
<input type="text" name="firstName" value="John" />
<input type="text" name="lastName" value="Doe" />

<!-- snake_case -->
<input type="text" name="first_name" value="John" />
<input type="text" name="last_name" value="Doe" />

<!-- kebab-case -->
<input type="text" name="first-name" value="John" />
<input type="text" name="last-name" value="Doe" />

<!-- PascalCase -->
<input type="text" name="FirstName" value="John" />
<input type="text" name="LastName" value="Doe" />

Best Practice: Choose one convention and use it consistently throughout your document.

Name vs. ID

The name and id attributes serve different purposes:

Attribute	Purpose	Uniqueness	Usage
`name`	Field identifier for grouping and data	Unique per field (except radio groups)	Form field identification
`id`	Element identifier for styling and references	Must be unique per document	CSS selectors, label `for` attribute

<!-- Both name and id -->
<input type="text" id="customer-email" name="email" value="john@example.com" />

<!-- Label references id, not name -->
<label for="customer-email">Email:</label>
<input type="text" id="customer-email" name="email" value="john@example.com" />

Name and PDF Form Fields

In the generated PDF, the name attribute becomes metadata for the form field:

Used internally by Scryber for field identification
May appear in PDF form field properties
Helps with debugging and document inspection
Not visible to end users viewing the PDF

Empty or Missing Names

If no name is provided:

<!-- No name attribute -->
<input type="text" value="Unnamed field" />

Behavior:

Scryber auto-generates a name (e.g., “input_1”, “input_2”)
Field still renders correctly in PDF
Less readable code and harder to maintain

Recommendation: Always provide meaningful names.

Names with Special Characters

Names can contain letters, numbers, hyphens, and underscores:

<!-- Valid names -->
<input type="text" name="customer_name" value="John Doe" />
<input type="text" name="email-address" value="john@example.com" />
<input type="text" name="field123" value="Value" />
<input type="text" name="Field_123_ABC" value="Value" />

<!-- Avoid spaces and special characters -->
<!-- Not recommended -->
<input type="text" name="customer name" value="John Doe" />
<input type="text" name="email@address" value="john@example.com" />

Best Practice: Use only letters, numbers, hyphens, and underscores.

Examples

Basic Named Inputs

<!-- Personal information form -->
<div style="margin-bottom: 10pt;">
    <label style="display: inline-block; width: 120pt; font-weight: bold;">
        First Name:
    </label>
    <input type="text" name="firstName" value="John"
           style="width: 200pt; padding: 6pt; border: 1pt solid #cccccc;" />
</div>

<div style="margin-bottom: 10pt;">
    <label style="display: inline-block; width: 120pt; font-weight: bold;">
        Last Name:
    </label>
    <input type="text" name="lastName" value="Doe"
           style="width: 200pt; padding: 6pt; border: 1pt solid #cccccc;" />
</div>

<div style="margin-bottom: 10pt;">
    <label style="display: inline-block; width: 120pt; font-weight: bold;">
        Email:
    </label>
    <input type="email" name="email" value="john.doe@example.com"
           style="width: 300pt; padding: 6pt; border: 1pt solid #cccccc;" />
</div>

<div style="margin-bottom: 10pt;">
    <label style="display: inline-block; width: 120pt; font-weight: bold;">
        Phone:
    </label>
    <input type="tel" name="phone" value="(555) 123-4567"
           style="width: 180pt; padding: 6pt; border: 1pt solid #cccccc;" />
</div>

Radio Button Groups

<!-- Gender selection -->
<div style="margin-bottom: 15pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        Gender:
    </label>
    <div style="margin-left: 15pt;">
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="gender" value="selected"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Male</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="gender" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Female</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="gender" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Other</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="gender" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Prefer not to say</label>
        </div>
    </div>
</div>

<!-- Payment method selection -->
<div style="margin-bottom: 15pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        Payment Method:
    </label>
    <div style="margin-left: 15pt;">
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="paymentMethod" value="selected"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Credit Card</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="paymentMethod" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">PayPal</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="paymentMethod" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Bank Transfer</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="paymentMethod" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Cash on Delivery</label>
        </div>
    </div>
</div>

<!-- Shipping speed selection -->
<div style="margin-bottom: 15pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        Shipping Speed:
    </label>
    <div style="margin-left: 15pt;">
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="shippingSpeed" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Standard (5-7 days) - Free</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="shippingSpeed" value="selected"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Express (2-3 days) - $9.99</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="shippingSpeed" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Overnight (1 day) - $24.99</label>
        </div>
    </div>
</div>

Named Checkboxes

<!-- Preferences with individual names -->
<div style="padding: 15pt; border: 1pt solid #e0e0e0; background-color: #f9f9f9;">
    <label style="display: block; font-weight: bold; margin-bottom: 10pt;">
        Communication Preferences:
    </label>

    <div style="margin-bottom: 8pt;">
        <input type="checkbox" name="emailNotifications" value="checked"
               style="width: 15pt; height: 15pt;" />
        <label style="margin-left: 8pt;">Email notifications</label>
    </div>

    <div style="margin-bottom: 8pt;">
        <input type="checkbox" name="smsAlerts" value="checked"
               style="width: 15pt; height: 15pt;" />
        <label style="margin-left: 8pt;">SMS alerts</label>
    </div>

    <div style="margin-bottom: 8pt;">
        <input type="checkbox" name="pushNotifications" value=""
               style="width: 15pt; height: 15pt;" />
        <label style="margin-left: 8pt;">Push notifications</label>
    </div>

    <div style="margin-bottom: 8pt;">
        <input type="checkbox" name="newsletter" value="checked"
               style="width: 15pt; height: 15pt;" />
        <label style="margin-left: 8pt;">Weekly newsletter</label>
    </div>

    <div style="margin-bottom: 8pt;">
        <input type="checkbox" name="marketingEmails" value=""
               style="width: 15pt; height: 15pt;" />
        <label style="margin-left: 8pt;">Marketing emails</label>
    </div>

    <div style="margin-bottom: 8pt;">
        <input type="checkbox" name="productUpdates" value="checked"
               style="width: 15pt; height: 15pt;" />
        <label style="margin-left: 8pt;">Product updates</label>
    </div>
</div>

Form with Name and ID Attributes

<style>
    .form-row {
        margin-bottom: 12pt;
    }
    .form-label {
        display: block;
        font-weight: bold;
        margin-bottom: 5pt;
        color: #333333;
    }
    .form-input {
        width: 100%;
        padding: 8pt;
        border: 1pt solid #cccccc;
        border-radius: 3pt;
    }
</style>

<div class="form-row">
    <label for="user-fullname" class="form-label">Full Name:</label>
    <input type="text" id="user-fullname" name="fullName" value="Alice Johnson"
           class="form-input" />
</div>

<div class="form-row">
    <label for="user-email" class="form-label">Email Address:</label>
    <input type="email" id="user-email" name="email" value="alice.johnson@email.com"
           class="form-input" />
</div>

<div class="form-row">
    <label for="user-phone" class="form-label">Phone Number:</label>
    <input type="tel" id="user-phone" name="phone" value="(555) 987-6543"
           class="form-input" style="width: 250pt;" />
</div>

<div class="form-row">
    <label for="user-address" class="form-label">Address:</label>
    <input type="text" id="user-address" name="address"
           value="123 Main Street, Apartment 4B"
           class="form-input" />
</div>

<div class="form-row">
    <label for="user-comments" class="form-label">Comments:</label>
    <input type="text" id="user-comments" name="comments"
           value="Please deliver between 9 AM and 5 PM."
           options="MultiLine"
           style="width: 100%; height: 80pt; padding: 10pt;
                  border: 1pt solid #cccccc; font-size: 10pt;" />
</div>

Survey Form with Named Fields

<h2 style="color: #336699;">Customer Feedback Survey</h2>

<!-- Question 1: Text input -->
<div style="margin-bottom: 20pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        1. What is your name?
    </label>
    <input type="text" name="respondentName" value="Michael Chen"
           style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;" />
</div>

<!-- Question 2: Email input -->
<div style="margin-bottom: 20pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        2. What is your email address?
    </label>
    <input type="email" name="respondentEmail" value="michael.chen@email.com"
           style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;" />
</div>

<!-- Question 3: Radio group -->
<div style="margin-bottom: 20pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        3. How satisfied are you with our product?
    </label>
    <div style="margin-left: 15pt;">
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="satisfactionLevel" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Very Satisfied</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="satisfactionLevel" value="selected"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Satisfied</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="satisfactionLevel" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Neutral</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="satisfactionLevel" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Dissatisfied</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="satisfactionLevel" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Very Dissatisfied</label>
        </div>
    </div>
</div>

<!-- Question 4: Checkboxes -->
<div style="margin-bottom: 20pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        4. Which features do you use? (Select all that apply)
    </label>
    <div style="margin-left: 15pt;">
        <div style="margin-bottom: 6pt;">
            <input type="checkbox" name="featureDashboard" value="checked"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Dashboard</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="checkbox" name="featureReporting" value="checked"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Reporting</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="checkbox" name="featureAnalytics" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Analytics</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="checkbox" name="featureAPI" value="checked"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">API Integration</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="checkbox" name="featureMobile" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Mobile App</label>
        </div>
    </div>
</div>

<!-- Question 5: Number input -->
<div style="margin-bottom: 20pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        5. How many years have you been a customer?
    </label>
    <input type="number" name="yearsAsCustomer" value="3"
           style="width: 100pt; padding: 8pt; border: 1pt solid #cccccc;
                  text-align: center; font-size: 14pt;" />
</div>

<!-- Question 6: Text area -->
<div style="margin-bottom: 20pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        6. What improvements would you suggest?
    </label>
    <input type="text" name="suggestions"
           value="I would love to see better mobile app integration and more customizable dashboard widgets."
           options="MultiLine"
           style="width: 100%; height: 100pt; padding: 10pt;
                  border: 1pt solid #cccccc; font-size: 10pt;" />
</div>

<!-- Question 7: Radio group -->
<div style="margin-bottom: 20pt;">
    <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
        7. Would you recommend us to others?
    </label>
    <div style="margin-left: 15pt;">
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="recommendUs" value="selected"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Yes, definitely</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="recommendUs" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Maybe</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="recommendUs" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Probably not</label>
        </div>
    </div>
</div>

Data-Bound Names

<!-- 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"}
    ]
} -->

<h3 style="color: #336699;">Dynamic Form Fields</h3>

<template data-bind="">
    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            :
        </label>
        <input type="text" name="" value=""
               style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;" />
    </div>
</template>

Registration Form with Organized Names

<h2 style="color: #336699; border-bottom: 3pt solid #336699; padding-bottom: 10pt;">
    New User Registration
</h2>

<!-- Personal Information Section -->
<fieldset style="border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;">
    <legend style="font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;">
        Personal Information
    </legend>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            Full Name:
        </label>
        <input type="text" name="personalFullName" value="Jennifer Martinez"
               style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;" />
    </div>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            Date of Birth:
        </label>
        <input type="date" name="personalDOB" value="1990-05-15"
               style="width: 180pt; padding: 8pt; border: 1pt solid #cccccc;" />
    </div>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
            Gender:
        </label>
        <div style="margin-left: 15pt;">
            <div style="display: inline-block; margin-right: 25pt;">
                <input type="radio" name="personalGender" value=""
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Male</label>
            </div>
            <div style="display: inline-block; margin-right: 25pt;">
                <input type="radio" name="personalGender" value="selected"
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Female</label>
            </div>
            <div style="display: inline-block;">
                <input type="radio" name="personalGender" value=""
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Other</label>
            </div>
        </div>
    </div>
</fieldset>

<!-- Contact Information Section -->
<fieldset style="border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;">
    <legend style="font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;">
        Contact Information
    </legend>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            Email Address:
        </label>
        <input type="email" name="contactEmail" value="jennifer.m@email.com"
               style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;" />
    </div>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            Phone Number:
        </label>
        <input type="tel" name="contactPhone" value="(555) 234-5678"
               style="width: 250pt; padding: 8pt; border: 1pt solid #cccccc;" />
    </div>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            Address:
        </label>
        <input type="text" name="contactAddress" value="789 Oak Avenue"
               style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;" />
    </div>

    <div style="margin-bottom: 12pt;">
        <div style="display: inline-block; width: 48%; margin-right: 2%;">
            <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
                City:
            </label>
            <input type="text" name="contactCity" value="Portland"
                   style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;" />
        </div>

        <div style="display: inline-block; width: 24%; margin-right: 2%;">
            <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
                State:
            </label>
            <input type="text" name="contactState" value="OR"
                   style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;
                          text-align: center;" />
        </div>

        <div style="display: inline-block; width: 24%;">
            <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
                ZIP Code:
            </label>
            <input type="text" name="contactZIP" value="97201"
                   style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;
                          text-align: center;" />
        </div>
    </div>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
            Preferred Contact Method:
        </label>
        <div style="margin-left: 15pt;">
            <div style="margin-bottom: 6pt;">
                <input type="radio" name="contactPreferredMethod" value="selected"
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Email</label>
            </div>
            <div style="margin-bottom: 6pt;">
                <input type="radio" name="contactPreferredMethod" value=""
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Phone</label>
            </div>
            <div style="margin-bottom: 6pt;">
                <input type="radio" name="contactPreferredMethod" value=""
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Mail</label>
            </div>
        </div>
    </div>
</fieldset>

<!-- Account Settings Section -->
<fieldset style="border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;">
    <legend style="font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;">
        Account Settings
    </legend>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            Username:
        </label>
        <input type="text" name="accountUsername" value="jmartinez2024"
               style="width: 250pt; padding: 8pt; border: 1pt solid #cccccc;
                      font-family: monospace;" />
    </div>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            Password:
        </label>
        <input type="password" name="accountPassword" value="••••••••••"
               style="width: 250pt; padding: 8pt; border: 1pt solid #cccccc;
                      font-family: monospace;" />
    </div>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 8pt;">
            Security Question:
        </label>
        <input type="text" name="accountSecurityQuestion"
               value="What was your first pet's name?"
               style="width: 100%; padding: 8pt; border: 1pt solid #cccccc;
                      background-color: #f9f9f9;" />
    </div>

    <div style="margin-bottom: 12pt;">
        <label style="display: block; font-weight: bold; margin-bottom: 5pt;">
            Security Answer:
        </label>
        <input type="text" name="accountSecurityAnswer" value="Fluffy"
               style="width: 300pt; padding: 8pt; border: 1pt solid #cccccc;" />
    </div>
</fieldset>

<!-- Preferences Section -->
<fieldset style="border: 2pt solid #e0e0e0; padding: 15pt; margin-bottom: 20pt;">
    <legend style="font-weight: bold; font-size: 12pt; color: #336699; padding: 0 10pt;">
        Preferences
    </legend>

    <div style="margin-bottom: 15pt;">
        <label style="font-weight: bold; display: block; margin-bottom: 8pt;">
            Newsletter and Communications:
        </label>
        <div style="margin-left: 15pt;">
            <div style="margin-bottom: 6pt;">
                <input type="checkbox" name="prefNewsletter" value="checked"
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Weekly newsletter</label>
            </div>
            <div style="margin-bottom: 6pt;">
                <input type="checkbox" name="prefProductUpdates" value="checked"
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Product updates</label>
            </div>
            <div style="margin-bottom: 6pt;">
                <input type="checkbox" name="prefPromotions" value=""
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Promotional offers</label>
            </div>
        </div>
    </div>

    <div style="margin-bottom: 0;">
        <label style="font-weight: bold; display: block; margin-bottom: 8pt;">
            Account Type:
        </label>
        <div style="margin-left: 15pt;">
            <div style="margin-bottom: 6pt;">
                <input type="radio" name="prefAccountType" value=""
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Personal</label>
            </div>
            <div style="margin-bottom: 6pt;">
                <input type="radio" name="prefAccountType" value="selected"
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Business</label>
            </div>
            <div style="margin-bottom: 6pt;">
                <input type="radio" name="prefAccountType" value=""
                       style="width: 15pt; height: 15pt;" />
                <label style="margin-left: 8pt;">Enterprise</label>
            </div>
        </div>
    </div>
</fieldset>

<!-- Agreement -->
<div style="margin-bottom: 20pt;">
    <input type="checkbox" name="agreementTerms" value="checked"
           style="width: 15pt; height: 15pt;" />
    <label style="margin-left: 8pt; font-weight: bold;">
        I agree to the Terms of Service and Privacy Policy
    </label>
</div>

Multiple Radio Button Groups

<h3 style="color: #336699;">Product Configuration</h3>

<!-- Size selection -->
<div style="margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;">
    <label style="display: block; font-weight: bold; margin-bottom: 10pt;">
        Select Size:
    </label>
    <div style="margin-left: 15pt;">
        <div style="display: inline-block; margin-right: 25pt; margin-bottom: 6pt;">
            <input type="radio" name="productSize" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Small</label>
        </div>
        <div style="display: inline-block; margin-right: 25pt; margin-bottom: 6pt;">
            <input type="radio" name="productSize" value="selected"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Medium</label>
        </div>
        <div style="display: inline-block; margin-right: 25pt; margin-bottom: 6pt;">
            <input type="radio" name="productSize" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Large</label>
        </div>
        <div style="display: inline-block; margin-bottom: 6pt;">
            <input type="radio" name="productSize" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">X-Large</label>
        </div>
    </div>
</div>

<!-- Color selection -->
<div style="margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;">
    <label style="display: block; font-weight: bold; margin-bottom: 10pt;">
        Select Color:
    </label>
    <div style="margin-left: 15pt;">
        <div style="display: inline-block; margin-right: 25pt; margin-bottom: 6pt;">
            <input type="radio" name="productColor" value="selected"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Blue</label>
        </div>
        <div style="display: inline-block; margin-right: 25pt; margin-bottom: 6pt;">
            <input type="radio" name="productColor" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Red</label>
        </div>
        <div style="display: inline-block; margin-right: 25pt; margin-bottom: 6pt;">
            <input type="radio" name="productColor" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Green</label>
        </div>
        <div style="display: inline-block; margin-bottom: 6pt;">
            <input type="radio" name="productColor" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Black</label>
        </div>
    </div>
</div>

<!-- Material selection -->
<div style="margin-bottom: 20pt; padding: 15pt; border: 1pt solid #e0e0e0;">
    <label style="display: block; font-weight: bold; margin-bottom: 10pt;">
        Select Material:
    </label>
    <div style="margin-left: 15pt;">
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="productMaterial" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Cotton</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="productMaterial" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Polyester</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="productMaterial" value="selected"
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Cotton/Polyester Blend</label>
        </div>
        <div style="margin-bottom: 6pt;">
            <input type="radio" name="productMaterial" value=""
                   style="width: 15pt; height: 15pt;" />
            <label style="margin-left: 8pt;">Wool</label>
        </div>
    </div>
</div>