What is it?
Forms collect data from users. HTML provides input types, validation rules, and submission behavior built in — most apps reinvent half of it in JavaScript before they realize the platform already shipped it. Modern forms work without a single line of JS for the basics.
Why it matters
Forms are where conversion happens. A signup that fails silently loses revenue. A checkout with mismatched validation errors loses trust. Knowing which validation belongs in HTML, which in JS, and which on the server is interview-grade thinking that small teams notice immediately.
What to learn
<form>anatomy: action, method, enctype- Input types beyond
text:email,tel,url,number,date,file - Constraint validation:
required,pattern,min,max,minlength - Labels:
<label>withfor=or wrapping, never floating text - Form submission: GET vs POST, default browser behavior
- Error messaging UX: where, when, and how to show problems
Common pitfall
Validating on submit and hiding all errors until then. Users want feedback
when they leave a field, not after they've filled the whole form. Use
onBlur for live validation, onSubmit for the final check, and never
lose a user's input on a failed submit.
Resources
Primary (free):
- MDN — Web forms · docs
- web.dev — Learn HTML — Forms · docs
- HTML5 form validation — Adam Argyle · article
Practice
Build a contact form with name, email, phone (optional), message, and a file upload. Use only HTML and CSS — no JavaScript. Make every field report a useful native error if invalid. Submit it to httpbin.org/post and verify the payload. Done when every field validates without JS.
Outcomes
- Pick the right input type for any field on a real signup form.
- Use HTML constraint attributes to validate without JavaScript.
- Pair every input with an accessible label.
- Decide when validation belongs on the client vs the server.