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
To make the content more readable the usage of proper inputs and labels are essential. In this article, the author highlighted the lack of a semantic label and input combination makes harder for all sorts of people to complete forms for instance.
To make the proper combination between both elements, it’s necessary to create a harmonious relationship between an input and a label. Going more granular in each element definitions, input element is used to create interactive controls for web-based forms to accept data from the user. There is a wide variety of types of input data and it relies on the type of device and user agent. While labels acts as a caption for a specified element. By using labels, the text increases the clickable area.
There are two ways to use in coordination input and label elements. These ways are implicit and explicit. The implicit way, the label wraps the input element. While the other way, it is added “For” attribute to the label and an “Id” to the input. It is pointed out in this article that the explicit labels “For” attribute value must match its input’s “Id” value. In other words, if “For” has a value name, then “Id” should have a value name. As a best practice, it is advisable to use explicit label instead of an implicit label. The reason behind is it isn’t usable for all assistive technologies.
As the use of HTML semantic elements have been more meaningful to users, it seems all functionalities can’t be applied equally across different devices. Thus, the markup language can be more specific and challenging not only for the users in general but also for practitioners.