Originally posted here!
To activate or focus an input HTML element when clicking on its label HTML element or name using HTML, you need to add an id attribute with a unique name to the input HTML element and use the for attribute with the input HTML element's id as a value on the label HTML element.
TL;DR
<!-- A simple webpage with input to accept some text and a label -->
<html>
<!--
Using the `for` attribute and using the `input`
HTML element's `id` as the value to
associate the 2 HTML elements
-->
<label for="myInput">Enter you name</label>
<!-- Add a unique `id` to the `input` HTML element -->
<input type="text" id="myInput" />
</html>
For example, let's say we have a text input HTML element and a label called Enter your name associated with it.
The HTML for it would look something like this,
<!-- A simple webpage with input to accept some text and a label -->
<html>
<label>Enter you name</label>
<input type="text" />
</html>
A visual representation of the webpage is shown below,
As you can see from the above GIF that when clicking on the label HTML element the input HTML element is not getting activated or focused. This is because we have not told the browser to associate the label and the input HTML elements together. To do that, we can first add the id attribute and unique name as its value to the input HTML element.
It can be done like this,
<!-- A simple webpage with input to accept some text and a label -->
<html>
<label>Enter you name</label>
<!-- Add a unique `id` to the `input` HTML element -->
<input type="text" id="myInput" />
</html>
Now to associate the input HTML element with the label HTML element, we can use the for attribute on the label HTML element and use the input element's id as the value, in our case the value is myInput.
It can be done like this,
<!-- A simple webpage with input to accept some text and a label -->
<html>
<!--
Using the `for` attribute and using the `input`
HTML element's `id` as the value to
associate the 2 HTML elements
-->
<label for="myInput">Enter you name</label>
<!-- Add a unique `id` to the `input` HTML element -->
<input type="text" id="myInput" />
</html>
Now if we click on the label HTML element the input HTML element will be focussed.
Visually it looks like this,
We have successfully associated the label and its associated input HTML elements. Yay 🥳!
See the above code live in codesandbox.
That's all 😃.
Top comments (0)