Web Forms 2.0

Version: 0.3 ( 04.07.2006 )  © Frank Hammerschmidt  Malleus Javascript Spielereien

Die Zukunft des Web-Formulars hat begonnen!

Web Forms 2.0 befindet sich kurz vor der Fertigstellung.

Sie befaßt sich mit Neuerungen bezüglich der Web-Formulare und wurde unter anderem von Entwicklern von Opera, Mozilla und Safari festgelegt.

"Opera 9" hat bereits einen Großteil dieser Spezifikation implementiert. Wenn Du ihn installiert hat, kannst Du Dir jetzt schon ansehen, was "bald" standardmäßig von allen Browsern unterstützt wird.

Viel Spaß damit!

Inhaltsangabe

 

1. Neue "INPUT"-Types

In "Web Forms 2.0" werden "getypte" "INPUT"-Controls eingeführt, die beim "Abschicken" des Formulars automatisch validiert werden. Gib' doch einfach mal etwas Falsches ein und wundere Dich:
<input type="email" name="myEmail">
<input type="url" name="myUrl">

email: 
url: 
Zur einfacheren Bedienbarkeit werden zahlreiche Eingabehilfen eingeführt:
<input type="datetime" name="myDateTime">
<input type="datetime-local" name="myLocalDateTime">
<input type="date" name="myDate">
<input type="month" name="myMonth">
<input type="week" name="myWeek">
<input type="time" name="myTime">
<input type="number" name="myNumber">

datetime
datetime-local
date
month
week
time
number
<input type="range" name="myRange1" min="0" max="100" step="10" value="50"
           style="height:20px;width:100px">
<input type="range" name="myRange2" min="0" max="100" step="20" value="40" 
           style="height:100px;width:20px">

"Pflichtfehler" können durch das neue Attribute "required" gekennzeichnet werden. Ist eines der Pflichfelder beim "Senden" leer, erfolgt eine entsprechende Meldung und das Verschicken des Formulars wird abgebrochen.
<input type="number" name="myNumber" required="required">

 

2. Wertbereiche

Des Weiteren ist es möglich, Wertbereiche zu definieren: "Min", "Max" und die Schrittweite "step". Der dazugehörige Wert wird dann mit Hilfe der Pfeiltasten entsprechend umgestellt. Wird nun ein Wert "von Hand" eingeben, der nicht in den Wertebereich passt, wird beim Senden der Fehler "rangeOverflow" bzw. "rangeUnderflow" angezeigt. Hierbei ist zu beachten, daß auch ein Fehler in der "Schrittweite" fehlerhaft ist, d.h. wenn als Schrittweite "10" spezifiziert wurde, liefert der Wert "111" einen "stepMismatch" Fehler. In diesem Fall ist der "Working Draft" etwas "schwammig": "Anscheinend" darf der Browser den Wert auf einen gültigen Wert "runden". Im Falle des Opera 9 wird jedoch die Fehlermeldung ausgegeben.
<input type="number" name="myNumber" value="150" min="100" max="200" step="10">
<input type="date" name="myDate" value="2006-07-30" min="2005-01-01" max="2007-12-31" step="5">
<input type="month" name="myMonth" value="2006-06" min="2005-01" max="2007-12" step="2">
<input type="week" name="myWeek" value="2006-W26" min="2005-W01" max="2007-W52" step="4">
               
Man beachte hierbei, daß der Wert "step" für "datetime", "datetime-local" und "time" in Sekunden angegeben wird.
<input type="datetime" name="myDateTime6" value="2006-06-01T12:30Z" 
                                                  min="2005-01-01T00:00Z" max="2007-12-31T23:59Z" step="3600">
                                                  
<input type="datetime-local" name="myLocalDateTime6" value="2006-06-01T17:00" 
                                                  min="2005-01-01T00:00" max="2007-12-31T23:59" step="1800">
                                                  
<input type="time" name="myTime6" value="12:00" min="07:30" max="16:30" step="1800">
           
Eine weitere Möglichkeit, die Eingabe clientseitig zu validieren, besteht durch regulärer Ausdrücke. Im Falle einer nicht passenden Eingabe wird zusätzlich zum "normalen" Fehlertext noch der Wert des "title"-Attributes ( wenn vorhanden ) ausgegeben.
<input type="text" name="myRegExp" pattern="[A-Za-z]+\d+" 
                                                      title="Mehrere Buchstaben, gefolgt von mindestens einer Zahl">
 

