Web Forms 2.0 (preview)

De informatie in dit artikel is mogelijk verouderd.

Om de inhoud van de oprukkende (X)HTML5 specificatie wat duidelijker en praktischer te bekijken een overzichtje van een onderdeel uit het Web Applications 1.0 ontwerp: Web Forms 2.0.

Web Forms 2.0 is een uitbreiding van de huidige HTML 4 Forms ontwikkeld door het WHATWG. De HTML 4 Forms spec dateert ondertussen al van 1998 het werd tijd dat er enkele veel gevraagde wijzigingen werden doorgevoerd. Aangezien het W3C meer bezig was met XHTML 2 en XForms is het WHATWG dan maar zelf begonnen om HTML uit te breiden onder de naam Web Applications 1.0 (tegenwoordig vaak genoemd als (X)HTML5) en Web Forms 2.0. Ondertussen heeft Tim Berners Lee (baas van het W3C) beslist om het werk van de WHATWG verder te zetten.

WF2 heeft niks te maken XForms. XForms is een module die in XHTML 2 zal komen - als die er ooit komt - en anderzijds gebruikt kan worden in eender welke XML applicatie. Het voordeel van WF2 t.o.v. XForms is dat ze backwards compatibel is. Oudere browsers zullen niet ondersteunde controls gewoon als input met type="text" weergeven. Gebruikers invoer zal nog steeds mogelijk zijn weliswaar ongecontroleerd op de client-side (er zijn ook enkele javascript oplossingen, zie onderaan artikel). Je kan trouwens nooit op de client side rekenen voor valide invoer. Je kan dus best altijd op server side (bv: met PHP) checken. XForms zijn op dit vlak beter omdat de specificatie dieper geworteld zit, ook op server kant.

WF2 brengt enkele nieuwe mogelijkheden die het leven van web ontwikkelaars makkelijker zullen maken. Zo zijn er voor de input-tag enkele nieuwe types bijgekomen. Momenteel is er enkel <input type="text" /> mogelijk om gebruikersinvoer in te geven. Dit is een tekstveld waar weinig voorwaarden bij opgelegd kunnen worden. Met Javascript kan je wel maken dat de gebruiker - als hij javascript niet uitgeschakeld heeft - geen verkeerde invoer kan laten doorvoeren.

De nieuwe types voor <input>

datetime
Herbergt een datum en tijd in GMT
datetime-local
Herbergt een datum en tijd in lokale tijdszone.
date
Herbergt een datum.
month
Maand
week
Jaar + weeknummer
time
Tijd
number
Numerieke waardes
range
Net als het type number maar kan voorgesteld worden door een slider.
email
E-mail adresen
url
Herbergt een URi

Alle datums en tijden moeten conform zijn met ISO 8601.

Nieuwe attributen

min, max
Om een range op te leggen zijn deze attributen in het leven geroepen.
step
Stapgrootte bepalen.
pattern
Validatie met reguliere expressie (zoals ze in Javascript werken)
required
Bij validatie moet een veld met dit attribuut ingevuld zijn.
form
Om form controls en fieldsets toe te wijzen aan een form-tag kan het form attribuut gebruikt worden. Je kan een control aan meerdere forms toewijzen met het id van de form(s). (Bekijk het voorbeeld voor meer duidelijkheid)
autocomplete
Verplicht de user agent of browser om de gebruiker zelf het veld in te laten voeren (bv: Blokkeer paswoord managers). Waardes zijn on en off
autofocus
Zet de focus aan de control.
inputmode
Enkel voor tekstvelden. Attribuut is vergenomen van het XForms spec.
list
Je kan een gebruiker laten kiezen uit een lijst. Een lijst maak je met <datalist> (zie verder). Dit lijkt op het een <select> met verschil dat de gebruiker iets kan ingeven wat niet in de lijst staat.
wrap
Attribuut voor <textarea> met waarde soft of hard. Dient om aan te duiden of enters zachte of harde enters zijn.

De attributen accesskey, disabled, maxlength, name, readonly ondergingen enkele wijzigingen.

Nieuwe tags

output
Gedraagt zich als een <span> maar moet gebruikt worden voor feedback op form controls. Het bevat net als <label> het for-attribuut
datalist
Een lijst maak je met <datalist> met een lijst van <option>s. Dit lijkt op het een <select> met verschil dat de gebruiker zelf iets kan ingeven wat niet in de lijst staat. Om een ijst toe te wijzen aan een control moet je aan de control een list-attribuut meegeven met waarde het id van de datalist

Dit is maar een schets van wat er nieuw is en ze is onvolledig. Er zijn meer voorwaarden in het gebruik van de nieuwe attributen en. Er zijn ook wat wijzigingen aan het DOM aangebracht en CSS kreeg o.a. enkele nieuwe selectors. Daarvoor verwijs ik je naar de Web Forms 2.0 specificatie. Tevens kan dit allemaal nog enorm veranderen omdat de spec nog geen final recommendation is. Verwacht wordt dat dit ergens in 2008 wel zo zal zijn en dan moet men nog afwachten tot het voldoende geïmplementeerd is door browser makers

Wordt je net als ik epileptisch bij het zien van veel tekst en heb je meer aan een voorbeeld verwijs ik je graag naar een Web Forms 2.0 demo. Dit werkt enkel in Opera 9 (omdat deze al gedeeltelijke ondersteuning heeft voor WF2) en IE6 (d.m.v. Javascript, wat tevens goed nieuws is omdat Microsoft het misschien toch pas met Sint-Juttemis implementeert).

Gepost: 21 januari 2007 17u46 | 1 reacties