Pohled na webové formuláře druhé generace

Formuláře zajišťují jeden ze základních prvků interakce webových aplikací s uživatelem – a sice zadávání údajů. Dosavadní jednoduché formuláře svou úlohu plní docela uspokojivě, i když jim k dokonalosti samozřejmě leccos schází. S rozvojem webových aplikací a nástupem fenoménu známém jako Web 2.0 však nabyla myšlenka jejich zdokonalení patrného významu.

XForms

První ucelené řešení nové generace formulářů představuje specifikace XForms. XForms nejsou samostatný typ dokumentů, je možné je používat jen jako integrální součást jiných značkovacích jazyků v XML dokumentech. Vycházejí především vstříc dosud nenaplněné koncepci modularizovaného XHTML.

XForms rozdělují tradiční webový formulář na tři části: XForms model, uživatelské rozhraní a data, což si předvedeme na malé ukázce.

XForms model:

<xforms:model>
  <xforms:instance>
    <person xmlns="">
      <fullname/>
      <sex/>
      <age/>
    </person>
  </xforms:instance>
  <xforms:submission action="http://example.com/submit" method="post" id="submit" includenamespaceprefixes=""/>
</xforms:model>

Kód pro uživatelské rozhraní (důležitý je zde atribut ref, jehož prostřednictvím jsou formulářové prvky připoutány k XForms modelu):

<input ref="fullname">
  <label>Jméno a příjmení:</label>
</input>
<select1 appearance="full" ref="sex">
  <label>Pohlaví:</label>
  <item>
    <label>Muž</label>
    <value>Y</value>
  </item>
  <item>
    <label>Žena</label>
    <value>X</value>
  </item>
</select1>
<input ref="age">
  <label>Věk:</label>
</input>
<submit submission="submit">
  <label>Submit</label>
</submit>

Získaná data pak budou mít tuto podobu (typ serializace je dán atributem method, resp. jeho hodnotou):

<person>
  <fullname>Josef Novák</fullname>
  <sex>Y</sex>
  <age>35</age>
</person>

Samotné toto členění však není zase tak důležité, ba naopak může někomu připadat jako zbytečná komplikace, odrazující od používání. Opravdovou devizou XForms jsou nástroje k validaci a zpracování zadaných údajů.

XForms vs. HTML 5

Předpokladem pro nasazení XForms do praxe však byl vývoj a implementace XHTML. Vývoj XHTML ale ve W3C stagnoval, rovněž realističnost celého projektu se zahalila pochybnostmi. Za této situace se ujala myšlenka znovuobnovení vývoje jazyka HTML, se kterou přišla skupina WHATWG (Web Hypertext Application Technology Working Group), sdružující zejména řadu tvůrců webových prohlížečů jako například Mozilla Foundation, Opera Software či Apple. WHATWG konkrétně pracovala na dvou normách – Web Applications 1.0 a Web Forms 2.0 – obě se v roce 2007 staly podkladem rodící se W3C specifikace HTML 5. Je potřeba říci, že HTML 5 přináší, co se formulářů týče, v podstatě to samé, co už dříve XForms, které ostatně budeme v HTML 5 také moci používat, ale zřejmě se příliš neuplatní – ze dvou důvodů: jednak mají vylepšené HTML formuláře před XForms výhodu zpětné kompatibility, jednak XForms působí velmi komplexním a sofistikovaným dojmem, což leckoho spolehlivě odradí. Ne každý má totiž chuť ponořit se do studia XML schémat a podobných věcí.

Zdokonalené HTML formuláře

Nové elementy, atributy a hodnoty

Někoho to možná překvapí, ale HTML 5 přidává pouze tři nové formulářové elementy:

• datalist – obsahuje položky, reprezentované elementem option, které mohou být uživateli nabídnuty pro vyplnění vstupního pole; datalist musí být identifikovatelný prostřednictvím svého ID (hodnota atributu id), na nějž je ze strany příslušných inputů odkazováno atributem list; prohlížeče, které datalist znají, jej nebudou vykreslovat
• output – výstupní pole určené pro zobrazování výsledků, vypočtených na základě uživatelem dodaných údajů
• keygen – generuje privátní a veřejný klíč; má dva speciální atributy – challenge (výzva, která je odeslána spolu s veřejným klíčem) a keytype (typ klíče). keygen pochází z legendárního Netscapu a některé prohlížeče jej již mají implementovaný – takže nihil novi sub sole