3. Neue Controls

In einem "Freitext"-Feld ist es nun möglich, Werte "vorzuschlagen". Zu diesem Zweck wurde das "DATALIST"-Tag eingeführt, das wie eine "SELECT"-Box mehrere "OPTION"-Elemente enthalten kann. Um die Verbindung zwischen "INPUT" und "DATALIST" herzustellen, muß man nur das neue Attribute "list" des "INPUT"-Controls auf die "ID" der "DATALIST" setzen.  
<input type="url" name="location" list="myGames">
<datalist id="myGames">
 <select>
 <option label="Mahjongg" value="http://www.javasscript-spielereien.de/mahjongg.js">
 <option label="Patiencen" value="http://www.javasscript-spielereien.de/solitaire.js">
 <option label="Jokoban" value="http://www.javasscript-spielereien.de/jokoban.js">
 </select>
</datalist>
Das "SELECT" Tag innerhalb der "DATALIST" ist nicht zwingend erforderlich. Man sollte es aber in den Code integrieren, um älteren Browsern, die das "DATALIST"-Element nicht kennen, eine Alternative anbieten zu können.
 

4. Neue Events

Um Daten eines Formulars clientseitig auszuwerten, wurden zwei neue Events eingeführt:
  • onforminput:
    Ein Formularelement feuert ein "onkeypress" Event.

  • onformchange:
    Ein Formularelement feuert ein "onchange" Event
Hierbei ist zu beachten, daß nur "FORM"-Elemente in der Lage sind, diese Events "einzufangen". Aus diesem Grunde wurde wahrscheinlich auch das neue "OUTPUT"-Element eingefügt, das sich wie ein "SPAN" verhält.
x: <input name="x" type="number" value="0">
y: <input name="y" type="number" value="1">
x * y = <output name="xy1" onforminput="value = x.value * y.value">0</output>
x + y = <output name="xy2" onformchange="value = x.value + y.value">1</output>

x:
y:
x * y = 0
x + y = 1
 
 

5. Templates

Bisher mußte man immer schon im Vorfeld angeben, wieviele Datenzeilen ein Benutzer angegeben darf. Dies ist Vergangenheit: Es wurden "Templates" eingeführt, die eine Zeile mit "FORM"-Controls definieren. Beim Aufbau des Formulars werden dann "repeat-start" Zeilen anhand dieses Templates "generiert". Reicht diese Anzahl nicht aus, kann der Benutzer durch Klick auf einen Button vom Typ "add" weitere Zeilen hinzufügen. Auch ist es möglich, einzelne Zeilen zu löschen bzw. innerhalb des Formular nach oben oder unten zu verschieben. Sind die Attribute "repeat-min" und "repeat-max" auch angegeben, wird bei jeder "Add/Delete"-Funktion überprüft, ob die neue Zeilenanzahl innerhalb des Grenzen ist. Wenn nicht, wird die Aktion nicht durchgeführt.
<form name="myForm">
<table border="1">
<thead>
<tr>
<th>Produkt</th>
<th>Menge</th>
<th colspan="3">Aktionen</th>
</tr>
</thead>
<tbody>
<tr id="orderTemplate" repeat="template" repeat-start="3" repeat-min="2" repeat-max="10">
<td><input type="text" name="myProduct[orderTemplate]" value=""></td>
<td><input type="text" name="myQuantity[orderTemplate]" value="1"></td>
<td><button type="remove">Zeile löschen</td>
<td><button type="move-up">Nach Oben</td>
<td><button type="move-down">Nach Unten</td>
</tr>
</tbody>
</table>
<p><button type="add" template="orderTemplate">Neue Zeile hinzufügen</button></p>
<p><button type="submit"></button></p>
</form>
Produkt Menge Aktionen

