What is a reactive form and how do you implement one?

A reactive form listens for the input event and updates the UI (preview, validation, totals) on every keystroke in real time.

const input = document.querySelector("#name");
const output = document.querySelector("#preview");

input.addEventListener("input", () => {
    output.textContent = input.value;
});

Key concepts:

• input event - fires on every keystroke/change
• Immediate feedback - validation, preview, calculations
• No form submission needed - updates as user types

Example: Real-time validation:

const email = document.querySelector("#email");
const feedback = document.querySelector("#feedback");

email.addEventListener("input", () => {
    if (email.checkValidity()) {
        feedback.textContent = "Valid email";
        feedback.className = "success";
    } else {
        feedback.textContent = email.validationMessage;
        feedback.className = "error";
    }
});

Tip: Use input for real-time reactivity; use change for when the user finishes editing.