Nowe elementy HTML5 nie pojawiają się same - zazwyczaj to użytkownicy zgłaszają potrzebę posiadania takiego a nie innego komponentu z zestawem konkretnych właściwości. Im więcej osób wyrazi chęć używania takiego ułatwienia, tym większe prawdopodobieństwo, że trafi ono w końcu do specyfikacji. Pod ten przypadek podpada placeholder, który przez wiele lat emulowany był za pomocą odrobiny JavaScriptu.

Dziś możemy już zapomnieć o doklejaniu kodu JavaScript do elementów, którym chcieliśmy dodać funkcjonalność wyświetlania pomocniczego tekstu - wszystko to można załatwić jednym atrybutem placeholder. Zobaczmy jak to było kiedyś (i do niedawna także na moim blogu):
<input

	type="text"

	value="Szukaj na blogu..."

	onfocus="if(this.value=='Szukaj na blogu...') this.value='';"

	onblur="if(this.value=='') this.value='Szukaj na blogu...';"

/>

Teraz konstruując wyszukiwarkę wystarczy dodać odpowiedni atrybut:
<input type="text" placeholder="Szukaj na blogu..." />

Placeholder HTML5 Przeglądarka załatwi resztę - obok widać zrzut ekranu przedstawiający wygląd pola z tym atrybutem. Prawda, że proste? Przykład działania wyszukiwarki z atrybutem placeholder zobaczyć można na moim blogu w prawym górnym rogu sidebara. Drugim przykładem użycia może być formularz, w którym każde pole (adres e-mail, numer telefonu, kod pocztowy) może posiadać pomocną podpowiedź, która rozwieje wszelkie wątpliwości co do formatu i wyglądu wprowadzanych danych ("adres@email.pl", +48 500 123 456" lub "00-000").

Więcej informacji

O atrybucie placeholder pisali już jakiś czas temu Marcoos i Chemikpil, w pierwszym wpisie można także zobaczyć jak proste jest stylowanie placeholdera. Jeśli natomiast chcecie poczytać wpis z nowszymi, aktualnymi informacjami dotyczącymi między innymi stylowania, to polecam artykuł na Web 367. Na koniec ciekawostki, które mogą się przydać osobom potrzebującym wsparcia atrybutu placeholder w starszych przeglądarkach oraz IE - dwa pluginy do jQuery.

Wsparcie przeglądarek

Wsparcie przeglądarek jest bardzo dobre - Firefox 4+, Chrome, Safari 5+ a nawet Opera czy przeglądarki mobilne z iOS Safari i Androidem na czele. Nawet programiści Microsoftu poszli po rozum do głowy i co prawda IE9 nie wspiera jeszcze atrybutu placeholder, ale IE10 już będzie sobie z tym radził bez problemu. Dzięki temu możemy spokojnie zapomnieć o wszelkiego rodzaju pomocniczych skryptach JS, sprawdzaniu dostępności czy pluginach jQuery i skupić się na podstawowej, standardowej konstrukcji. Cóż, nic nie stoi chyba na przeszkodzie, by zacząć stosować placeholder u siebie - jego implementacja jest przecież banalnie prosta w obsłudze.