Der Name eines Controls wird dynamisch angepaßt, d.h. in der ersten Zeile unseres Beispiels würden daher zwei Controls mit Namen "myProduct1" und "myQuantity1" bzw. in der zweiten Zeile "myProduct2" und "myQuantity2" stehen. Die eckige Klammer wird also durch den entsprechenden Index ersetzt. Dieser Index, hier "orderTemplate", muß die "Id" des Templates sein. Um was für ein HTML-Element es sich dabei handelt, ist unwichtig. Es kann jedes beliebige TAG sein!
 
 

6. Formularverarbeitung

"Früher" konnten Formulardaten nur durch eine Seite verarbeitet werden. Dies wurde jetzt verbessert: Die eigentlichen "FORM"-Attribute "action", "method" und "target" können jetzt auch an mehreren "SUBMIT"-Buttons eines Formulars notiert werden. Somit ist es möglich, verschiedene Auswertungsseiten - und methoden aufzurufen:
<form name="myFormC">
<input type="submit" name="submit1" action="file1.php" method="post" target="window1" >
<input type="submit" name="submit2" action="file2.php" method="get" target="window2" >
</FORM>
Eine weitere Neuheit bezüglich Formulare ist das Attribute "form", das nun bei allen Formularelementen angegeben werden kann: Es spezifiziert das Formular, zu dem es "gehört". Es ist also nicht mehr so, daß alle Elemente, die sich innerhalb eines "FORM"-Tags befinden, auch automatisch beim "Submit" bzw. "Reset" dieses Formulars übertragen bzw. resettet werden.

Beachte hierbei, daß mit "form" die "ID" des entsprechenden Formulars und nicht sein Name gemeint ist!

Beispiel: Das "INPUT"-Control mit dem Namen "myD1" gehört zum Formular "myFormE", d.h. nur ein Submit dieses Formulars übermittelt die Daten von "myD1".
Formular D:<form id="myFormD">
<input type="text" name="myD1" form="myFormE"><br>
<input type="text" name="myD2"><br>
<input type="reset" value="reset D">
</form>
Formular E:<form id="myFormE">
<input type="text" name="myE"><br><input type="reset" value="reset E">
</form>

D:


E:

 
 

7. Sonstige Änderungen

<select name="mySelect" size=10 style="width:200px">
 <optgroup label="Deutsche Städte">
  <option>Berlin</option>
  <option disabled>München</option>
  <option>Homburg</option>
 </optgroup>
 <optgroup label="Europäische Städte">
  <option>Paris</option>
  <option>Rom</option>
  <option disabled>London</option>
 </optgroup>
 <optgroup label="Sonstige Städte">
  <option>Moskau</option>
  <option>Kairo</option>
  <option>Sydney</option>
 </optgroup>

Es besteht nun die Möglichkeit, einzelne "OPTION"-Elemente eines "SELECT"-Controls zu "disablen":

 
<fieldset disabled>
<select name="mySelect">
<option>1</option>
<option>2</option>
</select>
<input type="checkbox" name="myCheckBox" checked>
<input type="text" name="myText" value="ÄNDERE MICH!">
</fieldset>

Des Weiteren werden durch "disablen" eines "FIELDSET"s alle darin enthaltene Controls deaktiviert:


Klick' mich:
 


<input type="text" name="myText" autofocus="autofocus">



Bisher war es nur durch Javascript möglich, ein "INPUT"-Control nach dem Laden der Seite zu "fokussieren". Damit das ganze nun einfacher geht, wurde ein neues Attribute "autofocus" eingeführt.
 

<input type="text" name="myText" autocomplete="off">



Will man die "Autocomplete"-Funktionalität eines Controls deaktivieren, muß man nur das "entsprechende" Attribut auf "off" setzen.
"on" schaltet es wieder ein.
 
 

8. Scripting

"FORM"-Elemente werden beim "Submit" nur dann validiert, wenn folgende Kritierien erfüllt sind:
  • Das Control gehört zu einem Formular, d.h. "object.form != null"

  • Das Control hat ein "name" Attribut.

  • Das Control ist nicht disabled.

  • Das Control gehört nicht zu einem Template, d.h. es ist kein Kind eines HTML-Elementes mit "repeat='template'".

    Achtung: Die vom Template "generierten" Controls zählen hier natürlich nicht darunter.

  • Das Control ist kein Kind eines "DATALIST"-Tags, da diese Elemente ja nur angezeigt werden, wenn "DATALIST" vom Browser nicht unterstützt wird.

  • Das Control ist kein Button vom Typ "reset", "add", "remove", "move-up" bzw. "move-down".

  • Das Control ist kein "OUTPUT" Element.

