Jens Meiert

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.

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

Geschichte

Web Forms 2.0 wurde …

Designprinzipien

Kurz und knapp:

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

textarea

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:

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

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

Slider.

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:

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

Und es gibt noch mehr, wie auch immer.

Implementierungen

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

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.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Fehler entdeckt? Belohnung! E-Mail an jens@meiert.com.

Sie sind hier: meiert.comPublikationenWeb Forms 2.0

Stand: 26. Oktober 2008.