<p>Most inputs have something in common — they are happiest with a companion label! And the happiness doesn’t stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy too. </p> <p>A happy label and input pair </p> <p>In this post, I want to focus on situations where the lack of a semantic label and input combination makes it much harder for all sorts of people to complete forms. Since millions of people’s livelihoods rely on forms, let’s get into the best tips I know for creating a fulfilling and harmonious relationship between an input and a label. </p> <p>Content warning: In this post are themes of love and relationships. </p> <p>The love story starts here! Let’s cover the basics for creating happy labels and inputs. </p> <p>How to pair a label and an input </p> <p>There are two ways to pair a label and an input. One is by wrapping the input in a label (implicit), and the other is by adding a for attribute to the label and an id to the input (explicit). </p> <p>Think of an implicit label as hugging an input, and an explicit label as standing next to an input and holding its hand. </p> <p> Name: </p> <p>An explicit label’s for attribute value must match its input’s id value. For example, if for has a value of name, then id should also have a value of name. </p> <p>Name: </p> <p>Unfortunately, an implicit label is not handled correctly by all assistive technologies, even if for and id attributes are used. Therefore, it is always the best idea to use an explicit label instead of an implicit label.</p>