Powtarzane sekcje w WHATWG Web Forms 2
Opisany tu mechanizm działa obecnie wyłącznie w Operze 9 i wymaga dodania dość złożonej obsługi formularza po stronie serwera, aby działał w dowolnej przeglądarce.
W formularzach czasem potrzeba dać możliwość wpisania zmiennej ilości elementów — np. formularz do budowania ankiety zamiast narzucać ilość odpowiedzi powinien umożliwić proste ich dodawanie i usuwanie. Ten problem rozwiązuje repetition model z Web Forms 2.
Szablon i bloki
Prosty formularz do budowania ankiety mógłby wyglądać tak:
<form action="">
<label>
Odpowiedź 1<input type="text" name="odpowiedz1"/></label>
<label>
Odpowiedź 2<input type="text" name="odpowiedz2"/></label>
<label>
Odpowiedź 3<input type="text" name="odpowiedz3"/></label>
</form>
Żeby przeglądarka mogła dodać pola do udzielenia kolejnej odpowiedzi trzeba pokazać które to i w jaki sposób ma je powielać. W tym celu tworzy się szablon (ang. template), który identyfikują atrybuty id
(nazwa/identyfikator szablonu) oraz repeat="template"
(oznaczenie, że to jest szablon) na dowolnym „neutralnym” elemencie:
<form action="">
<div id="szablon-odpowiedzi" repeat="template">
<label>
Odpowiedź<input type="text" name="odpowiedz"/></label>
</div>
</form>
Pomysł na mniej idiotyczną polską nazwę?
Szablon „sklonowany” przez przeglądarkę nazywany jest blokiem powtórzenia (ang. repetition block).
Licznik w szablonie
Podczas tworzenia bloku z szablonu we wszystkich atrybutach wewnątrz szablonu (nawet atrybutach elementów nie związanych z formularzami) specjalny identyfikator zamieniany jest na unikalny
numer bloku. Identyfikator to [identyfikator-szablonu]
, gdzie identyfikator-szablonu to wartość id
elementu z repeat="template"
.
<div id="szablon-odpowiedzi" repeat="template">
<label>
Odpowiedź<input type="text" name="odpowiedz[szablon-odpowiedzi]"/></label>
</div>
Fragment[szablon-odpowiedzi]
będzie podmieniany na0
,1
, itp.
Dzięki temu można uzyskać tak samo ponumerowane elementy jak w pierwszym przykładzie.
Licznik jest unikalny i niezmienny dla każdej kopii bloku. Z tego powodu, jeśli użytkownik będzie dodawał i usuwał bloki w przypadkowej kolejności, również ich numeracja będzie chaotyczna — nie spodziewaj się dostać bloków ponumerowanych 1,2,3...
Tylko atrybuty są zmieniane. Jeśli chcesz wyświetlić nr bloku użytkownikowi musisz zastosować sztuczkę:
<span title="[szablon-odpowiedzi]" style="content:attr(title)"/>
Początkowe wartości
Ilość początkowych bloków ustala atrybut repeat-start
szablonu. Domyślnie widoczna jest jedna kopia.
<div id="szablon-odpowiedzi" repeat="template" repeat-start="5">
...
W tym przykładzie przeglądarka od razu stworzy pięc kopii szablonu.
Ustawienie repeat-start="0"
spowoduje, że pierwszy blok pojawi się dopiero po wciśnięciu przycisku Dodaj, co w wielu przypadkach jest najbardziej
sensownym rozwiązaniem.
c.d.n.
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 13.11.2006, 17:58