Có mấy cách liên kết `<label>` với input? Dùng `placeholder` thay label được không?

Hai cách liên kết chuẩn:

<!-- 1. explicit: for trỏ tới id của input -->
<label for="email">Email</label>
<input id="email" type="email">

<!-- 2. implicit: bọc input trong label -->
<label>Email <input type="email"></label>

Cách 1 được ưu tiên vì linh hoạt về layout và tương thích rộng hơn với trợ năng. Lưu ý for khớp với id, không phải name.

Liên kết đúng cho ba lợi ích: screen reader đọc được nhãn khi focus vào ô, click vào chữ thì focus nhảy vào ô, và vùng bấm rộng hơn trên mobile.

placeholder không thay được label:
- Nó biến mất khi người dùng bắt đầu gõ → mất ngữ cảnh khi kiểm tra lại form.
- Màu mặc định nhạt, thường fail contrast.
- Hỗ trợ trợ năng không đồng nhất giữa các trình duyệt/screen reader.

Nếu thiết kế bắt buộc không hiện chữ, vẫn giữ <label> nhưng ẩn về mặt thị giác bằng class sr-only (clip 1px), hoặc dùng aria-label trên input. Không dùng display: none — nó gỡ luôn khỏi accessibility tree.