The primary advantage of placing input
inside of label
is typing efficiency for humans and byte storage for computers.
@Znarkus said in his comment to the OP,
One of the big pros of putting the <input />
inside the <label>
, is that you can omit for
and id
: <label>My text <input /></label>
in your example. So much nicer!
Note: In @Znarknus code, another efficiency was included not explicitly stated in the comment. type="text"
can also be omitted and input
will render a text box by default.
A side by side comparison of keystrokes and bytes[1].
31 keystrokes, 31 bytes
<label>My Text<input /></label>
58 keystrokes, 58 bytes
<label for="myinput">My Text</label><input id="myinput" />
Otherwise, the snippets are visually equal and they offer the same level of user accessibility. A user can click or tap the label to place the cursor in the text box.
[1] Text files (.txt) created in Notepad on Windows, bytes from Windows File Explorer properties