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.
Table of Contents
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.
Official documentation
For the full reference behind this guide, read MDN’s reference for the input element. It is the source the details above are drawn from, and the first place to check when an option or attribute name changes.
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.
Last updated on · Written by Dinesh Kumar R
