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 na 0, 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.


Zmodyfikowano: 13.11.2006, 08:58
submit