Placeholder to wzorcowy tekst wyświetlany w pustym polu formularza, który znika, gdy użytkownik zaczyna pisać. Ma pokazać oczekiwany format danych, np. „np. jan@example.pl”.
Czy placeholder może zastąpić etykietę?
Nie. Znika po wpisaniu tekstu, ma zwykle niski kontrast i nie jest niezawodnie odczytywany przez czytniki ekranu. Każde pole powinno mieć stałą, widoczną etykietę <label>.
Do czego używać placeholdera?
Tylko jako uzupełnienia: przykład formatu lub krótka wskazówka. Nie umieszczaj w nim ważnych instrukcji ani informacji o błędach.
Alternatywy
Etykieta unosząca się nad polem (floating label) lub tekst pomocniczy pod polem, który pozostaje widoczny. Oba rozwiązania są dostępniejsze niż sam placeholder.
Przykład poprawnego formularza
Pole „Adres e-mail” ma stałą etykietę nad polem, a w środku placeholder „np. jan@example.pl”. Pod polem pojawia się komunikat błędu, jeśli format jest niepoprawny. Placeholder ma kolor o kontraście co najmniej 4,5:1, aby spełnić wymagania WCAG, i nie jest jedyną informacją o wymaganym formacie, np. daty lub numeru telefonu.
W pracy nad produktem uwzględnia się to na kolejnych etapach, jakie obejmuje proces projektowania UX.
Zobacz w praktyce
Proces projektowania UX krok po kroku – od badań do testów
Jak zabezpieczyć aplikację przed SQL Injection
Testy A/B w GA4 - jak je przeprowadzić?