How to activate or focus an input HTML element when clicking on its label or name using HTML?
Tags: html
Published: 2022-12-12 05:22:34

---
  title: How to activate or focus an input HTML element when clicking on its label or name using HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 10:52:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/activate-focus-input-html-element-when-clicking-on-label-html-element-using-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_5a7c85c3ae.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/activate-focus-input-html-element-when-clicking-on-label-html-element-using-html)
  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

```html
<!-- 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,

```html
<!-- 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,

![input HTML element not focusing when clicked on the label HTML element](/uploads/01_4c4987da08.gif)

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,

```html
<!-- 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,

```html
<!-- 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,

![input HTML element focusing when clicked on the label HTML element](/uploads/02_0a18a6b088.gif)

We have successfully associated the `label` and its associated `input` HTML elements. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/activate-focus-input-html-element-when-clicked-on-label-html-element-using-html-xyo0xu?file=/index.html).

That's all 😃.