HTML Form Attributes: Complete List with Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Attributes Showcase</title>
    <style>
        .control-row { margin-bottom: 12px; }
        label { display: block; font-weight: bold; margin-bottom: 4px; }
        input { padding: 8px 12px; width: 100%; max-width: 380px; border: 1px solid #cbd5e1; border-radius: 6px; }
        input:read-only { background: #f1f5f9; color: #64748b; }
    </style>
</head>
<body>
    <h2>Form Control Attributes Guide</h2>
    <form>
        <!-- Autofocus and Placeholder -->
        <div class="control-row">
            <label for="promoCode">Discount Promo Code</label>
            <input type="text" id="promoCode" name="promo_code" placeholder="SAVE20" maxlength="10" autofocus>
        </div>

        <!-- Readonly Reference ID (Submitted to server) -->
        <div class="control-row">
            <label for="orderRef">Order Reference Number (Readonly)</label>
            <input type="text" id="orderRef" name="order_ref" value="ORD-2026-90210" readonly>
        </div>

        <!-- Number constraints: min, max, step -->
        <div class="control-row">
            <label for="donationAmount">Custom Donation (USD)</label>
            <input type="number" id="donationAmount" name="donation" min="5.00" max="1000.00" step="0.50" value="25.00" required>
        </div>

        <!-- Multiple File Upload -->
        <div class="control-row">
            <label for="projectDocs">Upload Project Documents (Multiple)</label>
            <input type="file" id="projectDocs" name="documents[]" multiple accept=".pdf,.docx">
        </div>
    </form>
</body>
</html>