Das dazugehörige Property des Formelementes willValidate wird dementsprechend auf "true" oder "false" gesetzt.

Das Ergebnis der Validierung wird in einem Attribut validity des Controls gespeichert. Dieses "Objekt" hat dabei die folgende Ausprägungen bzw. Fehlercodes:

  • typeMismatch

    Der eingebene Wert "paßt" nicht zum Typ, d.h. die Eingabe eines Textes in ein "number"-Feld.

  • rangeUnderflow

    Ein Minimalwert "min" wurde angegeben und vom Benutzer "unterschritten".

  • rangeOverflow

    Ein Maximalwert "max" wurde angegeben und vom Benutzer "überschritten".

  • stepMismatch

    Eine Schrittweite "step" wurde angegeben und der eingegebene Wert "paßt" nicht, d.h. "step = 5" und "value = 6"

  • tooLong

    Der eingegebene Text ist länger als in "maxlength" zugelassen.

  • patternMismatch

    Der eingegebene Text "matched" nicht mit dem spezifizierten regulären Ausdruck, d.h. "a3bcde" paßt nicht zu "[a-z]+"

  • valueMissing

    Ein Pflichtfeld wurde nicht angebenen.

  • customError

    Der Wert wurde "von Hand" mit Hilfe der Control-Methode setCustomValiditiy("myErrorMessage") als "invalid" gekennzeichnet. Beim Submit wird folgende Meldung ausgegeben:

    "Dieser Wert wird von einem Script dieser Seite nicht zugelassen!
    myErrorMessage

    Dieser Error kann nicht durch Eingabe eines neuen Wertes bzw. Reset des Formulars gelöscht werden! Man muß explicit die Methode "setCustomValiditiy" mit einem Leerstring als Parameter aufrufen!

  • valid

    Wenn kein anderes oben aufgeführtes Flag gesetzt ist, ist dieses Flag "true", d.h. der Wert ist "gültig" und kann übertragen werden.



Wird der "Submit"-Button gedrückt, werden alle zur Form gehörenden Elemente mit gesetzten "willValidate" Property gesucht und validiert. Ist ein Wert nicht valide, wird ein oninvalid Event gefeuert, das vom betreffenden Control abgefangen werden kann. Liefert dessen Eventhandler "false" zurück, wird die "Default"-Fehlermeldung des Browsers unterdrückt.

Beispiel:

function initPage()
{
document.myForm.myText2. // Zeilenumbruch!
setCustomValidity( "aua" );
};

function checkErrorCodes(obj)
{
with (obj.validity)
{
if ( valueMissing )
	alert( "valueMissing" );

if ( rangeUnderflow )
	alert( "rangeUnderflow" );
	
if ( rangeOverflow )
	alert( "rangeOverflow" );
	
if ( stepMismatch )
	alert( "stepMismatch" );
	
if ( patternMismatch )
	alert( "patternMismatch" );
	
if ( customError )
	alert( "customError" );

if ( typeMismatch )
	alert("typeMismatch");
	
if ( tooLong )
	alert( "tooLong" );
		
};
return true;
//return false unterdrückt Fehlermeldung!
}

function clearError()
{
document.myFormH.myText2.setCustomValidity("");
}

 
<body onload="initPage()">
<form name="myForm">
<input type="number" name="myNumber" 
	oninvalid="return checkErrorCodes(this)"
	min="10" max="20" step="5">
<input type="text" name="myText" 
	pattern="[a-z]+" 
	oninvalid="return checkErrorCodes(this)">
	
<input type="text" name="myText2" 
	oninvalid="return checkErrorCodes(this)">

<input type="button" value="lösche customError" 
	onclick="clearError()">
<input type="submit"/>
</form>
</body>
10 < x < 2 0 ( step = 5 )
Nur kleine Buchstaben:
"Nie gültig":
 

9. CSS

