placeholder w HTML to atrybut stosowany w elementach formularzy (przede wszystkim <input> oraz <textarea>), który wyświetla tymczasową podpowiedź – krótki, przygaszony tekst – opisującą oczekiwaną zawartość pola lub format danych, zanim użytkownik zacznie wpisywać własną treść.
Gdzie stosuje się placeholder?
Atrybut można umieścić:
- w polach tekstowych formularzy
<input>(np. typy: text, search, email, tel, url, number, password), - w polach wielowierszowych
<textarea>.
Nie jest akceptowany przez inne elementy formularzy, takie jak przyciski czy listy rozwijane.
Zachowanie placeholdera
- Tekst podpowiedzi pojawia się w polu jako szary napis i znika automatycznie, gdy użytkownik zaczyna wpisywać własną wartość lub wybierze pole myszką/klawiaturą;
- Po wyczyszczeniu pola i opuszczeniu go, placeholder wyświetla się ponownie;
- Jego zadaniem jest informować, a nie zastępować etykietę – dlatego nie polegaj wyłącznie na placeholderze jako opisie pola.
Przykłady użycia
Proste pole tekstowe –
<input type="text" placeholder="Wpisz swoje imię">Pole e-mail –
<input type="email" placeholder="Wprowadź swój adres e-mail">Numer telefonu z sugestią formatu –
<input type="tel" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">Taki placeholder sugeruje oczekiwany format numeru.
Pole wyszukiwania –
<input type="search" placeholder="Szukaj w serwisie...">Textarea z podpowiedzią –
<textarea placeholder="Opisz siebie..."></textarea>Najlepsze praktyki stosowania
- Stosuj zwięzłe, jasne podpowiedzi – najlepiej w formie przykładu lub krótkiej instrukcji;
- Unikaj długich zdań i znaków nowej linii – placeholder wyświetli tylko jednoliniowy tekst;
- Nie polegaj wyłącznie na placeholderze jako opisie treści pola: zawsze dołącz etykietę (
<label>), szczególnie z myślą o dostępności dla czytników ekranu; - Nie używaj placeholdera do przekazywania ważnych informacji, które mogą być utracone po rozpoczęciu wpisywania.
Typowe zastosowania
- wskazanie oczekiwanego formatu danych (np. daty, numeru telefonu),
- zachęcanie do wpisania określonego typu informacji (np. „Wpisz pytanie…”),
- sugestia przykładowej wartości, aby rozwiać wątpliwości użytkownika co wpisać,
- skrócenie czasu wypełniania formularzy przez podanie wzorcowej treści.
Podsumowanie
placeholder w HTML usprawnia wypełnianie formularzy, podnosząc komfort użytkowników poprzez jasną wskazówkę odnośnie wymaganej treści pola. Stosowany odpowiedzialnie – zawsze z etykietami i czytelnymi wskazówkami – zwiększa czytelność i użyteczność serwisu internetowego.
