Placeholder là gì?

Placeholder là dòng chữ gợi ý hiển thị tạm thời trong một ô nhập liệu (input) khi ô đó còn trống, và biến mất ngay khi người dùng bắt đầu nhập.

Điểm chính:

• Placeholder không phải là nhãn (label) của ô nhập liệu, dù trông có vai trò tương tự.
• Theo tài liệu chính thức của MDN, placeholder “không nên dùng thay thế” cho label.
• Placeholder biến mất khi người dùng gõ chữ, khiến người đọc dễ quên ô đó dùng để nhập gì.
• WCAG (tiêu chí 3.3.2, mức A) yêu cầu phải có nhãn hoặc hướng dẫn rõ ràng cho ô nhập liệu.
• Màu chữ placeholder mặc định thường nhạt hơn văn bản thường, dễ khó đọc với một số người dùng.

Placeholder khác label ở điểm nào?

Hai thành phần này thường bị nhầm vì cùng xuất hiện trong ô nhập liệu của một landing page hoặc form liên hệ, nhưng vai trò hoàn toàn khác nhau:

Vì sao chỉ dùng placeholder gây khó cho người dùng

Tài liệu chính thức của MDN về thẻ <input> nói rất rõ: placeholder “không nên là điều cần thiết để hiểu form của bạn. Nó không phải là một label, và không nên dùng thay thế, vì nó không phải vậy.” Lý do được nêu gồm nhiều lớp vấn đề cộng lại:

• Placeholder không được trình đọc màn hình hỗ trợ đồng nhất — một số trình đọc màn hình đọc được, một số không, khiến người dùng khuyết tật thị giác không chắc ô đó dùng để nhập gì.
• Ngay khi người dùng gõ một ký tự, placeholder biến mất hoàn toàn. Với người có khó khăn về ghi nhớ hoặc chú ý, việc quay lại kiểm tra “ô này nhập cái gì” trở nên khó khăn vì gợi ý đã mất.
• Các trình duyệt có chức năng dịch trang tự động có thể bỏ qua thuộc tính placeholder khi dịch, khiến phần gợi ý không được dịch cùng với nội dung còn lại của trang.
• Màu chữ placeholder theo mặc định thường có độ tương phản thấp hơn văn bản thông thường, dễ khó đọc với người dùng có thị lực kém hoặc đang dùng màn hình dưới ánh sáng mạnh.

WCAG nói gì về nhãn và hướng dẫn cho ô nhập liệu

Tiêu chí 3.3.2 “Labels or Instructions” trong WCAG, thuộc mức A (mức cơ bản nhất, nên đạt với mọi website), yêu cầu: khi nội dung cần người dùng nhập thông tin, phải có nhãn hoặc hướng dẫn mô tả rõ thông tin cần nhập. Nhiều tài liệu hướng dẫn triển khai tiêu chí này đồng nhất ở một điểm: placeholder không được coi là đáp ứng đủ yêu cầu này, vì nó biến mất khi nhập và không phải lúc nào cũng được công cụ hỗ trợ đọc đúng cách như một nhãn thật.

Nói đơn giản: placeholder có thể đi kèm để hỗ trợ thêm (ví dụ gợi ý định dạng số điện thoại), nhưng không được dùng làm cách duy nhất để người dùng biết ô đó nhập gì.

Khi nào có thể dùng placeholder, khi nào không nên

Cách làm form đúng — label luôn có, placeholder chỉ là phần hỗ trợ thêm

Cách làm đúng không khó, chỉ cần luôn gắn một thẻ <label> cho mỗi ô nhập liệu, placeholder nếu có chỉ đóng vai trò bổ sung:

<label for="dien-thoai">Số điện thoại</label>
<input id="dien-thoai" type="tel" placeholder="Ví dụ: 09xxxxxxxx">

Nếu vì lý do thiết kế không muốn hiển thị label trên giao diện, vẫn có cách giữ label cho trình đọc màn hình mà không cần hiển thị trên màn hình (ẩn bằng CSS nhưng vẫn giữ trong mã nguồn), thay vì bỏ hẳn label và chỉ dùng placeholder.