Der "Zustand" einzelner Controls kann nun durch neue "CSS3" Pseudo-Selektoren "gestylt" werden:
  • :disabled

    Controls bzw. "OPTIONS" oder "OPTIONGROUPS", die "disabled" sind

  • :enabled

    Formelemente, die nicht disabled sind

  • :read-only

    Controls mit gesetzten "readonly"-Attribut

  • :read-write

    Controls, die nicht readonly sind

  • :checked

    Markierte "Check / Radio"-Boxen bzw "SELECT"-Boxen mit ausgewählter "OPTION"

  • :indeterminate

    Eine Gruppe von "radio"-Buttons von denen noch keiner ausgewählt wurde

  • :default

    • der gerade "focusierte" Button
    • "Check / Radio"-Boxen, die initial "gechecked" wurden
    • der "OPTION"-Eintrag einer Selectbox, der voreingestellt war.

  • :valid

    Controls mit "gültigem" Wert

  • :invalid

    Controls mit "fehlerhaftem" Wert

  • :in-range

    Controls mit einem Wert der in einem spezifizierten Bereich liegt

  • :out-of-range

    Controls mit einem nicht gültigen Bereichswert

  • :required

    Controls, die "ausgefüllt" werden müssen

  • :optional

    Controls, die keine Pflichtfelder sind

<style>
:enabled { 
	background-color : green; 
	color : white; 
	font-weight : bold
}
:disabled {
	background-color : red;
}
:checked { 
	color : yellow; 
	background-color : yellow
}
:in-range { 
	color : green; 
	font-weight : bold
}
:out-of-range {
	color : red
}
:required { 
	border : solid 4px red;
}
:indeterminate {
	background-color : blue
}
</style>
<input type="text" disabled value="disabled">
<input type="text"">
<input type="text" required="required" value="Pflichtfeld">

<input type="number" min="10" max="20" step="5" value="15">
<input type="number" min="10" max="20" step="5" value="5">
<input type="number" min="10" max="20" step="5" value="25">
<input type="number" min="10" max="20" step="5" value="6">

<input type="radio" name="myRadios" value="a">
<input type="radio" name="myRadios" value="b">
<input type="radio" name="myRadios" value="c">
  



A: B: C:

Zum Abschluß noch etwas zum Thema "Unerwünschte Attribute": Das "INPUT"-Attribut "size" sollte man von nun an nicht mehr verwenden. Den gleichen Effekt kann man auch durch den css-Style "width" erzielen.
 

10. Opera 9 Bugs

  • type: email | url

    Das Icon links erscheint nur, wenn man eine Hintergrundfarbe für das "INPUT"-Control angibt.

  • type: number

    Bei einer falschen Eingabe wird kein "Typemismatch" gemeldet! Man muß das Feld als "required" kennzeichnen um eine entsprechende Fehlermeldung zu bekommen.

  • Die beiden Pseudo-Selektoren :checked und :default funktionieren nicht bei einer "SELECT"-Box.

  • Die Kombination range-Control und DATALIST funktioniert nicht.

  • Ein "File"-Control meldet keinen "Typemismatch"-Fehler wenn eine nicht zum "accept"-Attribut passende Datei ausgewählt wurde.

  • Javascript: Der "repetitionindex" eines generierten Templates ist immer "0".

3 Kommentare
#3 Stephan schrieb am 29.09.2010 12:12

In Punkt 4. (Neue Events) ist mal wieder ein deutlicher Nachteil von dynamisch getypten Sprachen sichtbar: (x.value * y.value) wird korrekt berechnet, bei (x.value + y.value) werden die Strings konkateniert. Und das, obwohl für x und y "number" als type angegeben ist. Ich verwende Opera 10.62.

#2 Mike schrieb am 11.02.2010 11:14

1. Neue "INPUT"-Types

 

Ich wundere mich, dass gar nichts validiert wird wenn ich was falsches eingebe!?!?!

#1 noname schrieb am 13.02.2008 00:00

www.bgroom.net:http://www.bgroom.net

www.bgroom.info:http://www.bgroom.info

bgroom.net:http://bgroom.net

bgroom.info:http://bgroom.info

Auf Beitrag #3 antworten

smile zwinker Big Grins Confused Cool Cry Eek Evil Frown Mad Mr. Green Neutral Razz Redface Rolleyes Sad Surprised

Typo3