The <form> element collects input from a user — text, choices, files — and sends it somewhere for processing. It's the single mechanism behind logins, signups, checkouts, search boxes, and every other piece of interactive data entry on the web.
Syntax
<form action="/submit" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>Basic Example
<form action="/contact-submit" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Send</button>
</form>Browser output: a text field with its label, and a "Send" button. Clicking it packages up every named field's value and sends it to /contact-submit as a POST request.
The Building Blocks
| Piece | Job |
|---|---|
| form | The outer container — where and how data is sent |
| input | The most common field element — its type controls everything |
| label | A field's accessible, clickable name |
| select / textarea / button | Other field/control types beyond <input> |
| fieldset / legend | Grouping related fields together |
| form-validation | Built-in, JavaScript-free field validation |
Common Mistakes
- Fields with no
nameattribute — unnamed fields are never included in the submitted data at all - Building form-like UI out of
<div>s and JavaScript instead of a real<form>, losing native submission, validation, and keyboard behavior for free
Best Practices
- Use a real
<form>for any genuine data-collection UI - Give every field a
nameand an associated<label>
Accessibility Considerations
Native form controls come with keyboard support, focus states, and screen reader announcements built in — all of which have to be manually rebuilt, often imperfectly, if you replace them with custom-styled non-form elements.
SEO Considerations
Minimal direct effect — forms aren't crawlable content in the way text is, though a well-built contact/lead form can matter enormously for a site's actual business goals.
Browser & Modern HTML Notes
HTML5 added a large wave of new input types and native validation to forms — much of what used to require JavaScript libraries (date pickers, email/URL validation) is now handled natively by the browser.
Mini Practice
- Build a minimal one-field form that submits to
/searchusing GET. - Identify why a field with no
nameattribute won't appear in the submitted data.
