Bóc trần thuộc tính placeholder: Trợ thủ đắc lực hay "cú lừa" UI/UX kinh điển?

Chào anh em!

Nối tiếp chủ đề về thẻ <input>, hôm nay chúng ta sẽ bàn về một thuộc tính "nhỏ nhưng có võ" và cũng là nạn nhân bị lạm dụng nhiều nhất trong giới làm giao diện: placeholder.

Bất cứ khi nào thiết kế một form đăng nhập hay thanh tìm kiếm, phản xạ của 99% anh em coder là gõ ngay thuộc tính này vào. Nó là cái dòng chữ xám mờ mờ nằm ngoan ngoãn bên trong ô nhập liệu, và ảo thuật biến mất ngay khi người dùng gõ ký tự đầu tiên.

Nghe thì có vẻ hoàn hảo để tiết kiệm không gian, nhưng thực tế, nếu không hiểu rõ bản chất, placeholder có thể giết chết trải nghiệm người dùng (UX) của dự án. Hãy cùng mổ xẻ nó nhé!

1. Bản chất thực sự của placeholder

Theo đúng chuẩn do W3C (tổ chức định hình web) quy định, placeholder sinh ra để làm Gợi ý (Hint) hoặc Ví dụ (Example) cho định dạng dữ liệu mà ứng dụng mong muốn nhận được.

Nó đóng vai trò như một người hướng dẫn thầm lặng:

• Đúng: <input type="tel" placeholder="Ví dụ: 0912 345 678">
• Đúng: <input type="url" placeholder="https://example.com">

Khi người dùng nhìn vào ô input, họ sẽ ngay lập tức mường tượng ra format mình cần gõ mà không cần đọc những dòng hướng dẫn dài dòng bên ngoài.

2. Cú lừa UX kinh điển: Dùng placeholder thay thế hoàn toàn <label>

Đây là một "tội ác" UI/UX cực kỳ phổ biến. Để bắt trend thiết kế tối giản (minimalist), rất nhiều Frontend Developer (và cả Designer) đã thẳng tay xóa bỏ thẻ <label> (tiêu đề của ô nhập liệu) và nhét thẳng nó vào placeholder.

<!-- CÁCH LÀM TỒI -->
<input type="text" placeholder="Họ và tên">
<input type="text" placeholder="Địa chỉ giao hàng">

Tại sao cách này lại thảm họa?

• Hội chứng "Cá vàng": Ngay khi bố đời click vào ô nhập liệu và gõ chữ "N", chữ "Địa chỉ giao hàng" sẽ biến mất. Nếu lúc đó có tin nhắn điện thoại tới, bố đời quay đi 5 giây, khi nhìn lại màn hình sẽ tự hỏi: "Ủa, cái ô mình đang gõ dở này là cái gì nhỉ? Tên đường hay Phường/Xã?". Để biết được, người dùng phải xóa hết đoạn text vừa gõ để placeholder hiện lại. Cực kỳ ức chế!
• Vấn đề độ tương phản: Theo mặc định của mọi trình duyệt, text của placeholder có màu xám nhạt để phân biệt với chữ người dùng gõ. Màu xám trên nền trắng thường không vượt qua được tiêu chuẩn độ tương phản (Contrast Ratio) của Web Accessibility. Những người thị lực kém hoặc ngồi ngoài trời nắng sẽ không thể đọc được ô đó yêu cầu nhập gì.
• Screen Readers (Trình đọc màn hình): Không phải trình đọc màn hình cho người khiếm thị nào cũng đọc được placeholder nếu thiếu <label>, khiến form của bạn trở thành "hố đen" với họ.

3. Giải pháp "Vẹn cả đôi đường": Floating Label

Nếu bố đời vẫn đam mê sự gọn gàng, không muốn cái <label> chiếm diện tích bên trên ô input, thì giới Frontend hiện đại đã đẻ ra một kỹ thuật cực kỳ thông minh gọi là Floating Label (như thiết kế Material Design của Google).

Với kỹ thuật này, cái <label> ban đầu sẽ nằm chèn lên ô <input> (trông y hệt như một placeholder). Nhưng khi người dùng click vào để gõ, cái <label> không biến mất, mà nó sẽ dùng CSS (kết hợp pseudo-class :focus-within hoặc :placeholder-shown) để trượt mượt mà lên góc trên cùng, nhường chỗ cho text đang gõ.

Nhờ vậy, giao diện vừa tiết kiệm được diện tích lúc ban đầu, người dùng lại không bao giờ bị quên mất mình đang nhập trường dữ liệu nào.

4. Thay áo mới cho placeholder bằng CSS

Nếu thực sự cần dùng placeholder đúng nghĩa, bố đời hoàn toàn có thể "độ" lại nhan sắc của nó bằng một pseudo-element chuyên dụng trong CSS: ::placeholder.

/* Tùy chỉnh màu sắc và font chữ cho placeholder */
input::placeholder {
    color: #a0aec0;
    font-style: italic;
    opacity: 1; /* Sửa lỗi Firefox mặc định làm mờ placeholder */
}

/* Hiệu ứng mờ dần đi khi người dùng click vào ô input */
input:focus::placeholder {
    color: transparent;
    transition: color 0.3s ease;
}

Lời kết

placeholder là một ví dụ điển hình cho việc một tính năng kỹ thuật bị lạm dụng sai mục đích thiết kế. Nguyên tắc vàng bố đời cần nhớ là: Thẻ <label> nói cho người dùng biết họ CẦN nhập gì (Tên, Tuổi, Địa chỉ). Còn placeholder chỉ nên dùng để gợi ý CÁCH nhập (Nhập theo định dạng nào).

Sử dụng chúng đúng vai trò chính là bí quyết để tạo ra những form nhập liệu thân thiện, chuyên nghiệp và có tỷ lệ chuyển đổi (Conversion Rate) cao nhất!