HTML 22 💻 select, option, optgroup, legend,fieldset, output elements - KandZ

These elements help organize and structure forms, making them more user-friendly and accessible. They allow you to create dropdown lists, group related form controls, and display calculated results.

Overview of Form Structure Elements

Element	Purpose	Example
`<select>`	Creates a drop-down list	`<select name="country">...</select>`
`<option>`	Defines an item in a dropdown list	`<option value="us">United States</option>`
`<optgroup>`	Groups related options	`<optgroup label="Fruits">...</optgroup>`
`<fieldset>`	Groups related form controls	`<fieldset>...</fieldset>`
`<legend>`	Caption/title for a fieldset	`<legend>Personal Information</legend>`
`<output>`	Displays calculation results	`<output id="result"></output>`

The Select Element `<select>`

The <select> element creates a drop-down list that allows users to choose one or more options from a list.

Basic Syntax:

<select name="fruits" id="fruits">
    <option value="apple">Apple</option>
    <option value="banana" selected>Banana</option>
    <option value="orange">Orange</option>
</select>

Browser Display:
[ Banana ▼ ] (dropdown list showing selected option)

Attributes:

Attribute	Purpose	Example
`name`	Identifies the element when submitted	`name="country"`
`id`	Unique identifier for labels and JavaScript	`id="country"`
`size`	Number of visible options	`size="3"`
`autofocus`	Automatically focuses on page load	`autofocus`
`required`	Makes selection mandatory	`required`
`disabled`	Disables the dropdown	`disabled`
`multiple`	Allows multiple selections	`multiple`

The Option Element `<option>`

The <option> element defines an item inside a <select> or <datalist>.

Basic Syntax:

<option value="apple">Apple</option>

Attributes:

Attribute	Purpose	Example
`value`	Value sent to the server	`value="apple"`
`selected`	Pre-selects this option	`selected`
`disabled`	Disables this option	`disabled`
`label`	Shorter label for the option	`label="Apple"`

Key Points:

The inner text is displayed to the user
The value attribute is sent to the server
If no value is provided, the inner text is used as the value

The Optgroup Element `<optgroup>`

The <optgroup> element groups related <option> elements together with a label.

Basic Syntax:

<optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
</optgroup>

Browser Display:

Fruits
  ├── Apple
  └── Banana
Vegetables
  ├── Carrot
  └── Broccoli

Attributes:

Attribute	Purpose	Example
`label`	Group name displayed in the list	`label="Fruits"`
`disabled`	Disables all options in the group	`disabled`

The Fieldset Element `<fieldset>`

The <fieldset> element groups related form controls together, creating a visual boundary around them.

Basic Syntax:

<fieldset>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</fieldset>

Attributes:

Attribute	Purpose	Example
`disabled`	Disables all controls inside	`disabled`
`form`	Associates with a specific form	`form="myForm"`
`name`	Identifies the fieldset	`name="personal"`

The Legend Element `<legend>`

The <legend> element provides a caption/title for a <fieldset>.

Basic Syntax:

<fieldset>
    <legend>Personal Information</legend>
    <!-- Form controls -->
</fieldset>

Browser Display:
┌─────────────────────────────────────┐
│ Personal Information │
│ [Name: ] │
│ [Email: ] │
└─────────────────────────────────────┘

The Output Element `<output>`

The <output> element displays the result of a calculation or user interaction.

Basic Syntax:

<output id="result">0</output>

Attributes:

