HTMLのlabel要素のfor属性とinput要素のid属性を同じ名前にする理由

for と id　を同じ名前にする理由

クリック可能エリアの拡張

forとidを同じ名前にすることによって、labelをクリックした際に、inputにフォーカスが当たる。

<label for="username">ユーザ名:</label>
<input type="text" id="username" name="username">

このようなコードがあった際、labelであるユーザ名をクリックすると、inputのテキストボックスにカーソルが移動します。
これにより入力フィールドが小さい場合でも、label全体がクリック可能になるので操作性が向上します。