Challenge 3: Explain the HTML Form Limitation — Possible Solution
====================================================================

WHY A PLAIN <form> CAN'T DO THIS: an HTML form's encoding is limited
to what the <form> element itself was designed for — its body is
either a GET query string or a POST body encoded as
application/x-www-form-urlencoded (or multipart/form-data specifically
for file inputs) — there is no native <form> attribute or input type
that produces a raw JSON body instead. Custom headers are an even
harder limit: HTML forms have NO mechanism at all for setting arbitrary
request headers like X-API-Key — the browser only ever sends the
handful of headers it automatically generates for a form submission,
with no way for the page's HTML to add to that list.

THE TECHNIQUE THAT CAN: the fetch() console trick (or, equivalently,
fetch() called from the page's own JavaScript rather than the
console). fetch()'s options object explicitly supports both an
arbitrary headers object — where X-API-Key: ... can be set directly —
and a body that can be a JSON string produced with JSON.stringify(),
neither of which a declarative HTML <form> element is capable of
producing on its own.