Attribute	Purpose	Example
`for`	Associates with related elements	`for="input1 input2"`
`name`	Identifies the output	`name="result"`
`form`	Associates with a specific form	`form="myForm"`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select, option, optgroup, fieldset, legend, output</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            margin-top: 30px;
            border-left: 4px solid #28a745;
            padding-left: 15px;
        }

        .form-container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            margin: 20px 0;
        }

        /* ====== Fieldset Styles ====== */
        fieldset {
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            background: #fafafa;
            transition: border-color 0.3s;
        }

        fieldset:hover {
            border-color: #007bff;
        }

        legend {
            font-size: 1.1em;
            font-weight: 700;
            color: #007bff;
            padding: 0 10px;
            background: white;
            border-radius: 4px;
        }

        /* ====== Form Controls ====== */
        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 5px;
            color: #333;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        select {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 1em;
            transition: border-color 0.3s;
            box-sizing: border-box;
            font-family: inherit;
        }

        input:focus,
        select:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
        }

        select[size] {
            height: auto;
        }

        select[multiple] {
            height: 120px;
        }

        /* ====== Option & Optgroup ====== */
        optgroup {
            font-weight: 700;
            color: #007bff;
        }

        optgroup option {
            font-weight: normal;
            color: #333;
            padding: 5px 10px;
        }

        option:checked {
            background: #007bff;
            color: white;
        }

        /* ====== Output Styles ====== */
        output {
            display: inline-block;
            font-weight: 700;
            font-size: 1.2em;
            color: #28a745;
            background: #e9f7ed;
            padding: 8px 16px;
            border-radius: 6px;
            border: 1px solid #28a745;
            min-width: 60px;
            text-align: center;
        }

        .output-container {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            text-align: center;
            margin: 10px 0;
        }

        /* ====== Buttons ====== */
        .btn-group {
            margin-top: 20px;
        }

        button {
            background: #007bff;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #0056b3;
        }

        button[type="reset"] {
            background: #6c757d;
            margin-left: 10px;
        }

        button[type="reset"]:hover {
            background: #545b62;
        }

        /* ====== Reference Table ====== */
        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .reference-table tr:hover {
            background: #e9ecef;
        }

        /* ====== Code Styles ====== */
        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #dc3545;
        }

        .inline-fields {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .inline-fields .form-group {
            flex: 1;
            min-width: 200px;
        }

        .example-box {
            background: #e9ecef;
            padding: 15px;
            border-radius: 6px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
        }

        .highlight {
            background: #ffc107;
            padding: 2px 6px;
            border-radius: 3px;
        }
    </style>
</head>
<body>

    <h1>select, option, optgroup, fieldset, legend, output</h1>

    <!-- ====== MAIN FORM ====== -->
    <div class="form-container">
        <form action="/submit_form" method="post">

            <!-- ====== PERSONAL INFORMATION ====== -->
            <fieldset>
                <legend>👤 Personal Information</legend>

                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" placeholder="Enter your full name">
                </div>

                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" placeholder="your@email.com">
                </div>

                <div class="form-group">
                    <label for="phone">Phone:</label>
                    <input type="tel" id="phone" name="phone" placeholder="(123) 456-7890">
                </div>
            </fieldset>

            <!-- ====== FRUITS & VEGETABLES ====== -->
            <fieldset>
                <legend>🍎 Fruits and Vegetables</legend>

                <div class="form-group">
                    <label for="fruits">Select your favorite:</label>
                    <select name="fruits" id="fruits" size="4" autofocus>
                        <optgroup label="🍉 Fruits">
                            <option value="apple">Apple</option>
                            <option value="banana" selected>Banana</option>
                            <option value="orange">Orange</option>
                            <option value="strawberry">Strawberry</option>
                        </optgroup>
                        <optgroup label="🥬 Vegetables">
                            <option value="carrot" disabled>Carrot (disabled)</option>
                            <option value="broccoli">Broccoli</option>
                            <option value="spinach">Spinach</option>
                        </optgroup>
                    </select>
                    <small>Size: 4 visible options | Autofocus enabled | Carrot is disabled</small>
                </div>
            </fieldset>

            <!-- ====== OUTPUT ====== -->
            <div class="form-group">
                <label>Result:</label>
                <div class="output-container">
                    <output id="result">0</output>
                </div>
            </div>

            <!-- ====== BUTTONS ====== -->
            <div class="btn-group">
                <button type="submit">Submit</button>
                <button type="reset">Reset</button>
            </div>

        </form>
    </div>

    <!-- ====== SECTION: MORE EXAMPLES ====== -->
    <h2>More Examples</h2>

    <!-- ====== EXAMPLE 1: SELECT WITH MULTIPLE ATTRIBUTE ====== -->
    <div class="form-container">
        <h3>1. Select with Multiple Attribute</h3>
        <p>Hold <kbd>Ctrl</kbd> (Windows) or <kbd>Cmd</kbd> (Mac) to select multiple options.</p>

        <fieldset>
            <legend>📚 Select Your Interests</legend>
            <select name="interests" id="interests" multiple size="4">
                <optgroup label="💻 Technology">
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="js">JavaScript</option>
                    <option value="python">Python</option>
                </optgroup>
                <optgroup label="🎨 Design">
                    <option value="ui">UI Design</option>
                    <option value="ux">UX Design</option>
                    <option value="graphic">Graphic Design</option>
                </optgroup>
            </select>
            <small>Multiple selections allowed</small>
        </fieldset>
    </div>

    <!-- ====== EXAMPLE 2: OPTION ATTRIBUTES ====== -->
    <div class="form-container">
        <h3>2. Option Attributes: selected, disabled, label</h3>

        <fieldset>
            <legend>🏷️ Option Attributes Demo</legend>

            <div class="form-group">
                <label for="status">Select Status:</label>
                <select name="status" id="status">
                    <option value="active" selected>✅ Active (selected)</option>
                    <option value="inactive" disabled>🚫 Inactive (disabled)</option>
                    <option value="pending">⏳ Pending</option>
                    <option value="suspended" disabled>🔒 Suspended (disabled)</option>
                </select>
                <small>Selected and disabled options demonstrated</small>
            </div>
        </fieldset>
    </div>

    <!-- ====== EXAMPLE 3: OUTPUT WITH CALCULATION ====== -->
    <div class="form-container">
        <h3>3. Output with Calculation</h3>
        <p>Move the slider to see the <code>&lt;output&gt;</code> element update in real-time.</p>

        <fieldset>
            <legend>🔢 Value Calculator</legend>

            <div class="form-group">
                <label for="slider">Value:</label>
                <input type="range" id="slider" name="slider" 
                       min="0" max="100" step="1" value="50"
                       oninput="document.getElementById('calc-result').value = this.value">
                <span id="slider-value" style="font-weight: bold; color: #007bff;">50</span>
            </div>

            <div class="form-group">
                <label>Result (squared):</label>
                <div class="output-container">
                    <output id="calc-result">2500</output>
                    <small>(value × value)</small>
                </div>
            </div>
        </fieldset>
    </div>

    <!-- ====== EXAMPLE 4: NESTED FIELDSETS ====== -->
    <div class="form-container">
        <h3>4. Nested Fieldsets</h3>

        <fieldset>
            <legend>🏢 Company Information</legend>

            <div class="form-group">
                <label for="company">Company Name:</label>
                <input type="text" id="company" name="company" placeholder="Enter company name">
            </div>

            <fieldset style="margin-top: 15px; border-color: #28a745;">
                <legend style="color: #28a745;">👨‍💼 Contact Person</legend>

                <div class="form-group">
                    <label for="contact-name">Contact Name:</label>
                    <input type="text" id="contact-name" name="contact-name" placeholder="Full name">
                </div>

                <div class="form-group">
                    <label for="contact-email">Contact Email:</label>
                    <input type="email" id="contact-email" name="contact-email" placeholder="email@company.com">
                </div>
            </fieldset>

            <div class="form-group" style="margin-top: 15px;">
                <label for="department">Department:</label>
                <select name="department" id="department">
                    <optgroup label="🏢 Main Departments">
                        <option value="it">IT</option>
                        <option value="hr">Human Resources</option>
                        <option value="sales">Sales</option>
                    </optgroup>
                    <optgroup label="🏗️ Other Departments">
                        <option value="rnd">R&D</option>
                        <option value="marketing">Marketing</option>
                    </optgroup>
                </select>
            </div>
        </fieldset>
    </div>

    <!-- ====== REFERENCE TABLES ====== -->
    <h2>Quick Reference</h2>

    <h3>Select Element Attributes</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>name</code></td>
                <td>Identifies the element when submitted</td>
                <td><code>name="country"</code></td>
            </tr>
            <tr>
                <td><code>id</code></td>
                <td>Unique identifier</td>
                <td><code>id="country"</code></td>
            </tr>
            <tr>
                <td><code>size</code></td>
                <td>Number of visible options</td>
                <td><code>size="3"</code></td>
            </tr>
            <tr>
                <td><code>autofocus</code></td>
                <td>Auto-focus on page load</td>
                <td><code>autofocus</code></td>
            </tr>
            <tr>
                <td><code>required</code></td>
                <td>Mandatory selection</td>
                <td><code>required</code></td>
            </tr>
            <tr>
                <td><code>disabled</code></td>
                <td>Disables the dropdown</td>
                <td><code>disabled</code></td>
            </tr>
            <tr>
                <td><code>multiple</code></td>
                <td>Allows multiple selections</td>
                <td><code>multiple</code></td>
            </tr>
        </tbody>
    </table>

    <h3>Option & Optgroup Attributes</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Element</th>
                <th>Attribute</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>&lt;option&gt;</code></td>
                <td><code>value</code></td>
                <td>Value sent to the server</td>
                <td><code>value="apple"</code></td>
            </tr>
            <tr>
                <td><code>&lt;option&gt;</code></td>
                <td><code>selected</code></td>
                <td>Pre-selects the option</td>
                <td><code>selected</code></td>
            </tr>
            <tr>
                <td><code>&lt;option&gt;</code></td>
                <td><code>disabled</code></td>
                <td>Disables the option</td>
                <td><code>disabled</code></td>
            </tr>
            <tr>
                <td><code>&lt;optgroup&gt;</code></td>
                <td><code>label</code></td>
                <td>Group name displayed</td>
                <td><code>label="Fruits"</code></td>
            </tr>
        </tbody>
    </table>

    <h3>Fieldset & Legend</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Element</th>
                <th>Purpose</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>&lt;fieldset&gt;</code></td>
                <td>Groups related form controls</td>
                <td><code>&lt;fieldset&gt;...&lt;/fieldset&gt;</code></td>
            </tr>
            <tr>
                <td><code>&lt;legend&gt;</code></td>
                <td>Caption/title for fieldset</td>
                <td><code>&lt;legend&gt;Title&lt;/legend&gt;</code></td>
            </tr>
            <tr>
                <td><code>&lt;output&gt;</code></td>
                <td>Displays calculation results</td>
                <td><code>&lt;output id="result"&gt;&lt;/output&gt;</code></td>
            </tr>
        </tbody>
    </table>

    <!-- ====== BEST PRACTICES ====== -->
    <h2>Best Practices</h2>

    <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
        <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
        <ul>
            <li>Use <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> to <strong>organize</strong> large forms</li>
            <li>Use <code>&lt;optgroup&gt;</code> to <strong>categorize</strong> options in long dropdowns</li>
            <li>Use <code>selected</code> to <strong>pre-select</strong> the most common option</li>
            <li>Use <code>disabled</code> for <strong>unavailable</strong> options</li>
            <li>Use <code>&lt;output&gt;</code> for <strong>calculated</strong> or dynamic values</li>
            <li>Always use <code>&lt;label&gt;</code> with <code>for</code> for <strong>accessibility</strong></li>
        </ul>
    </div>

    <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
        <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
        <ul>
            <li>Don't use <code>&lt;optgroup&gt;</code> without the <code>label</code> attribute</li>
            <li>Don't forget the <code>value</code> attribute on options</li>
            <li>Don't use <code>&lt;output&gt;</code> for static content</li>
            <li>Don't use <code>size="1"</code> when you want a dropdown (use default)</li>
            <li>Don't use <code>multiple</code> without informing users they can select multiple</li>
        </ul>
    </div>

</body>
</html>

Quick Reference

Element	Purpose	Key Attributes
`<select>`	Drop-down list	`name`, `size`, `multiple`, `autofocus`
`<option>`	List item	`value`, `selected`, `disabled`
`<optgroup>`	Group of options	`label`, `disabled`
`<fieldset>`	Group of form controls	`disabled`, `form`
`<legend>`	Fieldset caption	(none — text content only)
`<output>`	Calculation result	`for`, `name`, `form`

Best Practices Checklist

✅ Use <fieldset> to group related controls in large forms
✅ Use <legend> to describe each group
✅ Use <optgroup> to categorize options in long lists
✅ Pre-select common options with selected
✅ Use disabled for unavailable options
✅ Use <output> for dynamic results
✅ Always use <label> with for for accessibility

Pro Tip: The combination of <fieldset> and <legend> significantly improves form accessibility and usability. Screen readers announce the legend as a group label, helping users understand the context of each input. Use <optgroup> when your dropdown has more than 5 options to improve user experience!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of Form Structure Elements

The Select Element <select>

Basic Syntax:

Attributes:

The Option Element <option>

Basic Syntax:

Attributes:

The Optgroup Element <optgroup>

Basic Syntax:

Attributes:

The Fieldset Element <fieldset>

Basic Syntax:

Attributes:

The Legend Element <legend>

Basic Syntax:

The Output Element <output>

Basic Syntax:

Attributes:

Complete Example

Quick Reference

Best Practices Checklist

Ads Blocker Detected!!!

The Select Element `<select>`

The Option Element `<option>`

The Optgroup Element `<optgroup>`

The Fieldset Element `<fieldset>`

The Legend Element `<legend>`

The Output Element `<output>`