Should I put input elements inside a label element?

Question

Is there a best practice concerning the nesting of label and input HTML elements?

classic way:

Answer 1

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 inside the , is that you can omit for and id: My text 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

My Text

58 keystrokes, 58 bytes

My Text

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