Form Element
Definition
A form is a form tag wrapping input, select, textarea and button elements. Two attributes decide what happens when it is submitted: action, the URL the data goes to, and method, normally GET or POST. Each control needs a name attribute or its value is not sent at all, which is the single commonest reason a field arrives empty at the other end. A button inside a form defaults to type submit, so a button meant to do anything else has to say type="button" explicitly. Labels matter as much as the inputs: a label whose for attribute matches the input id is what makes the text clickable and what a screen reader reads out.
Why It Matters
A static host has nowhere to send a form post. No code runs on the server behind the page, so an action pointing at /submit returns a 404 and the visitor sees an error instead of a thank-you. That is not a bug in the form — it is the honest limit of static hosting, and the fix is to point action at a third-party form endpoint, or to intercept the submit in JavaScript and post to a serverless function. Get it wrong and every enquiry is lost in silence, because a form that looks correct and goes nowhere gives no sign at all until somebody complains.
How It Works
On submit the browser gathers every named control inside the form, pairs each name with its value and encodes the lot. With method GET the pairs are appended to the action URL as a query string, which is why a search form produces an address you can share. With POST they travel in the request body, encoded as application/x-www-form-urlencoded unless the form carries enctype="multipart/form-data", which is what file uploads require. JavaScript can take the job over instead: a submit listener calling event.preventDefault stops the navigation, and new FormData(form) hands you the same name and value pairs to send with fetch. 99helpers offers one exception to the no-forms rule, the lead capture form shown in front of your content, whose entries it stores for you.
Real-World Example
An enquiry form on a consultancy one-pager at advice-co.99helpers.site posts to /contact.php. There is no PHP on a static host, so every submission lands on a 404 page. Swapping the action for a hosted form endpoint and adding a redirect back to a thank-you page turns exactly the same HTML into something that works, with no change to the fields themselves. The owner only noticed because the analytics showed a month of visits and not one enquiry.
Common Mistakes
- ✕Leaving the name attribute off an input — it looks perfectly normal on screen and is simply absent from what gets sent
- ✕Pointing action at a path on a static host — there is no code there to receive it, so the visitor gets a 404 rather than a confirmation
- ✕Using a plain button for a secondary action inside a form — it defaults to submit and reloads the page on click
Related Terms
Form Validation
Form validation is checking that what somebody typed is usable before it is accepted — a required field filled in, an email address shaped like one, a number in range. The browser does a good deal of it for free.
Event Listener
An event listener is a function attached to an element so that it runs when something happens to it — a click, a keypress, a form submit. It is how a static page becomes interactive.
Serverless
A hosting model where you deploy a function rather than a machine, and the provider starts it on demand and charges for the time it ran. There are still servers — you simply do not choose, patch or keep them.
Lead Capture Form
A short form shown in front of a hosted file or site: the visitor gives a name and an email, the content opens, and the answer lands in the owner's dashboard.
Form Label
A form label is the visible text tied programmatically to an input, so that software as well as sighted readers knows what belongs in the box. In HTML it is a label element linked to the field by id.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →