17.2 Formularelemente
HTML5 beinhaltet zahlreiche Formularelemente. Sie ermöglichen vielfältige und leicht bedienbare Eingaben, die darüber hinaus auch eine Validierung enthalten.
Falls ein einzelner Browser ein bestimmtes Eingabefeld aus HTML5 nicht umsetzt, wird stattdessen ein Standardeingabefeld angezeigt. So wird dem Benutzer in jedem Fall eine Eingabe ermöglicht. Besonders die mobilen Browser nutzen viele Eigenschaften von HTML5 und unterstützen sie durch das Einblenden passender Tastaturen.
17.2.1 Elemente für Text und Farbe
In einem ersten Formular werden Elemente zur Eingabe von verschiedenen Typen von Text, z. B. E-Mail-Adressen und URLs, vorgestellt. Zudem wird gezeigt, wie der Benutzer eine Farbe auswählen kann. In Abhängigkeit des Texttyps sind unterschiedliche Eingaben erforderlich, siehe Abbildung 17.1 und Abbildung 17.2.
Abbildung 17.1 Allgemeine Formularelemente, erster Teil
Abbildung 17.2 Allgemeine Formularelemente, zweiter Teil
Zunächst der Code für den ersten Teil des Formulars:
...
<body>
<p>Es folgt ein Formular mit <mark>neuen Elementen</mark>.</p>
<form id="idForm">
<p><input id="idVorname" placeholder="Ihr Vorname">
placeholder (Vorname)</p>
<p><input id="idNachname" autofocus> autofocus (Nachname)</p>
<p><input id="idPlz" value="12345" required> required (PLZ)</p>
<p><input id="idOrt" list="idOrtliste"> datalist (Ort)</p>
<datalist id="idOrtliste">
<option value="Berlin">
<option value="Hamburg">
<option value="München">
</datalist>
<p><input id="idLand" type="search" list="idLandliste">
search, datalist (Land)</p>
<datalist id="idLandliste">
<option value="Deutschland">
<option value="Frankreich">
<option value="Italien">
</datalist>
...
Listing 17.1 Datei »h5_form.htm«, erster Teil des Formulars
Wir starten mit einer Ausnahme: dem mark-Container von HTML5. Dabei handelt es sich nicht um ein Formularelement. Er ermöglicht die optische Hervorhebung eines Textes, z. B. mit einer unregelmäßigen gelben Markierung ähnlich der eines Textmarkers.
Im Element für den Vornamen erscheint mithilfe des Attributs placeholder ein Platzhalter in hellgrauer Farbe. Er dient zur Erläuterung eines Eingabefelds. Sobald der Benutzer mit seiner Eingabe beginnt, verschwindet der Platzhalter. Sein Wert wird nicht zum Webserver übertragen.
Nach Aufruf der Datei kann der Benutzer unmittelbar im Element für den Nachnamen mit der Eingabe beginnen, denn dort erscheint der Cursor dank des Attributs autofocus automatisch als Erstes. Falls Sie das Attribut bei mehreren Elementen eintragen, dann erscheint der Cursor im letzten dieser Elemente. Sollte ein Element bereits einen Wert haben, wird der eingetragene Text markiert.
Das Attribut required macht das Element für die Postleitzahl zu einem Pflichtfeld. Das Absenden des Formulars ohne einen Eintrag in diesem Feld ist nicht möglich und führt zu einer Fehlermeldung, siehe Abbildung 17.3.
Abbildung 17.3 Pflichtfeld, Attribut »required«
In den beiden Elementen für Ort und Land wird jeweils ein datalist-Container genutzt. Er enthält eine Hilfsliste mit möglichen Einträgen für das Element. Die einzelnen Listeneinträge werden mit der Markierung option erzeugt. Die Hilfsliste funktioniert nur mit dem Attribut value. Der HTML-Validator akzeptiert stattdessen allerdings nur das Attribut label. Der Zusammenhang zwischen dem Element und der zugehörigen Liste wird mit dem Attribut list und der ID erstellt.
In manchen Browsern erscheint die Liste sofort, nachdem der Benutzer den Cursor in das Element setzt, bei manchen erst nach einem weiteren Klick, siehe Abbildung 17.4. Nach der Eingabe von Zeichen sind nur noch die Einträge sichtbar, in denen diese Zeichen vorkommen. Es können aber auch andere Einträge vorgenommen werden. Das Element mit dem Wert search für das Attribut type wird häufig wie ein betriebssystemspezifisches Suchfeld dargestellt.
Abbildung 17.4 Hilfestellung durch »datalist«-Container
Es folgt der Code für den zweiten Teil des Formulars:
...
<p><input id="idColor" type="color" value="#ff0000"> color</p>
<p><input id="idEmail" type="email" value="a@b.de"> email</p>
<p><input id="idUrl" type="url" value="http://www.c.de"> url</p>
<p><input id="idTel" type="tel" value="0123-456789"> tel</p>
<p><input id="idKfz" value="HST-PU 4215"
pattern="^[A-Z]{1,3}-[A-Z]{1,2} [1-9][0-9]{0,3}$">
pattern (Kfz-Kennzeichen)</p>
<p><input type="submit"> <input type="reset"></p>
</form>
<script>
document.getElementById("idForm")
.addEventListener("submit", senden);
</script>
</body></html>
Listing 17.2 Datei »h5_form.htm«, zweiter Teil des Formulars
Sobald der Benutzer das Element zur Eingabe der Farbe auswählt, wird dank des Werts color für das Attribut type eine betriebssystemspezifische Farbtafel eingeblendet, siehe Abbildung 17.5. Der übermittelte Wert besteht aus dem HTML-Farbcode, also z. B. #ff0000 für Rot. Der HTML-Validator warnt bei diesem Element, weil es noch nicht von jedem Browser umgesetzt wird.
Abbildung 17.5 Farbe auswählen
In Abbildung 17.6 sehen Sie das Element zur Eingabe und Validierung einer E-Mail-Adresse. Mobile Browser können dazu eine passende Tastatur einblenden. Falls Sie eine Adresse eintragen, muss sie das Zeichen @ enthalten.
Abbildung 17.6 E-Mail-Adresse eintragen
Falls Sie in dem Element zur Eingabe einer URL eine Adresse eintragen, muss sie mit mindestens einem Buchstaben beginnen, gefolgt von den Zeichen ://. Mobile Browser können z. B. die Zeichen / oder die Zeichenfolge .com in der eingeblendeten Tastatur bereithalten.
Das Element zur Eingabe einer Telefonnummer kann die Möglichkeit bieten, auf Telefonlisten des Benutzers zuzugreifen.
Das Attribut pattern (deutsch: Muster) dient zur Validierung einer Eingabe mithilfe von regulären Ausdrücken, siehe Abschnitt 6.2.5. Das Absenden des Formulars ist nicht möglich, falls ein Eintrag erfolgt, der nicht zum Muster passt, siehe Abbildung 17.7.
Abbildung 17.7 Validierung mit Attribut »pattern«
Nach dem Absenden werden die eingetragenen Werte mithilfe von JavaScript angezeigt. Ein Beispiel sehen Sie in Abbildung 17.8.
Abbildung 17.8 Ausgabe der Einträge mit JavaScript
Es folgt der JavaScript-Code:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Allgemeine Elemente</title>
<script>
function senden()
{
var aus =
"vorname: " + document.getElementById("idVorname").value
+ "\nnachname: "
+ document.getElementById("idNachname").value
+ "\nplz: " + document.getElementById("idPlz").value
+ "\nort: " + document.getElementById("idOrt").value
+ "\nland: " + document.getElementById("idLand").value
+ "\ncolor: " + document.getElementById("idColor").value
+ "\nemail: " + document.getElementById("idEmail").value
+ "\nurl: " + document.getElementById("idUrl").value
+ "\ntel: " + document.getElementById("idTel").value
+ "\nkfz: " + document.getElementById("idKfz").value;
alert(aus);
}
</script>
</head>
...
Listing 17.3 Datei »h5_form.htm«, JavaScript-Code
Falls ein Browser ein bestimmtes Formularelement aus HTML5 nicht umsetzt, wird stattdessen ein Standardeingabefeld angezeigt. In jedem Fall kann in JavaScript jeweils der Wert der Eigenschaft value ausgegeben werden.
17.2.2 Elemente für Zahlen
In diesem Abschnitt zeige ich einige Elemente, die zur sicheren Eingabe und zur anschaulichen Darstellung von Zahlenwerten geeignet sind, siehe Abbildung 17.9.
Abbildung 17.9 Elemente für Zahlen
Es folgt zunächst der Inhalt des Formulars im mittleren Teil der Datei:
...
<body>
<form id="idForm">
<p><input id="idNumber" type="number"
min="32" max="58" step="2" value="42">
<input id="idPlus1" type="button" value="+1">
<input id="idMinus1" type="button" value="-1">
<input id="idPlus3" type="button" value="+3">
<input id="idMinus3" type="button" value="-3"> number
<input id="idRequired" type="checkbox"> Eingabe erforderlich</p>
<p><input id="idRange" type="range"
min="3.2" max="5.8" step="0.2" value="4.2">
range <span id="idRangeWert">(4.2)</span></p>
<p><input type="submit"></p>
<p><progress id="idProgress" max="100" value="10"></progress>
<input id="idProgressStart" type="button" value="Start">
progress <span id="idProgressWert">(10%)</span></p>
</form>
...
Listing 17.4 Datei »h5_zahl.htm«, mittlerer Teil
Das Element zur Eingabe eines Zahlenwerts hat den Wert number für das Attribut type. Dies bewirkt die Anzeige eines normalen Eingabefelds und einer zusätzlichen Up-Down-Schaltfläche zur Änderung der Zahl per Klick. Zur Einstellung des Elements können Sie Werte für die Attribute min, max, step und value angeben. Diese kennzeichnen die Untergrenze, die Obergrenze, die Schrittweite und den angezeigten Wert. Ein Wert, der nicht innerhalb der Grenzen liegt oder nicht zur Schrittweite passt, wird nicht gesendet. Es erfolgt eine Fehlermeldung, siehe Abbildung 17.10.
Abbildung 17.10 Nicht zulässige Zahl
Sie können den Wert auch per Code einstellen. Die vier Schaltflächen +1, –1, +3 und –3 ändern den Wert um das entsprechende Vielfache der Schrittweite. Die Schaltfläche +3 ändert also z. B. den Wert von 42 in 48. Auch das Attribut required kann per Code geändert werden. Falls Sie die CheckBox neben den vier Schaltflächen markieren, dann darf das Zahlenfeld nicht mehr leer gelassen werden.
Ein Element zur sicheren Übermittlung eines Zahlenwerts mithilfe eines Sliders hat den Wert range für das Attribut type. Der Wert selbst wird nicht angezeigt, daher wird hier eine separate Anzeige hinzugefügt. Zur Einstellung gibt es außerdem die Attribute min, max, step und value. Es können auch Zahlen mit Nachkommastellen per Slider eingestellt werden.
Der progress-Container dient meist zur Anzeige eines prozentualen Fortschritts. Die Attribute min und max haben die Standardwerte 0 und 1. Hier wird als aktueller Wert 10 und als Wert für das Maximum 100 genommen. Mithilfe der Schaltfläche Start wird eine JavaScript-Funktion gestartet, die den Fortschrittsbalken animiert.
Es folgt der zweite Teil des Dokuments:
...
<table>
<tr><td>Umsatz 2015:</td><td><meter min="0" max="10000"
value="4500"></meter> 4.500 €</td></tr>
<tr><td>Umsatz 2016:</td><td><meter min="0" max="10000"
value="7500"></meter> 7.500 €</td></tr>
<tr><td>Umsatz 2017:</td><td><meter min="0" max="10000"
value="6000"></meter> 6.000 €</td></tr>
</table>
<script>
var num = document.getElementById("idNumber");
document.getElementById("idForm").addEventListener
("submit", senden);
document.getElementById("idRequired").addEventListener
("click", function() { num.required = !num.required; } );
document.getElementById("idPlus1").addEventListener
("click", function() { num.stepUp(); } );
document.getElementById("idMinus1").addEventListener
("click", function() { num.stepDown(); } );
document.getElementById("idPlus3").addEventListener
("click", function() { num.stepUp(3); } );
document.getElementById("idMinus3").addEventListener
("click", function() { num.stepDown(3); } );
document.getElementById("idRange").addEventListener
("change", aendernRange);
document.getElementById("idProgressStart").addEventListener
("click", aendernProgress);
</script>
</body></html>
Listing 17.5 Datei »h5_zahl.htm«, unterer Teil
Ein meter-Container dient eigentlich zur Anzeige eines Füllungsgrades. Hier werden mithilfe der Attribute min, max und value drei meter-Container zur Anzeige von Umsätzen genutzt, ähnlich einem Balkendiagramm.
Im JavaScript-Bereich wird über den Verweis num auf das Zahleneingabefeld verwiesen. Falls der Benutzer die CheckBox neben dem Element betätigt, dann wird der Wert der booleschen Eigenschaft required umgekehrt. Das Element wird also wahlweise zu einem Pflichtfeld. Falls es ein Pflichtfeld ist, erfolgt eine genauere Validierung. Es ist dann nicht nur unmöglich, falsche Zahlenwerte einzutragen, sondern es ist ebenfalls unmöglich, das Feld leer zu lassen oder Buchstaben statt Zahlen einzugeben.
Die Methoden stepUp() und stepDown() ändern den Wert des Elements um das entsprechende Vielfache der Schrittweite. Ohne Parameter wird der Wert um genau eine Schrittweite geändert.
Ein Verschieben des Sliders führt zum Ereignis change und damit zum Aufruf der Funktion aendernRange(). Es wird dafür gesorgt, dass der neue Wert sichtbar neben dem Slider erscheint.
Mit der Schaltfläche Start wird die Funktion aendernProgress() gestartet, die zu einer Änderung des Fortschrittsbalkens führt.
Nach dem Absenden werden die eingetragenen Werte mithilfe von JavaScript angezeigt. Ein Beispiel sehen Sie in Abbildung 17.11.
Abbildung 17.11 Ausgabe der Einträge mit JavaScript
Es folgt der JavaScript-Code im ersten Teil des Dokuments:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Elemente für Zahlen</title>
<script>
function senden()
{
alert("number: " + num.value
+ ", asNumber: " + num.valueAsNumber
+ "\nrange: " + document.getElementById("idRange").value);
}
function aendernRange()
{
var zahl = parseFloat(document.getElementById("idRange").value);
document.getElementById("idRangeWert").firstChild.nodeValue =
"(" + zahl.toFixed(1) + ")";
}
var pWert = 10;
function aendernProgress()
{
pWert++;
document.getElementById("idProgress").value = pWert;
document.getElementById("idProgressWert")
.firstChild.nodeValue = "(" + pWert + "%)";
if(pWert<100)
setTimeout(aendernProgress, 20);
}
</script>
</head>
...
Listing 17.6 Datei »h5_zahl.htm«, JavaScript-Code
In der Funktion senden() wird der Wert des Zahleneingabefelds auch mithilfe der Eigenschaft valueAsNumber ausgegeben. Sie enthält den Wert als Zahl und nicht nur als Text wie die Eigenschaft value.
Die Funktion aendernRange() dient zur Ausgabe des Zahlenwerts des Sliders in Klammern, mit einer Nachkommastelle.
Mithilfe der Methode setTimeout() des window-Objekts wird in der Funktion aendernProgress() ein zeitlich gesteuerter Ablauf gestartet. Damit wird der Fortschrittsbalken vom Startwert 10 bis zum Endwert 100 animiert. Alle 20 Millisekunden erhöht sich der Wert um 1. Der gesamte Ablauf benötigt daher 1.8 Sekunden. Der aktuelle Wert wird jeweils rechts als Prozentwert angezeigt.
17.2.3 Elemente für Zeitangaben
In diesem Abschnitt folgen einige Elemente, die sich zur sicheren Eingabe und Übermittlung von Zeitangaben eignen, siehe Abbildung 17.12. Sobald der Benutzer eines der Elemente anwählt, erscheinen Bedienungselemente zur komfortablen Eingabe oder Auswahl der einzelnen Teile der Zeitangabe innerhalb eines festgelegten Zeitbereichs, wie in Abbildung 17.13.
Abbildung 17.12 Elemente für Zeitangaben
Abbildung 17.13 Auswahl eines Datums
Der Code des Formulars verdeutlicht die verschiedenen Möglichkeiten:
...
<body>
<form id="idForm">
<p>1: <input id="idZeit1" type="date" value="2018-05-25"
min="2018-04-15" max="2018-06-20"> date</p>
<p>2: <input id="idZeit2" type="time" value="10:30"
min="08:00" max="13:00"> time</p>
<p>3: <input id="idZeit3" type="datetime-local"
value="2018-05-25T10:30"> datetime-local</p>
<p>4: <input id="idZeit4" type="month" value="2018-05"
min="2017-10" max="2019-03"> month</p>
<p>5: <input id="idZeit5" type="week" value="2018-W21"
min="2018-W15" max="2018-W25"> week</p>
<p><input type="submit"></p>
</form>
<script>
document.getElementById("idForm")
.addEventListener("submit", senden);
</script>
</body></html>
Listing 17.7 Datei »h5_zeit.htm«, Formular mit Elementen
Alle Elemente haben den Typ input, mit unterschiedlichen Werten beim Attribut type: date, time, datetime-local, month und week. Die Attribute min und max dienen zur Begrenzung des erlaubten Zeitbereichs. Das Attribut value steht für die Voreinstellung der Zeitangabe, jeweils in einem spezifischen Format.
Das erste input-Element des Typs date dient zur Auswahl eines Datums, mit der Uhrzeit 00:00 Uhr UTC. Beim Aufklappen erscheint der Monat des voreingestellten Datums. Falls kein Datum voreingestellt ist, erscheint der aktuelle Monat; allerdings wird in diesem Fall beim Senden kein Datum übermittelt. Eine Voreinstellung ist also empfehlenswert. Daten, die außerhalb des erlaubten Datumsbereichs liegen, werden in Hellgrau angezeigt und sind nicht auswählbar.
Das zweite input-Element des Typs time dient zur Auswahl einer Uhrzeit, mit dem Datum 01.01.1970.
Beim dritten Element des Typs datetime-local können sowohl Datum als auch Uhrzeit eingestellt werden. Beachten Sie das gesonderte Format für das Attribut value.
Für das vierte Element wird der Typ month gewählt. Es können nur ganze Monate ausgewählt werden. Als Wert dient das Datum des ersten Tags des ausgewählten Monats. Das fünfte Element hat den Typ week. Es können nur ganze Kalenderwochen ausgewählt werden. Als Wert dient das Datum des Montags der ausgewählten Kalenderwoche.
Nach dem Absenden werden die eingetragenen Werte mithilfe von JavaScript angezeigt. Ein Beispiel sehen Sie in Abbildung 17.14.
Abbildung 17.14 Ausgabe der Einträge mit JavaScript
Es folgt der JavaScript-Code im ersten Teil des Dokuments:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Datum und Uhrzeit</title>
<script>
function senden()
{
var aus = "";
for(let i=1; i<=5; i++)
{
let x = document.getElementById("idZeit" + i);
aus += i + ": " + x.value + " # " + x.valueAsDate + "\n";
}
alert(aus);
}
</script>
</head>
...
Listing 17.8 Datei »h5_zeit.htm«, JavaScript-Code
In der Funktion senden() wird der Wert vieler Elemente auch mithilfe der Eigenschaft valueAsDate ausgegeben. Sie enthält im Unterschied zur Eigenschaft value den Wert als Date-Objekt und nicht als Text. Allerdings wird der Wert der Eigenschaft value nicht in allen Fällen richtig umgerechnet. Es ist also eventuell besser, diese Umrechnung selbst vorzunehmen.
17.2.4 Validierung von Formularen
JavaScript bietet im Zusammenhang mit der HTML5-eigenen Validierung von Formularinhalten noch einige Möglichkeiten. Sie können z. B. einstellen, ob ein einzelnes Element bzw. ein ganzes Formular validiert wird oder nicht. Im Dokument gibt es zwei Formulare jeweils mit einer Schaltfläche Senden, siehe Abbildung 17.15.
Abbildung 17.15 Zwei Formulare
Das erste Formular enthält ein Eingabefeld für Text. Sie können einstellen, ob das Formular validiert wird.
Beim zweiten Formular können Sie einstellen, ob das darin enthaltene Zahleneingabefeld bedienbar ist oder nicht. Außerdem können Sie mithilfe eines Vorabtests feststellen, ob das Formular validiert wird und ob es eine Validierung bestehen würde. Dies kann sinnvoll sein, wenn Inhalte eines Formulars durch bestimmte Aktionen des Benutzers automatisch gesetzt werden und Sie wissen möchten, ob die nunmehr aktuellen Inhalte einer Prüfung standhalten würden.
Es folgt zunächst der HTML-Code der Formulare:
...
<body>
<form id="idForm1" novalidate>
<input id="idText1" required>
<input type="submit">
<input id="idCheck1" type="checkbox"> Formular wird validiert
</form>
<form id="idForm2">
<input id="idNumber2" disabled type="number"
min="32" max="58" step="2" value="42"> von 32 bis 58
<input id="idTesten2" type="button" value="Testen">
<input type="submit">
<input id="idCheck2" type="checkbox"> Element ist bedienbar
</form>
<script>
document.getElementById("idForm1")
.addEventListener("submit", senden1);
document.getElementById("idCheck1")
.addEventListener("click", check1);
document.getElementById("idTesten2")
.addEventListener("click", testen2);
document.getElementById("idForm2")
.addEventListener("submit", senden2);
document.getElementById("idCheck2")
.addEventListener("click", check2);
</script>
</body></html>
Listing 17.9 Datei »h5_validierung.htm«, Formulare und Eventhandler
Mithilfe des Attributs novalidate wird eingestellt, dass das erste Formular zunächst nicht validiert wird. Das Texteingabefeld ist ein Pflichtfeld. Falls es leer gelassen wird, erscheint dennoch keine Fehlermeldung.
Das zweite Formular wird validiert, ebenso das Zahleneingabefeld. Es ist allerdings aufgrund des Attributs disabled zunächst nicht bedienbar. Beim aktuellen Wert 42 würde das Formular den Test bestehen. Gültige Werte sind nur die geraden Zahlen von einschließlich 32 bis einschließlich 58.
Es folgt der erste Teil des Dokuments:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Validierung</title>
<script>
function senden1()
{
alert(document.getElementById("idText1").value);
}
function check1()
{
var f = document.getElementById("idForm1");
f.noValidate = !f.noValidate;
}
function testen2()
{
var num = document.getElementById("idNumber2");
alert("Element würde geprüft: " + num.willValidate + "\n"
+ "Oberhalb Bereich: " + num.validity.rangeOverflow + "\n"
+ "Unterhalb Bereich: " + num.validity.rangeUnderflow + "\n"
+ "Wert würde als gültig gesendet: " + num.validity.valid);
}
function senden2()
{
alert(document.getElementById("idNumber2").valueAsNumber);
}
function check2()
{
document.getElementById("idNumber2").disabled =
!document.getElementById("idNumber2").disabled;
}
</script>
</head>
...
Listing 17.10 Datei »h5_validierung.htm«, JavaScript-Code
Bei jedem Klick auf die erste CheckBox wird die Funktion check1() ausgeführt. Innerhalb der Funktion wechselt der Wert der Eigenschaft noValidate des Formulars zwischen true und false. Nur wenn noValidate den Wert false hat und das Eingabefeld leer ist, erscheint eine Fehlermeldung, siehe Abbildung 17.16. Sie können also in Ihren Programmen festlegen, ob ein Formular geprüft werden soll oder nicht.
Abbildung 17.16 »noValidate = false«
In der Funktion testen2() werden die Werte einiger boolescher Eigenschaften des Elements bzw. der Eigenschaft validity ermittelt:
-
validity.rangeOverflow und validity.rangeUnderflow: Der Wert überschreitet bzw. unterschreitet den gültigen Bereich.
Der Wert 82 im zweiten Formular führt zu dem Ergebnis in Abbildung 17.17. Die Eigenschaft rangeOverflow des validity-Objekts liefert in diesem Fall true.
Abbildung 17.17 Testergebnis für den Wert 82
Beim Wert 51 sieht das Ergebnis aus wie in Abbildung 17.18. Der Wert liegt zwar im erlaubten Bereich, ist aber ungerade und daher nicht gültig.
Abbildung 17.18 Testergebnis für den Wert 51
Bei jedem Klick auf die zweite CheckBox wird die Funktion check2() ausgeführt. Innerhalb der Funktion wechselt der Wert der Eigenschaft disabled des Formulars zwischen true und false. Nur wenn disabled den Wert false hat, kann das Formular bedient werden.