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:
xxxxxxxxxx1
<label for="field">Field name:</label>2
<input type="text" id="field"/>or:
xxxxxxxxxx1
<label>2
<span>Field name:</span>3
<input type="text"/>4
</label>
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.
xxxxxxxxxx1
2
<html>3
<body>4
<label for="field">Field name:</label>5
<input type="text" id="field"/>6
</body>7
</html>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.
xxxxxxxxxx1
2
<html>3
<body>4
<label>5
<span>Field name:</span>6
<input type="text"/>7
</label>8
</body>9
</html>
