HTML5: Atrybut placeholder

Nie od dziś wiadomo, że świat webmasterów zmienia się na lepsze. Rozwój HTML5 i CSS3 daje nam coraz większe możliwości, czyniąc naszą pracę przyjemniejszą. Po drugiej stronie stoją twórcy przeglądarek, którzy starają się nadążyć za nowymi trendami. W tym wyścigu niema miejsca dla słabeuszy, o czym przekonali się nawet panowie z Microsoftu, dumnie chwaląc się ich najmłodszym dzieckiem, opatrzonym numerem 9 (na razie w wersji Release Candidate). I jak tu się nie uśmiechać? Postanowiłem przyjrzeć się bliżej nowoczesności opisując to na blogu.

Podstawy

Dziś opiszę atrybut placeholder elementu input, który pomimo swojej skromnej budowy, daje nam spore możliwości. W czym tkwi całe jego piękno? Atrybut ten określa tekst jaki ma się wyświetlać w formularzu, gdy nie wprowadzono do niego żadnej wartości.

Na obrazku powyżej przedstawiony został efekt użycia atrybutu placeholder, a poniżej prezentuję kod za to odpowiedzialny:

<label for="search">Wyszukiwarka:</label>
<input name="search" type="text" placeholder="Szukaj..." />

Jestem za!

Co przemawia za placeholder? Szybkość implementacji. Kiedyś by osiągnąć taki efekt, używano jQuery a cały skrypt zamykał się w kilku liniach. Dziś wszystko sprowadza się do prostego atrybutu.
Kolejnym argumentem przemawiającym za placeholder jest to, że działa on nawet jeżeli użytkownik ma wyłączoną obsługę JavaScript.

Kwestia przeglądarek

Tu dochodzimy do ostatniego elementu układanki. Po za Internet Explorer (nawet IE9 nie radzi sobie z placeholder), wszystkie dostępne na rynku przeglądarki w najnowszych wersjach obsługują ten atrybut. Mowa tu oczywiście o Chrome, Safari, Operze i Firefox4 (wciąż jeszcze w wersji beta).

Podsumowanie

Jak widać, placeholder, pomimo swojej skromnej budowy, to niezwykle przydatny atrybut, dzięki któremu tworzenie formularzy staje się prostsze niż dotychczas. W planach mam zamiar opisać jeszcze inne nowoczesne elementy, skupiając się na razie na formularzach. Tematyka ta stanie się wiodącą, gdy tylko ukończę nową wersje bloga :)