Forms & inputs
25 steps in 6 sets of HTML.
Forms are the most capable and most under-used part of HTML. Building one, labeling fields so they actually work, choices, then the specialized inputs for numbers, dates and files.
Validation and submission close it. Twenty-five steps, and the running argument is that the browser will do more of this for you than you think, and do it accessibly, if you let it.
A form
- A form and its wiringThe smallest useful form: where it posts, and a named field to post.
- Where a form sends its dataTwo methods, and the difference shows up in the address bar.
- Controls that live outside the formA button does not have to sit inside the form it submits.
Fields & labels
- Text inputsSingle-line text fields and the attributes that make them pleasant.
- Typed inputsThe input type decides the keyboard, the picker and the validation.
- Helping the browser fill it inThe autocomplete tokens are a fixed vocabulary, and using the right one saves the user typing.
- Grouping with fieldsetA fieldset groups related controls and its legend names the group.
- Disabling a whole sectionOne attribute on the fieldset takes every control inside it out of the form.
Choices
- CheckboxesIndependent on/off choices, each with its own name or a shared one.
- Radio buttonsOne choice from several: the shared name is what makes them a group.
- Select menusA dropdown, with option groups and a multiple-selection variant.
- Grouped and multiple selectsA long list of options wants headings, and sometimes more than one answer.
- Datalist suggestionsA free-text input with suggestions attached, unlike a select's closed list.
- TextareaMulti-line text, sized in rows and columns, with its value as content.
Numbers, dates & files
- Numbers and slidersSame value, two controls: one you type into and one you drag.
- Dates and timesFive input types the browser already knows how to render a picker for.
- File uploadsA file input, the accept filter, and the encoding the form needs.
- Showing a value backThree elements for numbers the user reads rather than types.
Validation & submission
- Built-in validationConstraints the browser checks before your JavaScript ever runs.
- Patterns and custom messagesA regular expression on the field, checked before anything is sent.
- Telling someone what went wrongAn error message that is not connected to the field is an error message nobody hears.
- ButtonsThree button types, and why type matters inside a form.
- Hidden and read-only fieldsValues you submit without editing, and fields shown but locked.
Encore
- signup_form.htmlA full signup page: labeled fields, grouped choices, real validation.
- checkout_form.htmlA checkout: grouped fields, the right autocomplete tokens, and errors tied to the inputs.