Te nieszczęsne rubryki

Standardowe formularze HTML umieszczane na stronach WWW mają sporo ograniczeń - na przykład nie pozwalają łatwo kontrolować danych wprowadzanych w poszczególnych polach. Zapoznajmy się z ulepszoną wersją formularzy, bazujących na języku XML

Zamiast tego pokażę, jak sporządzać formularze w nowy sposób. Te zwykłe, bazujące na języku HTML, mają bowiem sporo ograniczeń i bez zastosowania dość skomplikowanych technik dopuszczają istnienie trzydziestodniowych (albo dłuższych) lutych. Na kilku kolejnych stronach zaprezentuję podstawy XForms.

W3C pracuje

XForms to kolejna aplikacja XML. W następnej wersji XHTML (2.0) ma ona być standardowym narzędziem do tworzenia formularzy – tak orzekła organizacja W3C. Głównym atutem tego języka jest niezależność od sprzętu i oprogramowania. Jest to możliwe dzięki przechowywaniu danych w dokumencie XML. Prezentowanie informacji odbywa się natomiast za pośrednictwem interfejsu użytkownika. Co z tego? Otóż dane przechowywane w tym samym dokumencie XML mogą być odczytywane zarówno przez klasyczną przeglądarkę WWW, jak i np. przez aplikację głosową przeznaczoną dla osób niedowidzących.

Inną ważną cechą jest kontrolowanie danych wprowadzanych przez użytkownika. Weryfikację przeprowadzamy, stosując odpowiednie typy danych XML Schema lub obsługę zdarzeń XML.

XForms nie jest aplikacją funkcjonującą samodzielnie – musimy ją osadzać w innych dokumentach XML. Aby odczytywać dane XForms, powinniśmy się zaopatrzyć w przeglądarkę z wbudowanym modułem XForms Processor. Pobiera on dane, koduje je i wysyła w postaci dokumentu XML. Firefox 1.5 i Internet Explorer 6.0 potrafią już korzystać z XForms – wystarczy tylko zainstalować odpowiednie plug-iny.

W dwóch kawałkach

