HTML forms in depth
You build usable forms with the right input types, labels, groups and browser validation, and trace end to end how a form reaches the server.
Level 201 · 17 lessons · 15 practice labs
Lessons
Fields
- A tour of input types: email, tel, number, date
- Labels, help text and aria-describedby
- Dropdowns, datalist and multiple selection
- File inputs: accept, multiple and capture
- Grouping with fieldset and legend
- Short task: the fields of a booking form
Validation
- required, pattern, min and max
- Validation messages and :invalid styles
- The constraint validation API: setCustomValidity
- Showing errors accessibly
- Why client-side validation is not enough
- Short task: a form that catches bad input
Submission
- Submitting with GET versus POST
- enctype and sending files
- Receiving a form on a small server
- autocomplete tokens and password managers
- Capstone: a multi-step application form
Practice labs
- Choose the right input types: Give proper types to the email, phone, date and guest count fields left as text in a booking form.
- Offer city suggestions: Add a datalist to the city field and make a multi-select interest list usable by keyboard.
- Restrict a document upload field: Build an upload field that accepts only PDF and JPEG, allows several files and opens the camera on phones.
- Group options with fieldset: Group delivery options with fieldset and legend and check how a screen reader announces them.
- Tie help text to a field: Link the IBAN field's format hint with aria-describedby and verify it is read out.
- Split a long application into sections: Split a forty-field scholarship application into logical groups, headings and help texts.
- Validate a postcode with pattern: Write required and pattern rules for a five-digit postcode field and a licence plate field.
- Give a custom validation message: Show a clear Turkish message with setCustomValidity when two password fields don't match.
- Bypass client checks and catch the server: Bypass browser validation by posting with curl, find the bad data the server accepts and fix it.
- Make the error state visible: Mark invalid fields with a border and an icon using :invalid and :user-invalid, without relying on colour alone.
- Put an error summary at the top: When submission fails, show an error summary linking to the fields and move focus to it.
- Announce errors live: Build a form that announces field errors with aria-live and updates aria-invalid correctly.
- See GET versus POST: Submit a search form with GET and a login form with POST and show whether data goes in the URL or the body.
- Receive a form on a small server: Write a small Python server that receives an application form and saves the file, with the right enctype.
- Build a multi-step application: Complete a three-step job application with back and forward navigation, a step indicator and data that isn't lost.
About this course
You build usable forms with the right input types, labels, groups and browser validation, and trace end to end how a form reaches the server.
What you will learn
- Fields
- Validation
- Submission
Prerequisites
Finishing the level 101 courses of the same path, or knowing those topics, is enough.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 201; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.