HTML Form Elements: Types, Uses, and Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Specialized Form Controls</title>
</head>
<body>
    <h2>Advanced Form Elements Showcase</h2>
    <form>
        <!-- Fieldset with Legend -->
        <fieldset style="border-radius: 8px; margin-bottom: 20px;">
            <legend><strong>Shipping Preferences</strong></legend>
            
            <!-- Select Dropdown with Optgroups -->
            <label for="shippingSpeed">Delivery Speed:</label>
            <select id="shippingSpeed" name="speed">
                <optgroup label="Standard Options">
                    <option value="ground">Ground Courier (3-5 Days)</option>
                    <option value="postal">Postal Mail (5-7 Days)</option>
                </optgroup>
                <optgroup label="Express Options">
                    <option value="next_day">Next Day Air ($19.99)</option>
                    <option value="saturday">Saturday Delivery ($29.99)</option>
                </optgroup>
            </select>
        </fieldset>

        <!-- Datalist Autocomplete -->
        <label for="citySearch">Destination City:</label>
        <input list="cities" id="citySearch" name="city" placeholder="Type city name...">
        <datalist id="cities">
            <option value="New York">
            <option value="London">
            <option value="San Francisco">
            <option value="Tokyo">
        </datalist>

        <!-- Multi-Line Textarea -->
        <p>
            <label for="specialNotes">Delivery Instructions:</label><br>
            <textarea id="specialNotes" name="notes" rows="4" style="width: 100%; max-width: 400px;"></textarea>
        </p>

        <!-- Rich Button with Icon -->
        <button type="submit" style="padding: 10px 18px; cursor: pointer;">
            Confirm &amp; Proceed &rarr;
        </button>
    </form>
</body>
</html>