TechLife devBlog

Definiowanie własnych atrybutów w HTML-u

Kodowanie, Techblog 5 listopada 2009 23:31

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

haRacz 06 listopada 2009 / 00:20

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 ;)

BTM 06 listopada 2009 / 07:38

@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.

trójkąt 06 listopada 2009 / 08:04

@haRacz: to jest jasne. Niektórzy kombinują jednak coś w stylu:

id='tytul-required-true'

a później rozdzielają id względem znaku '-' i tym sposobem próbują przechowywać dodatkowe dane. Ale to nie jest eleganckie rozwiązanie.

Programista 06 listopada 2009 / 08:44

Dzięki za informację, nie wiedziałem o takiej możliwości :) Może kiedyś się przyda.

Wasacz 06 listopada 2009 / 14:28

I jesio data-* w HTML5 ;)

marcoos 06 listopada 2009 / 20:44

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-". :)

trójkąt 06 listopada 2009 / 21:33

@marcoos: czyżbyś już zapomniał jak to jest robić strony z uwzględnieniem IE? ;-)

dos 07 listopada 2009 / 15:12

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 :)

trójkąt 07 listopada 2009 / 22:41

Niestety IEx to wciąż ~35% rynku. Nadal można spotkać IE6 a nawet IE8 jeszcze HTML-a 5 ma głęboko w ... planach.

dos 07 listopada 2009 / 22:45

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...)

hubert 17 grudnia 2009 / 14:41

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



Komentarze