Label
Description
Labels are used to associate text with form input elements, providing context and clarity to users about the purpose or expected input of the associated field. They are essential for ensuring accessibility and usability in web forms, aiding all users in understanding and interacting with input fields effectively.
Usage
Associated Input Fields: Labels should always be associated with their corresponding input fields using the for attribute on the label, which references the id attribute of the input field. This association allows screen readers to announce the label when users focus on the input field, improving accessibility.
Clear and Descriptive: Labels should clearly and concisely describe the input field they are associated with, providing users with relevant information about the expected input or purpose of the field. Avoid ambiguous or overly technical language that may confuse users.
Proximity and Alignment: Position labels close to their associated input fields to visually connect them, aiding users in quickly identifying which label corresponds to which input field. Our labels are always left-aligned above the respective input field.
HTML Markup: Use semantic HTML elements such as <label> for labels and <input> for input fields. Ensure that each input field has a corresponding label wrapped within a <label> element for optimal accessibility and usability.
Localization and Internationalization: Consider the need for localization and internationalization when writing labels to accommodate users from different regions and language preferences. Ensure that labels are translated and localized appropriately to maintain clarity and usability.
Example