Web Forms 2.0 (Aperto, Berlin)

Vortrag vom 17. November 2006 (↻ 26. Oktober 2008), exklusiv für Aperto, Berlin. Schwerpunkt: (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 …

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 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

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 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:

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.

War dies nützlich oder interessant? Teile diesen Beitrag, oder lad mich vielleicht auf einen Kaffee ein. Danke!

Ăśber mich

Jens Oliver Meiert, am 30. September 2021.

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 W3C und WHATWG verbunden 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 Ansichten und Erfahrungen.

Wenn du mir einen Gefallen tun magst, interpretiere wohlwollend (ich spreche drei Sprachen, und die kommen sich manchmal in die Quere), aber hinterfrage meine Arbeit und teile Feedback, damit ich lernen und Inhalte verbessern kann. Danke!