Click an H3 and focus on a form field

Question

I am organizing a contact form, divided into several parts.

One of the things I need is that when the user clicks an H3 (but it can also be a div, anchor or button) a specific field of this form is focused.

How could I accomplish that?

Answer 1

To use a h3 can make use of an anchor associated with the ID of the input.

Would that be:

<h3><a href="#a">Clica-me para o input A</a></h3>
<h3><a href="#b">Clica-me para o input B</a></h3>

<input type="text" id="a">
<input type="text" id="b">

or as @Ricardo also suggested use the label thus:

<label for="a">
    <h3>Clica-me para o input A</h3>
</label>
<label for="b">
    <h3>Clica-me para o input B</h3>
</label>

<input type="text" id="a">
<input type="text" id="b">

And in these cases it makes no difference where on the page the elements are provided that each ID is unique (not repeated within the page).

Answer 2

There are a few ways you can solve your problem.
The simplest would be using elements HTML, thus:

<label for="minha_input"><h3>Input</h3></label>
<input type="text" id="minha_input">

If not, an alternative is to do via Java Script, thus:

function myFocus() {
  document.getElementById('minha_input').focus();
}

 <h3 onclick="myFocus()">Input</h3>
<input type="text" id="minha_input">

I hope I’ve helped.