Web Forms 2.0

Jens O. Meiert, 17. November 2006 / 26. Oktober 2008.

Dieser Vortrag diente der Weiterbildung bei Aperto.

Vorträge werden inhaltlich nicht aktualisiert. Der vorliegende Vortrag ist entsprechend stellenweise veraltet; beachten Sie in diesem Zusammenhang, dass Web Forms nicht mehr in eigenständiger Form existiert, sondern Teil von HTML 5 geworden ist.

Zusammenfassung

Web Forms 2.0 …

erweitert das HTML-Formularmodul (»Web Forms 1.0«), und
erweitert HTML (HTML 5) durch zum Beispiel neue input-Elemente und -Attribute,
gilt für HTML- und XHTML-User-Agents, aber
entspricht nicht XForms.

Geschichte

Web Forms 2.0 wurde …

2003 als »XForms Basic«-XHTML-Modul von Ian Hickson vorgeschlagen,
2004 in »Web Forms« umbenannt,
2004 von der WHATWG als Web Forms 2.0 übernommen, und
2006 nach Ankündigung vom W3C übernommen, weiterhin als Web Forms 2.0.

Designprinzipien

Kurz und knapp:

Abwärtskompatibilität (wo möglich);
leicht zu erstellen (für Autoren, die mit XML und Co. nicht so vertraut sind);
einfache Dateneingabe (durch neue Bedienelemente);
dynamische Ergänzung von Feldern (ohne Scripting).

Web Forms und XForms

Web Forms »zielt weder darauf ab, XForms 1.0 zu ersetzen, noch stellt es eine Untermenge von XForms 1.0 dar«.

XForms: »~~[…]~~ ist gut geeignet, um Geschäftslogik und Datenrestriktionen zu beschreiben.«
Web Forms: »~~[…]~~ beabsichtigt, die Aufgabe zu vereinfachen, XForms-1.0-Systeme in Dokumente zu transformieren, die in HTML-Browsern, die XForms nicht unterstützen, gerendert werden können.«

Neuerungen und Erweiterungen

`form`

Das form-Element (unter anderem) darf leer bleiben (und über keine action verfügen),
darf auch andere form-Elemente beinhalten,
form lernt ein replace-Attribut mit den Werten document (Standard) und values (zwecks Ausfüllung) kennen,
deckt neue URI-Schemata ab (für action), wie mailto: und data:, und

gestattet assoziierten Elementen, außerhalb des Formulars zu stehen:

<form id="edit1" action="/edit" method="post">
  <fieldset>
    <input type="hidden" name="id" value="1">
    <input type="text" name="name" value="">
  </fieldset>
</form>
<input form="edit1" type="text" name="value">
<input form="edit1" type="submit" name="bearbeiten">

`textarea`

textarea muss keine rows- und cols-Attribute mehr umfassen, diese werden durch User-Agent-Standards und CSS abgedeckt.
Internet Explorers wrap-Attribut wurde in die Spezifikation aufgenommen und darf mit den Werten soft und hard verwendet werden.

`input`

HTML kennt die Werte text, password, checkbox, radio, submit, reset, file, hidden, image und button für das type-Attribut des input-Elements.

Web Forms 2.0 führt gegenwärtig 14 neue Typen ein:

add (Button);
remove (Button);
move-up (Button);
move-down (Button);
datetime;
datetime-local;
date;
month;
week;
time;
number;
range;
email;
url.

Nebenbei: Buttons dürfen zudem mit mehreren Formularen verknüpft werden.

`output`

Das output- verhält sich ähnlich einem span-Element, außer dass es als Formularelement für DOM-Zwecke betrachtet wird.

<form>
  <fieldset>
    <input name="a" type="number" step="any" value="0"> *
    <input name="b" type="number" step="any" value="0"> =
    <output name="result" onforminput="value = a.value * b.value">0</output>
  </fieldset>
</form>

Attribute

required

… markiert Elemente als erforderlich:

<input type="number" required="required" name="menge">

pattern

… spezifiziert einen Ausdruck, dem der Kontrollwert entsprechen muss:

<label>Kreditkartennummer: <input type="text" pattern="[0-9]{13-16}" name="kk"></label>

