Definiowanie własnych atrybutów w HTML-u
Internet 5th Nov 2009
Obecnie w czasach interfejsów napędzanych JavaScriptem coraz widoczniejszy staje się problem składowania danych w HTML-u. Prosty przykład: mamy generowany formularz, który chcemy zweryfikować za pomocą JavaScriptu. Przy generowaniu formularza posiadamy dla każdego pola zmienną mówiącą nam o tym czy to pole jest wymagane czy nie. I tu pojawia się problem, jak oznaczyć np. inputa jako pole wymagane? Struktura formularza nie daje nam miejsca na składowanie takich danych. Można kombinować z wrzuceniem jakiegoś słowa kluczowego do id. np:
id="required"
No ale id musi być niepowtarzalne, więc może klasa...
class="required"
Może, ale w sumie mam już tam kilka innych klas
class="specjalne kontrast required"A więc czy klasa to na pewno dobre miejsce? Jasne że nie, klasa jest dla styli. No więc jak? Trzeba stworzyć własny atrybut! Niby jasne, ale przecież validator nie uznaje własnych atrybutów...
Otóż uznaje. Trzeba je tylko zadeklarować w definicji dokumentu - DTD (Document Type Definition). Załóżmy że chcemy wzbogacić nasz input w atrybut required. Wystarczy więc taka konstrukcja DTD:
]>
Ta dekladacja zezwala atrybutowi required posiadać dowolną wartość znakową. Jeżeli chcielibyśmy ograniczyć wartość jedynie do dwóch pozycji wystarczy zastosować coś takiego:
]>
Ogólny schemat jest taki:
ATTLIST element atrybut typ opcjnonalnyStatus
No i gotowe. Teraz możemy zaprząc JavaScript do podjęcia odpowiednich działań na podstawie struktury dokumentu. Czyli np. w jQuery:
$('input[required='true']').PrzypilnujInteresu();
Prosto czysto i funkcjonalnie.
Materiał źródłowy:
http://www.alistapart.com/articles/customdtd/
PS. Remember remember the fifth of november...
Komentarze z jogger.pl
Jezeli dbasz jakkolwiek o dostepnosc, to i tak kazdemu elementowi (w sensie input, selecet, czy cokolwiek z formularza) nadajesz ID zeby obsluzyc label - chyba, ze labeli nie masz, to co innego wtedy ;)
@haRacz: zawsze można taki element wstawić do label i będzie ten sam efekt.
A co do artykułu - dzięki, przyda się, chociaż ostatnio i tak się przerzuciłem z własnych atrybutów na rel/class.
@haRacz: to jest jasne. Niektórzy kombinują jednak coś w stylu:
a później rozdzielają id względem znaku '-' i tym sposobem próbują przechowywać dodatkowe dane. Ale to nie jest eleganckie rozwiązanie.
Dzięki za informację, nie wiedziałem o takiej możliwości :) Może kiedyś się przyda.
I jesio
data-*w HTML5 ;)Robisz sobie krzywdę tworząc atrybut "required", który jest obecny w HTML 5 - z innymi wartościami niż proponowane przez Ciebie - i już obsługiwany przez niektóre przeglądarki (Opera).
Ponadto, do działania w przeglądarkach nie potrzebujesz kombinować nic z DTD. Jedynie Mozilla czyta DTD inline, ale używa z nich tylko entity. Tak więc ten kod, w teorii poprawny z punktu widzenia XML, w praktyce jest tylko zapychaczem miejsca. :)
A HTML5 faktycznie pozwala na atrybuty o dowolnej nazwie zaczynającej się na "data-". :)
@marcoos: czyżbyś już zapomniał jak to jest robić strony z uwzględnieniem IE? ;-)
A po co uwzględniać IE? Na szczęście ta pseudo-przeglądarka ma już mniejszość na polskim rynku i jej popularność ciągle spada :)
Niestety IEx to wciąż ~35% rynku. Nadal można spotkać IE6 a nawet IE8 jeszcze HTML-a 5 ma głęboko w ... planach.
Jeśli nawet Google (YouTube) wypięło się na IE6, a udział wszystkich wersji IE ciągle maleje, to wykonując jakieś projekty albo można już go olać, albo będzie można w niedalekiej przyszłości...
(i całe szczęście, sam pamiętam jak musiałem poprawiać swoje projekty, żeby działały pod IE6 i 7... :x Na prywatnych stronach olewałem, gorzej ze zleceniami...)
fajny motyw, tylko co on daje ? Zgodnośc z validatorem ? tym ktory sam w sobie jest pelny bledow ? Jedyny sens jaki widzę to wlasnie uzywanie na stronach tworzonych dla klientow. Co do HTML'a 5 to pewnie standartem stanie sie za 10-20 lat :D