Tekst zastępczy, czyli atrybut placeholder w HTML5

W rozdziale:

Tekst zastępczy

Obsługa tekstu zastępczego
IE	Firefox	Safari	Chrome	Opera	iPhone	Android
10.0+	4.0+	4.0+	4.0+	11.0+	4.0+	2.1+

Jedną z nowości dodanych w języku HTML5 jest możliwość ustawiania tekstu zastępczego w polach wejściowych. Tekst zastępczy (ang. placeholder text) to napis wyświetlany w polu wejściowym, gdy jest puste i nieaktywne. Gdy użytkownik w nim kliknie (albo przejdzie do niego za pomocą klawisza Tab), tekst zastępczy znika.

Każdy nie raz widział coś takiego na stronach internetowych. Przykładowo przeglądarka Mozilla Firefox wyświetla w pustym pasku adresu napis „Przejdź do witryny WWW”.

Gdy klikniesz w tym miejscu (albo przejdziesz do niego za pomocą klawisza Tab), tekst zastępczy znika:

Poniżej znajduje się przykład użycia tekstu zastępczego we własnych formularzach:

<form>
  <input name="q" placeholder="Przejdź do witryny WWW">
  <input type="submit" value="Szukaj">
</form>

Przeglądarki nie obsługujące atrybutu placeholder zwyczajnie go zignorują. Kulturalnie i elegancko. Sprawdź czy twoja przeglądarka obsługuje tekst zastępczy.

Pytanie do profesora Kodeckiego

P: Czy w atrybucie placeholder można używać znaczników HTML? Chciałbym użyć obrazu albo zmienić kolor tekstu.
O: Atrybut placeholder może zawierać tylko tekst, żadnego kodu HTML. Ale istnieją niestandardowe rozszerzenia CSS pozwalające zmieniać właściwości tekstu zastępczego w niektórych przeglądarkach.

Aplikacje offline Kurs HTML5 Mikrodane