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)