Jak wspomniałam, XForms składa się z dwóch części:

  • szablonu dokumentu XML przechowującego dane oraz opisującego je – jest to tzw. model XForms (XForms Model);
  • interfejsu użytkownika XForms (XForms User Interface), który pobiera dane, a ponadto definiuje liczbę i typy kontrolek formularza oraz ich wygląd.
  • Model danych jest definiowany w dokumencie XML zawsze w elemencie <model>. Ten z kolei zawiera dwa ważne znaczniki:

    <instance>

    i <submission> .

    Element <instance> to szablon dla danych formularza. Natomiast <submission> wskazuje, gdzie zostaną wysłane informacje. Element ten może zawierać dodatkowe atrybuty id, method i

    action

    . Pierwszy określa unikatową nazwę formularza, do którego będziemy mogli się później odwoływać. Drugi wskazuje metodę przesyłania danych na serwer (np.

    get, post, put

    ). Ostatni określa adres, na który zostanie wysłany formularz. Oto przykład modelu danych XForms:

    <model>
    <instance><imie/><nazwisko/>
       </instance><submission id=”1″
       method=”post” action=
       „wynik.php”/>
    </model>

    Zalety XForms
  • niezależność od sprzętu – ten sam formularz będzie przetwarzany przez przeglądarki różnego typu (klasyczny browser, przeglądarkę głosową itp.);
  • możliwość wykonywania obliczeń na wartościach wprowadzonych w formularzu;
  • sprawdzanie poprawności danych podczas ich wprowadzania;
  • kontrolowanie wartości wpisywanych w formularzu (sprawdzanie, czy są one określonego typu, czy mieszczą się w określonym przedziale liczbowym, czy podana data początkowa nie jest późniejsza od końcowej itp.);
  • wskazywanie, że niektóre pola muszą być wypełnione;
  • dostarczanie tych samych formularzy do różnych serwerów (np. poszukiwanej frazy do różnych wyszukiwarek);
  • rezultat przetworzenia formularza może być przekazany do innego formularza;
  • pobieranie danych dla formularza z zewnętrznych dokumentów.
  • Instancji danych nie musimy definiować. Wolno nam ją pobrać z dokumentu zewnętrznego. W tym celu stosujemy element <instance> z atrybutem src .

    Druga część formularza to interfejs użytkownika XForms. Jego zasadniczymi elementami są kontrolki, np. i :

    <input ref=”imie”><label>Imię:
       </label></input>

    <submit submission=”1″><label>
       Wyślij dane</label></submit>

    Zauważmy, że każdy element zawiera dodatkowo pod-element <label>, w którym umieszczamy tekst, jaki powinien pojawić się obok lub na kontrolce.

    Czym różnią się znaczniki <input> i

    <submit>?

    Za pomocą pierwszego tworzymy pole, w którym użytkownik wpisze dane (np. „Imię”). Atrybut ref wskazuje konkretny element zdefiniowany w modelu danych. Element <submit> odpowiada natomiast za wyświetlenie przycisku, po naciśnięciu którego formularz zostanie wysłany w miejsce wskazane w elemencie submission .

    Pierwsze kroki w XForms

    Przygotujemy formularz służący do podawania danych osobowych. Będziemy w nim wpisywać imię i nazwisko, a wyświetlony przycisk pozwoli wysłać wprowadzone informacje.

    Aplikację XForms musimy umieścić w jakimś dokumencie. Powiedzmy, że będzie to plik XHTML. I od razu pojawia się pytanie: jak odróżnić znaczniki XHTML od tagów XForms?

    Z pomocą przychodzą tzw. nazwy przestrzeni. Dzięki nim w jednym dokumencie XML umieścimy różne aplikacje. Oficjalną nazwą przestrzeni dla XForms jest http://www.w3.org/2002/xforms, a dla XHTML –

    http://www.w3.org/1999/xhtml

    .

    Nazwę przestrzeni kojarzymy z określonym prefiksem. Dla języka XML możemy użyć domyślnej nazwy przestrzeni i w tym wypadku jesteśmy zwolnieni z obowiązku stosowania prefiksu. Wykorzystamy to w naszym dokumencie (

    form1.xhtml

    ). Domyślnym językiem będzie XHTML, dla XForms zastosujemy natomiast prefiks w postaci litery f. A oto kod opisujący nasz formularz:

    <html xmlns=”http://www.w3.org/1999/xhtml”
    xmlns:f=”http://www.w3.org/2002/xforms” lang=”pl”>
    <head>

    <f:model>
      <f:instance><imie/><nazwisko/>
       </f:instance>
      <f:submission id=”1″ method=”post”
       action=”wynik.php”/>
    </f:model></head><body>
    <h2>Nasz pierwszy formularz
       XForms.</h2>
    <p>Podaj dane osobowe:</p><br/>
    <f:input ref=”imie”>
    <f:label>Imię: </f:label></f:input>
       <br />
    <f:input ref=”nazwisko”>
    <f:label>Nazwisko: </f:label>
       </f:input><br />
    <f:submit submission=”1″>
    <f:label>Wyślij dane</f:label>
       </f:submit></body></html>

    Nietrudno zauważyć, że w dokumencie XHTML model danych umieszczamy w nagłówku dokumentu (w sekcji

    <head>

    ), a elementy interfejsu użytkownika w ciele dokumentu (w sekcji

    <body>

    ). Wynika to z faktu, że model przedstawia jedynie strukturę danych. Za prezentację kontrolek odpowiada natomiast interfejs użytkownika.

    W XForms oprócz modelu danych i interfejsu użytkownika może pojawić się element <extension>. Umieszczamy w nim inne aplikacje XML (np. RDF czy SVG). Na płycie dołączonej do CHIP-a znajduje się plik form2.xhtml z kodem opisującym formularz, do którego dodaliśmy aplikację SVG.

    Zamknij

    Choć staramy się je ograniczać, wykorzystujemy mechanizmy takie jak ciasteczka, które pozwalają naszym partnerom na śledzenie Twojego zachowania w sieci. Dowiedz się więcej.