Module 6 of 10 · 7 lessons
HTML Forms Tutorial: Inputs, Labels and Validation
Inputs, labels, choices, buttons and browser-side validation.
Forms are how visitors answer back: search boxes, sign-ups, contact forms, checkouts. In this module you build forms that people can fill in without guessing, that work with a screen reader, and that the browser checks by itself. No JavaScript needed.
You begin with forms and inputs: the <form> element, its action address, and why a field without a name never gets sent. Labels tie visible text to a field. The label becomes clickable, and screen readers announce it. Input types such as email, number, date and password bring up the right keyboard on phones and add basic checks at no cost. The HTML standard lists every type in its section on the input element (opens in a new tab).
Next, textarea, select, radio and checkbox cover multi-line text and choices, including how a shared name groups radio buttons. Buttons and fieldsets deal with submit and reset buttons and with grouping related fields under a <legend>. Built-in validation uses required, minlength, pattern and a few others to stop bad data before it leaves the page. A generator such as HTML Input (opens in a new tab) lets you try these attributes and copy accessible field markup.
A confusing form loses customers. It also shuts out people who use assistive technology, and WCAG 2.2 requires clear labels or instructions (opens in a new tab). Plain, correct HTML gets a form most of the way there before you write any CSS or script.
Forms in the preview do not really submit. You see the exact data that would be sent instead. The module ends with a sign-up form project. Plan about an hour.
What you will learn
- Build a form whose fields send named data to a server
- Give every field a visible label that is tied to it
- Choose the right input type for emails, numbers, dates and passwords
- Offer choices with a select, radio buttons and checkboxes
- Group related fields with fieldset and legend, then add a submit button
- Let the browser check input with required, minlength and pattern
Lessons
- Forms and Inputs Make a form with a named text input and a button that sends it.
- Labels Tie a label to every input with for and id.
- Input Types Choose the input type that fits each kind of answer.
- Textarea, Select, Radio, Checkbox Pick the right control for long text, a single choice or several choices.
- Buttons and Fieldsets Give buttons the right type and group related controls with fieldset and legend.
- Built-in Validation Have the browser check answers with required, length and range rules.
- Project: Sign-up Form ProjectBuild a full sign-up form with labels and built-in checks.
Frequently asked questions
How do I create a form in HTML?
Put your fields inside a <form> element with an action (where the data goes) and a method (usually get or post). Add <input>, <textarea> or <select> fields, give each a name and a <label>, and end with <button type="submit">. A server processes the data. The HTML decides what gets collected.
Why should every input have a label?
The <label> tells people what to type, and a screen reader reads it aloud when the field gets focus. Tie it to the field with for and a matching id and the label becomes clickable too, which gives checkboxes and radio buttons a much bigger target. Placeholder text cannot do this job. It vanishes the moment someone starts typing.
Can HTML validate a form without JavaScript?
Yes. Attributes like required, type="email", min, max, minlength and pattern make the browser check the input and show an error before the form is sent. They take seconds to add, and the browser support data for form validation (opens in a new tab) shows they work in every modern browser. Check the data on the server as well. Anyone can bypass checks in the browser.