Ví dụ form tại Việt Nam dễ mắc lỗi placeholder thay label

Ví dụ thường gặp: một form đặt lịch hẹn của phòng khám hoặc spa chỉ có các ô nhập liệu với chữ mờ bên trong như “Họ tên”, “Số điện thoại”, “Chọn dịch vụ” — không có nhãn cố định nào khác. Khi người dùng điền xong và cuộn lên kiểm tra lại trước khi gửi, các ô đều trống trơn về mặt chữ, không còn gợi ý nào để biết ô nào là ô gì nếu họ muốn sửa lại thông tin. Đây là tình huống phổ biến khi thiết kế landing page ưu tiên giao diện gọn mà bỏ qua việc kiểm tra khả năng tiếp cận trước khi đưa vào sử dụng thật.

Sai lầm hay gặp

• Bỏ hẳn label vì nghĩ placeholder đã đủ rõ: đây là lỗi phổ biến nhất, xuất phát từ việc coi placeholder và label là một.
• Dùng placeholder để viết hướng dẫn dài: placeholder chỉ nên ngắn, dạng ví dụ; hướng dẫn dài nên đặt ngoài ô nhập, luôn hiển thị.
• Màu placeholder quá nhạt: khiến placeholder gần như không đọc được, kể cả khi ô còn trống.
• Không kiểm tra form bằng trình đọc màn hình trước khi đưa vào sử dụng: nhiều lỗi về placeholder chỉ lộ ra khi thử bằng công cụ hỗ trợ đọc màn hình thật, không phải khi chỉ nhìn bằng mắt.

Lỗi thiết kế form như trên không chỉ ảnh hưởng tới khả năng tiếp cận — nó còn làm giảm tỷ lệ hoàn tất form nói chung, vì người dùng bối rối khi không chắc đã điền đúng ô hay chưa. Nếu bạn đang để một công cụ tạo giao diện tự động dựng toàn bộ landing page, bao gồm cả form, nên kiểm tra kỹ phần nhãn ô nhập liệu — đây là lỗi rất dễ bị bỏ qua khi làm website theo kiểu vibe coding, vì giao diện nhìn vẫn ổn trên màn hình trong lúc duyệt code sinh ra.

Nguồn tham khảo

Thông tin trong bài được đối chiếu với các nguồn chính thức dưới đây tại thời điểm biên soạn; văn bản và chính sách có thể thay đổi.

• MDN — thuộc tính placeholder của thẻ input
• W3C — Understanding WCAG 2.2: Labels or Instructions
• W3C WAI — Forms tutorial: Instructions

Câu hỏi thường gặp

Placeholder có ảnh hưởng tới SEO không?

Không trực tiếp theo cách công cụ tìm kiếm xếp hạng, nhưng form khó dùng khiến người đọc rời trang hoặc bỏ giữa form, ảnh hưởng tới tỷ lệ chuyển đổi — một yếu tố quan trọng với trang đích.

Có cần bỏ hoàn toàn placeholder không?

Không cần bỏ hẳn. Placeholder vẫn hữu ích để gợi ý định dạng hoặc ví dụ, miễn là luôn đi kèm một label riêng, không dùng placeholder làm nhãn duy nhất.

Làm sao kiểm tra form của mình có mắc lỗi placeholder-thay-label không?

Cách đơn giản nhất: điền thử vào từng ô, sau đó xem còn gợi ý nào giúp bạn biết ô đó dùng để nhập gì không. Nếu không còn gì, khả năng cao form đang thiếu label.

WCAG 3.3.2 áp dụng cho loại website nào?

Áp dụng chung cho mọi website có ô nhập liệu, không riêng website cơ quan nhà nước. Các website thương mại, dịch vụ, landing page bán hàng cũng nên đáp ứng tiêu chí này để dễ dùng cho nhiều nhóm người dùng hơn.

Placeholder có cần dịch khi làm website nhiều ngôn ngữ không?

Cần, và nên làm thủ công — vì một số trình duyệt dịch trang tự động có thể bỏ qua thuộc tính placeholder, khiến phần gợi ý còn giữ nguyên ngôn ngữ gốc trong khi phần còn lại đã được dịch.