Label tag

What is the purpose of label tag for an input tag ?
Is it just to relate input and label tag ?
https://www.codecademy.com/courses/learn-html/lessons/form-validation/exercises/minlength-maxlength?action=resume_content_item

In the code starting from 14th line through 16 th line we know how the browser renders it . What if I changed the code to below ?
" <label for=“username”
Username:
<input id=“username” name=“username” type=“text” required minlength=3
maxlength=15
"
Does it cause any significant issue?

from MDN - documentation:

The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

so there is certainly good reasons to use labels.

1 Like