autocomplete

… ist auf die text-, password-, datums- und zeitbezogenen, numerischen, email- und url-Eingabetypen anwendbar und akzeptiert zwei Werte, on (Standard) und off:

<label>Konto: <input type="text" name="konto" autocomplete="off"></label>

autofocus

Jedes Formularbedienelement (außer Eingabeelementen vom Typ hidden sowie dem output-Element) kann über ein autofocus-Attribut verfügen, das für Fokus auf das entsprechende Element sorgt.

step

… bestimmt die Genauigkeit bei numerischen sowie datums- und zeitbezogenen Eingabetypen.

min

… bestimmt den (einschließlichen) Mindestwert eines Feldes in dem Format, wie es für den entsprechenden Typ spezifiziert wird.

max

… bestimmt den (einschließlichen) Höchstwert eines Feldes in dem Format, wie es für den entsprechenden Typ spezifiziert wird.

Kontrollelement, das nur die Auswahl eines beliebigen Sonntags ab dem Jahr 1900 zulässt:

<input type="date" min="1900-01-07" step="7" name="sonntag">

Datenlisten

Das datalist-Element bietet, ja, Datenlisten, wobei das
list-Attribut verwendet werden kann, um auf diese Daten zuzugreifen (im Zusammenhang mit den text-, email-, url-, numerischen, datums- und zeitbezogenen Typen des input-Elements).

Es gibt verschiedene Anwendungsfälle für Datenlisten, zum Beispiel in Form von Slidern, obwohl die Spezifikation »keine bestimmte Darstellung bevorzugt«.

Abbildung: Ein Slider.

<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
  <option value="-30">
  <option value="0">
  <option value="30">
  <option value="+50">
</datalist>

Wiederholungsmodell (Repetition Model)

Web Forms 2.0 führt ein normalerweise von Skripten abhängiges, vorlagenbasiertes Wiederholungsmodell ein:

<form>
  <table>
    <tr>
      <th scope="col">Produkt</th>
      <th scope="col">Anzahl</th>
    </tr>
    <tr id="order" repeat="template" repeat-start="3">
      <td><input type="text" name="row[order].product" value=""></td>
      <td><input type="text" name="row[order].quantity" value="1"></td>
    </tr>
  </table>
  <button type="submit">absenden</button>
</form>

Um weitere Zeilen hinzuzufügen, muss man lediglich folgenden Button hinzufügen:

<button type="add" template="order">Neue Zeile</button>

Das Entfernen bestimmter Zeilen kann durch das Einfügen von folgendem Code ermöglicht werden:

<td><button type="remove">Zeile entfernen</button></td>

Das Wiederholungsmodell sieht durch die Eingabetypen beziehungsweise Buttons move-up und move-down zudem vor, Elemente nach oben und unten zu verschieben.

Verschiedenes

Andere Erweiterungen:

Die Dateieingabe (Upload) darf via accept-Attribut spezifische MIME-Typen festlegen, wie in <input type="file" name="avatar" accept="image/*">;
Das disabled-Attribut ist auf alle Formularbedienelemente außer output anwendbar – in HTML 4 war es beim fieldset-Element unzulässig.

Allgemeine Neuerungen, die nicht Bestandteil dieser Präsentation, aber dennoch zu vermerken sind:

Web Forms 2.0 umfasst Erweiterungen der HTML-Level-2-DOM-Schnittstelle, sowie
präzisere »Ereignis«- und Fehler-Behandlung.

Und es gibt noch mehr, wie auch immer.

Implementierungen

Bestehende, aber derzeit allesamt unvollständige Implementierungen von Web Forms 2.0:

Trident (Internet Explorer) – eher per »Zufall« und in minimaler Form durch Einführung ehemals proprietären Zeugs wie autocomplete,
Gecko (Firefox, Mozilla, …),
Presto (Opera) und
WF2-SourceForge-Projekt.

Ausblick

Web Forms wird Bestandteil von HTML 5 und damit dem »neuen« HTML. Da HTML 5 noch nicht fertiggestellt wurde, sind Änderungen auch in bezug auf Formulare möglich und sogar wahrscheinlich.

Jens Meiert