Form labels: how the field gets an understandable name

Useful to know

A form is a conversation between the page and the person entering data. For this conversation to be clear, each field must have an understandable name. HTML element label presents a control inscription in the interface. It can be linked to an appropriate field by an attribute for, whose value matches its identifier, or by placing a control inside the label. Thus, the relationship is not limited to the visual proximity of two elements on the screen. [1]

With a properly connected label, the activation of the caption can direct the focus to the appropriate control. This also increases the usable area for interaction. [1] The practical meaning is easy to observe with a small tick: the person can choose the text to it instead of aiming only at the check box. But if the value of for points to another identifier, the visible row may appear to be correct, and the action may affect the wrong field. Therefore, the structure must be checked by behavior.

Let's take a look at a fictional form for enrolling in a book club. It contains a name, e-mail, and a check mark for receiving the program. First we can only read the inscriptions and ask if the meaning of each field is obvious. We then press each inscription and observe which control gets the focus or changes its state. This short storyboard checks both editorial clarity and technical connection without requiring input of real personal data.

Sometimes an interactive element has no visible text, for example a button with a close icon only. In appropriate cases, aria-label may provide an accessible name. [2] However, this is not a reason to replace every visible label with an invisible attribute. When there is appropriate text that can be associated with the element, it is an important part of a common understanding of the interface. The need for an accessible name and the need for the person to see a clear instruction should be discussed together.

In a search form example, it is useful to distinguish a field name, an example value, and an error message. "Search by title" describes the task, "For example: astronomy" offers an example, and "Enter at least one word" explains a specific failure. If these roles are mixed, the visitor can see beautiful text, but remain without sufficient guidance after the introduction begins. The well-described form has a separate purpose for each of these parts.

Upon final inspection, we go through the fields in logical order, read the inscriptions and test all the links. Then we look at the errors and the re-filling. Does the meaning persist when the field already has a value? Do you know what bookmark it's for? Thus, labels are converted from decorative words to verifiable parts of the interface. The exact HTML helps when the names themselves and the instructions are selected according to the real task of the person.