Výrazně však přibylo dalších typů vstupních polí. Nově namnožené typy inputů jsou: search, url, email, datetime, time, date, month, week, datetime-local, number, range, color. Tento způsob rozšíření má výhodu ve zpětné kompatibilitě. Pokud prohlížeč zmíněné nové typy vstupních políček nepodporuje, zobrazí ta klasická textová a uživatel tedy může klidně vpisovat požadované údaje do nich. Hodnota atributu type je v DTD pro HTML 4 a XHTML 1 definována jako CDATA, to znamená, že vyhoví jakákoliv znaková data, což dále znamená, že můžeme spokojeně používat nové typy vstupních polí i v současném (X)HTML a přesto budeme mít své webové stránky validní.

Z nových atributů

• Formulářový prvek obvykle náleží formuláři, do kterého je vnořen, jehož je potomkem. Pomocí atributu form bude možno formulářový prvek explicitně přiřadit kterémukoliv formuláři na stránce. Hodnotou atributu form je ID příhodného formuláře.
• Atribut placeholder reprezentuje krátký pokyn, jak má být vstupní pole vyplněno. Text je vepsán dovnitř vstupního pole a zmizí poté, co je toto pole aktivováno (focused).
• autocomplete = "off" potlačí automatické doplňování, v prohlížečích už to je dávno implementované.
• autofocus

Kontrola zadaných údajů

Validace (ověřování formální správnosti vstupních dat) na straně klienta má dvě výhody: jednak uživatelé nemusí dlouho čekat na případné zdvořilé sdělení, že není vše ve formuláři náležitě vyplněno, a jednak se provoz serveru zbytečně nezatěžuje vyřizováním špatně vyplněných formulářů. Dosud se k tomuto účelu využíval JavaScript, nyní by bylo možné nechat to výlučně na HTML. Možnosti validace s HTML nebudou samozřejmě tak široké jako u JavaScriptu, ale pro běžnou potřebu budou naprosto postačovat.

V rámci této validace se bude kontrolovat zda

• jsou vyplněny prvky, které obsahují atribut required
• je vstupní pole vyplněno tak, jak odpovídá jeho typu
• hodnota vstupního pole odpovídá všem případným omezením danými atributy maxlength (maximální počet znaků), min (minimální číselný nebo časový údaj), max (maximální číselný nebo časový údaj), step (povinný rozestup mezi číselnými nebo časovými hodnotami), pattern (regulární výraz, jemuž zadaná hodnota musí odpovídat)

Pokud je validace formuláře z nějakého důvodu nežádoucí, je možné ji potlačit atributem novalidate (platí u elementu form) nebo formnovalidate (platí u formulářových prvků uvnitř formuláře).

Dodejme, že validace u klienta není náhradou validace na serveru!

Odesílání dat

Data odesílaná protokolem HTTP bude možno zakódovat v těchto formátech:

• application/x-www-form-urlencoded (součást URL)
• multipart/form-data (strukturovaná data)
• text/plain (prostý text)

O tom, jaký formát bude užit rozhodují dva atributy: method a enctype. Když budou data odesílána metodou GET, použije se formát application/x-www-form-urlencoded. U metod POST a PUT se přihlíží k atributu enctype; pokud chybí nebo jeho hodnota neodpovídá ani jednomu ze tří uvedených formátů, použije se jeho implicitní hodnota, tedy tradiční application/x-www-form-urlencoded. Metoda DELETE zadané údaje nekóduje a neodesílá.

A jak to bude dál?

Na zdokonalení HTML formulářů se neustále pilně pracuje. Původní návrh Web Forms 2.0 byl v HTML 5 znatelně revidován, například nebyl přijat tzv. opakovací model, který umožňoval klonování částí kódu, takže některé věci, o nichž před lety psal David Majda už neplatí, nebo jsou řešeny trochu jinak. Snad i toto pojednání bude zanedlouho potřeba opravit a doplnit. Optimisticky však můžeme alespoň konstatovat, že druhá generace HTML formulářů získává stále jasnější kontury.

Odkazy a zdroje

• WHATWG – budoucnost webu (2007) – David Majda
• XForms 1.0 – W3C Recommendation
• HTML 5 – forms – W3C Working Draft