Quick answer: An HTML form is a <form> wrapping inputs, each with a name attribute that labels its data when submitted. The essential inputs: text, email, password, number, date, checkbox, radio, plus <select> and <textarea>. Validation uses HTML attributes — required, minlength, type — before any JavaScript. This guide covers the elements, the attribute stack, and the accessibility rule most tutorials skip.
The complete contact form pattern
<form action="/signup" method="post">
<label for="name">Full name</label>
<input type="text" id="name" name="name" required minlength="2">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="plan">Plan</label>
<select id="plan" name="plan">
<option value="free">Free</option>
<option value="pro">Pro</option>
</select>
<label><input type="checkbox" name="terms" required> I agree to the terms</label>
<button type="submit">Create account</button>
</form>Three rules that separate good forms from bad
- Every input gets a
labelbound by matchingfor/id— clicking the label focuses the field, and screen readers announce it. Placeholder text is not a label; it disappears on typing. nameis what gets submitted — no name, no data. Theidis for labels; thenameis for the server. They usually match but serve different jobs.- Validation attributes are free UX:
required,minlength/maxlength,min/max,pattern, plus the righttype—type="email"on phones opens the email keyboard and blocks malformed addresses before JavaScript ever runs.
The input types cheat sheet
| Type | Behavior |
|---|---|
email / url / tel | Format validation + matching mobile keyboards |
number | Spinner + min/max/step support |
date / time | Native picker, machine-readable value |
radio | One choice per shared name group |
checkbox | Independent toggles; multiple values per name |
file | Add accept and multiple as needed |
hidden | Submitted but invisible — CSRF tokens, context |
Styling comes next: the same form dressed with Bootstrap lives in our Bootstrap forms and validation guide, and a full working backend with spam protection in the PHP contact form tutorial.
Want live review while you build real forms? Ampersand Academy teaches web development one-to-one.
Frequently asked questions
What is the difference between the id and name attributes on an input?
id links the input to its label and CSS; name is the key under which the value is submitted to the server. An input without a name attribute sends no data at all.
Why are labels required for every input?
Labels make forms accessible: screen readers announce them, clicking them focuses the field, and they enlarge the touch target. Placeholders disappear while typing and cannot replace a label.
How does HTML form validation work without JavaScript?
Browsers validate natively when you use attributes like required, minlength, pattern and the correct type. Submitting an invalid form shows a browser message and blocks submission until fixed.
When do I use radio buttons instead of checkboxes?
Radio buttons choose exactly one option from a group sharing the same name; checkboxes are independent toggles where zero, one or many can be selected.
Should I use GET or POST for my form?
Use GET only for searches and filters where the URL should carry the parameters. Use POST for anything that changes data, sends a message or includes credentials – it keeps data out of URLs and history.