EN
HTML - focus input field on label click
0
points
In this article, we would like to show you how to focus input field on label click in HTML.
Quick solution:
// ONLINE-RUNNER:browser;
<label for="field">Field name:</label>
<input type="text" id="field"/>
or:
// ONLINE-RUNNER:browser;
<label>
<span>Field name:</span>
<input type="text"/>
</label>
Practical example
In this example, we create the label element that we can click to focus the input field. The key is that the label element describing the input is bound to it using the id - for relation.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<label for="field">Field name:</label>
<input type="text" id="field"/>
</body>
</html>
Alternative solution
In this section, we present an alternative solution where input element is wrapped with label. The solution works the same as the first one but we don't need to specify id attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<label>
<span>Field name:</span>
<input type="text"/>
</label>
</body>
</html>