Web Forms 2.0 (Aperto, Berlin)

Vortrag vom 17. November 2006 (↻ 26. Oktober 2008), exklusiv für Aperto, Berlin. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).

Inhalt

1. Zusammenfassung
2. Geschichte
3. Designprinzipien
4. Web Forms und XForms
5. Neuerungen und Erweiterungen
   1. form
   2. textarea
   3. input
   4. output
   5. Attribute
   6. Datenlisten
   7. Wiederholungsmodell (»Repetition Model«)
   8. Verschiedenes
6. Implementierungen
7. Ausblick

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 name="name" value="">
    </fieldset>
  </form>
  <input form="edit1" 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 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 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«.

<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 name="row[order].product" value=""></td>
      <td><input 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 bzw. 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.

Über mich

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Bitte sei kritisch, interpretiere wohlwollend und gib Feedback.)