HTML5 w jednym ze swoich udogodnień wprowadza bardzo przyjazne rozwiązanie pozwalające na przechowywanie informacji o dowolnym tagu. W celu szybszego zrozumienia o co chodzi, posłużmy się przykładem kodu HTML formularza wraz z walidacją danych:

<input type="text" id="email" name="email" class="text required requiredEmail" />

Istnieje wiele bibliotek JavaScript, służących do walidacji formularza po stronie przeglądarki, które w ten właśnie sposób odnajdują pola, które powinny być wypełnione (posiadają klasę required) i sprawdzają, jaką zawartość powinny posiadać (requiredEmail). Rozwiązanie to oczywiście działało, ale powstawały zbędne, nic nie znaczące klasy CSS.

Jak już wspomniałem, HTML5 pomoże nam i w takim przypadku. A to dzięki możliwości stosowania własnych atrybutów z rodziny data-*. Zamysł jest prosty - autor strony może osadzić dowolną informację używając nowego atrybutu - dane te nie są nigdzie wyświetlane, są one dostępne dla JavaScript oraz CSS (za pomocą funkcji attr()).

Jako autorzy strony posiadamy praktycznie pełną dowolność w wyborze nazwy atrybutu - specyfikacja narzuca jedynie, by nie zawierał on dużych liter. Poprawny przykład:

<input type="text" id="email" name="email" data-validate="true" data-validate-type="email" />

Zgodnie ze specyfikacją, wartości powinny być teraz dostępne jako część zbioru dataset z użyciem notacji CamelCase (znanej także jako Notacja Wielbłądzia):

document.getElementById('email').dataset.validate;
document.getElementById('email').dataset.validateType;

Niestety, do czasu implementacji tego rozwiązania przez przeglądarki dane te nie są dostępne i musimy dostać się do nich w inny sposób:

document.getElementById('email').getAttribute('data-validate');
document.getElementById('email').getAttribute('data-validate-type');

Na szczęście powyższe "obejście" problemu działa bez problemu na wszystkich liczących się przeglądarkach.

Poza oczywistym przykładem przechowywania danych na potrzeby walidacji nowy atrybut umożliwia np. sortowanie zestawów danych (tabel) po danych nie widocznych, lub wyświetlanych dla użytkownika w sposób trudny do zrozumienia dla skryptów, np:

<li data-date="2010-07-07T07:58:12"><a href="#">Spis wydarzeń w dniu 7 lipca, roku 2010</a></li>

Komentarze

1

Komentarz użytkownika pecet

08 07 2010

Ale przecież HTML5 ma walidację po stronie przeglądarki już, więc po co js? http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#client-side-form-validation

2

Komentarz użytkownika BTM

08 07 2010

To tylko jeden z przykładów zastosowania - wcale nie znaczy, że jest to jedne słuszne zastosowanie. Po prostu to był najłatwiejszy do zobrazowania przykład.

I przy okazji - nie wiesz jak wygląda wsparcie dla podanego przez Ciebie rozwiązania ze strony przeglądarek?

3

Komentarz użytkownika pecet

08 07 2010

Chyba marnie, http://miketaylr.com/pres/html5/forms2.html tutaj jest np. demo i mi pod Firefoksem 3.6.x nie działa, ale hm... może się doczekamy przeglądarek z obsługą tego ;)

4

Komentarz użytkownika pecet

08 07 2010

No, pod Chrome działa OK ;) A pod Firefoksem właśnie zauważyłem, że z tego upload wielu plików też działa.

5

Komentarz użytkownika BTM

08 07 2010

Upload wielu plików to świetna rzecz - mam nadzieję, że IE9 to wprowadzi :)