forms

A repeating row of key and value fields with add and remove controls, used for tags, headers and other open ended pairs.

The running count beside a text box showing how many characters are used, or how many remain, against a limit.

A square control that turns one independent option on or off, used in sets where any number of the options may be chosen.

A control for choosing a colour, usually pairing a saturation and lightness field with a hue slider, an alpha slider and a text field for a value.

A text input paired with a list of suggestions that narrows as you type, where the list can be navigated and chosen from with the keyboard.

A field that opens a small calendar so a date can be chosen by looking at the month rather than typing it.

A calendar that takes a start and an end date in one pass, highlighting the span between them as you move.

The loose everyday word for any panel that opens downward from a trigger, whatever the panel holds and whatever the trigger does with it.

The line attached to a field that says what went wrong and what to do about it, announced to assistive technology the moment it appears.

A group of related form controls sharing one question, with a legend that acts as the label for the whole group.

A control that takes files, by opening the system picker from a button or by accepting a drop into a marked area.

A label that sits inside an empty field and rises to the field's top edge when the field takes focus or holds a value.

A grouping of controls a reader fills in and submits together, carrying the labels, validation and submit affordance for the whole set.

The short line under a field that explains the format or constraint before anything goes wrong.

A field welded to text, a button or a select at one or both ends, so the addon reads as part of the same control rather than as a neighbour.

A field that imposes a fixed shape as you type, inserting the slashes, spaces or brackets a phone number or card number needs.

An always visible list of options you choose from with the keyboard or pointer, without a popup or a text field.

A select that accepts several values at once, usually showing the chosen ones as removable tokens inside the field.

A row of single character boxes for a short code, where typing advances to the next box and pasting the whole code fills them all.

A set of mutually exclusive options, each with its own label and control, exactly one of which can be chosen.

A slider with two handles on one track that sets a lower and an upper bound, so the selection is an interval rather than a point.

A row of stars or similar marks that both shows a score and, when interactive, takes one.

A closed control that shows the current choice and opens a list of options when pressed, with no typing.

A radio or checkbox dressed as a card, where the whole tile is the target and the control itself is small or absent.

A drawing area that captures a handwritten signature by pointer or touch, with a clear control and a baseline to sign on.

A control that sets a value by dragging a handle along a track, showing the whole range at once.

A small two part control with minus and plus that nudges a number up or down one step at a time.

A control shaped like a sliding track that turns one setting on or off and applies the change the moment it is flipped, with no separate save step.

A field that turns each entry into a removable tag sitting inside the field, with the caret waiting after the last one.

A multi-line text box, usually resizable, for input that will not fit on one line: a comment, a description, an address, a note.

A single line box for typed input, carrying a label, an optional hint, and the error message shown when what was typed does not pass.

A control for choosing a time of day, either as a dial you tap around or as hour and minute lists.

A flow broken into ordered steps with back and next controls, where each step validates before the next one is allowed.

Replacing a set of address fields with one lookup that suggests full addresses after a few characters and fills the rest on selection.

Persisting the reader's work continuously without a save action, usually with a quiet status line reporting when the last save happened.

A review screen listing everything the reader entered, with a change link beside each answer, shown before the submission is final.

Offering a corrected spelling for a query that returned little or nothing, either as a suggestion to accept or as a substitution the reader can undo.

A block at the top of a failed form listing every problem as links that move focus to the field that caused it.

Accepting whatever shape the reader types and normalising it afterwards, instead of rejecting input that differs only in spacing or punctuation.

Checking a field as the reader fills or leaves it and showing the verdict beside that field, rather than saving every complaint for the submit button.

Asking a single question on each screen of a form so the reader never chooses which field to answer first and errors point somewhere unambiguous.

Prefilling a choice with the answer most people in this situation want, so the common case needs no work and every other case is still reachable.

Splitting one value across several small fields with fixed shapes, which teaches the expected format but costs the reader extra focus moves.

Offering suggestions that update on every keystroke, drawn from a live query, so the reader picks a result rather than finishing the phrase.

Warning the reader that edits will be lost before a navigation or close is allowed to proceed, and offering to save or discard first.

Naming the field that failed and saying what went wrong in text, rather than only outlining the input in red.

The one name that covers a set of controls, a question above its radio buttons or a heading above an address block, so each field is heard in context.

Machine readable autocomplete tokens on personal fields, which let browsers autofill and let personalisation tools add familiar icons or wording.

The programmatic mark that a field's value failed validation, paired with a pointer to the message that explains it.

The programmatic link between a label and its field, made by for and id or by wrapping, which makes the label clickable and the field named.

The antipattern of using placeholder text as a field's only label, which vanishes on typing and usually fails both contrast and naming.

The rule against asking for the same information twice in one process, unless it is re-entered for a real reason such as confirmation.

How a form says a field cannot be left empty, in the label text, in the announced name, and not by an asterisk whose meaning is explained somewhere else.