(0) exportieren Drucken
Alle erweitern

Formulare

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen jetzt HTML5-Formulare, einschließlich neue Status des type-Attributs (im input-Element), neue Attribute für das input-Element und das progress-Element. So können Entwickler schnell und einfach Benutzereingabeaufforderungen, Eingabeüberprüfung und Feedback mit minimaler Skriptgröße bereitstellen. HTML5-Formulare sind in Abschnitt 4.10 der HTML5-Spezifikation des World Wide Web Consortium (W3C) beschrieben.

Bevor diese HTML5input-Typen und -Attribute verfügbar waren, mussten Entwickler eine zusätzliche Prüflogik schreiben, um sicherzustellen, dass eine Telefonnummer keine Buchstaben enthält oder dass eine richtige E-Mail-Adresse eingegeben wurde.  Durch die Unterstützung für das clientseitige HTML5-Formular und die Eingabeüberprüfung können sich die Entwickler auf andere Aufgaben statt auf das Erstellen von Überprüfungsfunktionen konzentrieren.

Unterstützung für neue Eingabestatus

HTML5-Formulare definieren verschiedene Eingabestatus für das type-Attribut des input-Elements. Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen jetzt die Eingabestatus "URL", "E-Mail" und "Bereich".

Suchstatus

Der Suchstatus liegt vor, wenn Sie das type-Attribut des input-Elements auf search festlegen. Er ist mit dem Textstatus identisch. Der einzige Unterschied besteht darin, dass er in DOM (Document Object Model, Dokumentobjektmodell) als "Sucheingabetyp" identifiziert wird.


<input id="search" type="search" placeholder="Search..."/>

Telefonstatus

Der Telefoneingabestatus liegt vor, wenn Sie das type-Attribut des input-Elements auf tel festlegen. Er weist darauf hin, dass das Feld eine Telefonnummer akzeptiert, beispielsweise 206-555-0012 oder (425) 555-0034. Da Telefonnummern unterschiedliche Formate haben können, erzwingt der Telefonstatus kein bestimmtes Format. Wenn Sie ein bestimmtes Format erzwingen möchten, verwenden Sie das pattern-Attribut.


<input id="work_phone" type="tel" required placeholder="(425) 555-0067"/>

URL- und E-Mail-Status

Durch die Unterstützung für die Status URL und E-Mail erhalten Entwickler eine integrierte Überprüfungsmöglichkeit für URL- und E-Mail-Eingabetypen.

Der URL-Eingabestatus liegt vor, wenn Sie das type-Attribut des input-Elements auf url festlegen. Er weist darauf hin, dass das Feld eine vollqualifizierte Webadresse akzeptieren muss, beispielsweise "http://www.contoso.com".

Entsprechend akzeptiert der E-Mail-Eingabestatus nur eine (syntaktisch) gültige E-Mail-Adresse, beispielsweise "joe@contoso.com". In den folgenden Beispielen wird eine Fehlermeldung angezeigt, wenn Benutzer eine URL oder E-Mail-Adresse nicht richtig eingeben.


<input type="url" name="myUrl"/>
<input type="email" name="myEmail"/>


Zahlenstatus

Der Number-Status liegt vor, wenn Sie das type-Attribut des input-Elements auf number festlegen. Wenn das value-Attribut angegeben und nicht leer ist, muss es eine gültige Gleitkommazahl aufweisen.


<input type="number" name="desiredQuantity" value="1" />

Bereichsstatus

Dank der Unterstützung für den Eingabestatus Range können Sie einfach ein Eingabesteuerelement in Form eines Bereichs oder eines Schiebereglers erstellen. Der Bereichseingabestatus liegt vor, wenn Sie das type-Attribut des input-Elements auf range festlegen. Das Bereichssteuerelement akzeptiert zum Definieren des Wertbereichs und der Auflösung des Steuerelements vier Attribute: min, max, step und value. Im folgenden Beispiel wird ein Bereichssteuerelement erstellt, das Werte von 0 bis 100 in Schritten von 5 zurückgibt. Vordefiniert ist der Wert "50".


<input type="range" min="0" max="100" step="5" value="50"/>

Da das Bereichssteuerelement eigentlich ein input-Element ist, wird es, wenn es in einem Browser nicht unterstützt wird, als Textfeld gerendert, das den Wert als Standardwert enthält.

Das progress-Element

Das in Abschnitt 4.10.16 der HTML5-Spezifikation definierte progress-Element erstellt eine Leiste, die den Status einer Aufgabe anzeigt (bestimmter Modus). Alternativ zeigt es an, dass eine Aufgabe ausgeführt wird, bei der jedoch nicht bekannt ist, zu wie viel Prozent sie abgeschlossen ist (unbestimmter Modus), oder es zeigt beides an. Sie können beispielsweise zunächst eine unbestimmte Statusleiste anzeigen und dann zu einer bestimmten Statusleiste wechseln, wenn Sie berechnet haben, wie lange die Ausführung dauern wird.

Um eine Statusanzeige zu erstellen, die nur Aktivitäten anzeigt, lassen Sie das value-Attribut weg. Wenn Sie ein value-Attribut für das Element festlegen oder ihm im Skript einen Wert zuweisen, wird eine unbestimmte Leiste angezeigt. Die Leiste beginnt bei 0 und geht bis zu dem Wert, den Sie mit dem max-Attribut festlegen. Wenn Sie das max-Attribut weglassen, geht der Statusbereich von 0 bis 1. Sowohl value als auch max sind Gleitkommazahlen.

Syntax für den unbestimmten Modus


<progress>fallback text</progress>

Syntax für den bestimmten Modus


<progress id="progCtrl" max="100" value="50">fallback text</progress>

Wenn der Browser eines Benutzers das HTML5-Statussteuerelement nicht unterstützt, können Sie einen Ausweichtext zwischen den Tags platzieren (im Beispiel als "fallback text" bezeichnet). Sie könnten den Wert des value-Attributs als Text zwischen den Tags anzeigen. Schreiben Sie beispielsweise Skript, um den Ausweichtext in etwa so zu aktualisieren: "Diese Aufgabe ist zu x % abgeschlossen", wobei x den aktuellen Wert des value-Attributs darstellt.

Das progress-Element verfügt außerdem über ein position-Attribut, das dem Quotienten des Werts des value-Attributs geteilt durch den Wert des max-Attributs entspricht (oder "-1", wenn sich das Steuerelement im unbestimmten Modus befindet). Das position-Attribut ist schreibgeschützt.

Beispiel: Bereichseingabestatus und Statussteuerelement

Im folgenden Beispiel werden der Bereichseingabestatus und ein Statussteuerelement kombiniert. Beim ersten Laden der Seite befindet sich das progress-Element im unbestimmten Modus (kein Wert zugewiesen). Wenn Sie den Schieberegler verschieben, wird der Wert, um den Sie den Schieberegler verschieben, dem Statussteuerelement zugewiesen, und beide werden synchron verschoben.


<!DOCTYPE html>
<html>

<head>
<title>Range and progress example</title>
<style type="text/css">
input[type=range] {
  padding-left: 0px;
  padding-right: 0px;
}
</style>
<script type="text/javascript">
  function changeValue() {
    document.getElementById("progCtrl").value = document.getElementById("rangeCtrl").value;
  }
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("rangeCtrl").addEventListener('change', changeValue, false);
  }, false);
</script>
</head>

<body>

<progress id="progCtrl" max="100" >Sorry, your browser doesn't support the progress 
element.</progress>
<br><br>
<input id="rangeCtrl" max="100" min="0" step="5" type="range" value="50" />

</body>

</html>


Beim ersten Laden wird das Beispiel in Internet Explorer 10 unter Windows 8 wie folgt angezeigt. Beachten Sie, dass sich die Statusanzeige im unbestimmten Modus befindet und daher in Windows 8 in Form von animierten Punkten angezeigt wird, die ein- und ausgeblendet werden.

Beispiel für eine unbestimmte Statusleiste (oben) und ein Bereichssteuerelement (unten)

Wenn Sie das Schieberegler-Steuerelement nach rechts verschieben (auf den Wert 75), wird das Beispiel wie folgt angezeigt. Die Statusleiste befindet sich jetzt im bestimmten Modus und ist dem Schieberegler "gefolgt", sodass die Werte übereinstimmen.

Beispiel für eine bestimmte Statusleiste (oben) und ein Bereichssteuerelement (unten)

Sie können diese Seite anzeigen.

Hinweis  Andere Browser und Betriebssysteme zeigen die Statusleiste und das Schieberegler-Steuerelement anders an.

Eine interaktive Demo von HTML5-Formularen mit Formular- und Eingabeüberprüfung finden Sie im Artikel zu HTML5-Formularen in der IE-Testversion.

Unterstützung für neue Eingabeattribute

Dank der Unterstützung für neue HTML5-input-Attribute wie beispielsweise required, pattern und placeholder können Entwickler sicherstellen, dass Benutzer die auf einer Webseite notwendigen Daten eingeben und dass die Daten korrekt sind. 

Das required-Attribut

Das required-Attribut kennzeichnet ein Element, das nicht ohne Wert übermittelt werden kann. Das Attribut kann für Textsteuerelemente, URL-Steuerelemente, E-Mail-Steuerelemente, Auswahlsteuerelemente, Kontrollkästchen-Steuerelemente oder Optionsfeld-Steuerelemente sowie für textarea- und select-Elemente festgelegt werden. Es handelt sich um ein boolesches Attribut, das nur für ein Element angegeben werden muss. Wenn Benutzer mit der Maus auf ein erforderliches Feld zeigen, wird eine QuickInfo angezeigt, aus der hervorgeht, dass es sich um ein erforderliches Feld handelt. (Wenn Sie das title-Attribut festgelegt haben, wird dieses stattdessen angezeigt.)


<form id="yourname">
  <label>Enter your first name: 
    <input name="firstname" type="text" required><input type="submit" value="Go"/>
  </label>
</form>


Wenn Benutzer versuchen, ein Formular zu senden, ohne etwas in das Feld einzugeben, wird eine Fehlermeldung angezeigt. Außerdem wird der Cursor in das fehlende Feld verschoben.

Beispielbild eines Eingabefelds mit dem oben in einer QuickInfo angezeigten Text "Erforderliches Feld"

Das pattern-Attribut

Mit dem pattern-Attribut können Sie einen regulären Ausdruck definieren, dem die Eingabe von Benutzern entsprechen muss. Das pattern-Attribut ist für input-Elemente verfügbar, deren type-Attribut auf text, search, url, tel, email oder password festgelegt ist.


<form>
<label>
  <input type="tel" name="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" 
   title="enter a telephone number in   the format (xxx) xxx-xxxx"/>
  <input type="submit"/>
</label>
</form>


Die Attribute "min", "max" und "step"

Die Attribute min, max und step gelten für input-Steuerelemente, deren type-Attribut auf number oder range festgelegt ist. (Weitere Informationen zu range-Eingabetypen finden Sie in diesem Thema unter Bereichsstatus.)

Die Attribute min und max definieren den minimalen und den maximalen Wert, der akzeptiert wird.

Das step-Attribut definiert das zulässige Intervall zwischen Werten. Wenn beispielsweise min auf "0" und step auf "1" festgelegt ist, sind nur die Werte "0", "1", "2", "3" usw. zulässig. Entsprechend sind, wenn min auf "1,1" und step auf "1" festgelegt ist, sind nur die Werte "1,1", "2,1", "3,1" usw. zulässig.

Im folgenden Beispiel wird ein Eingabefeld gezeigt, für das eine gerade Zahl zwischen 0 und 10 erforderlich ist. Alle Zahlen außerhalb dieses Bereichs oder ungerade Zahlen werden nicht übermittelt. Außerdem wird eine Fehlermeldung angezeigt.


<form>
  <label>Enter an even number between 0 and 10: 
    <input type="number" min="0" max="10" step="2"/> 
    <input type="submit"/>
  </label>
</form>


Das placeholder-Attribut und die :-ms-input-placeholder-Pseudoklasse

Wenn Sie die Benutzer zum richtigen Eingabefeld führen und sie darauf hinweisen, wie die Daten einzugeben sind, haben Sie bezüglich der gültigen Daten schon viel gewonnen. Dank der Unterstützung für das placeholder-Attribut können Sie Benutzer anleiten, sodass sie die richtigen Daten in die Formularfelder eingeben.

Das placeholder-Attribut definiert eine kurze Eingabeaufforderung oder einen Beispieltext, der in einem Eingabefeld angezeigt werden soll. Es kann in input-Steuerelementen verwendet werden, deren type-Attribut auf text, search, url, tel, email und password festgelegt wurde. Außerdem kann es für textarea-Elemente verwendet werden.

Sie können das placeholder-Attribut verwenden, um direkt im Eingabefeld ein Beispiel für die richtige Eingabe zu platzieren. Dies wird im folgenden Codeausschnitt veranschaulicht.


<input name="url" type="url" placeholder="http://www.contoso.com" />

Das oben gezeigte Markup zeigt im Feld den Platzhaltertext an, bis sich der Cursorfokus auf diesem Feld befindet.

Bild eines Eingabefelds mit Platzhaltertext

Der Platzhaltertext ist standardmäßig hellgrau, Sie können ihn jedoch mit CSS (Cascading Stylesheets) und der :-ms-input-placeholder-Pseudoklassenauswahl nach Belieben formatieren. Im folgenden Beispiel werden die Felder für die Straße und die Postleitzahl mit einem benutzerdefinierten Format hervorgehoben.


<!DOCTYPE html >
<html>
<head>
  <title>Placeholder style example</title>
  <style type="text/css">
  input  /* normal style */
  {
    background-color:LightGray;
    color:Purple;
  }   
  input.address:-ms-input-placeholder /* placeholder only style */   
  {
    font-style:italic;        
    background-color:yellow;
    color:Red;
  }

  </style></head>
<body>
  <form id="test">
    <p><label>Enter Name: <input id="name" placeholder="Your Name"/></label></p>
    <p><label>Enter Street: <input id="street" class="address" 
placeholder="Your address" /></label></p>
    <p><label>Enter a zip code: <input type="num" pattern="(0-9){5}" 
id="zip" class="address" placeholder="5 digit zip" /></label></p>
    <input type="submit" />
  </form>
</body>
</html>


Das Platzhaltertext wird mit dem angegebenen Format angezeigt, bis das Feld den Fokus hat, das heißt, bis die Eingabe in das Feld möglich ist. Wenn das Feld den Fokus hat, nimmt es wieder das normale Eingabefeldformat an, und der Platzhaltertext verschwindet.

Bild von drei Eingabefeldern, jeweils mit Platzhaltertext und mit Hintergrundfarben und Text formatiert

Sie können diese Seite anzeigen. (Zur richtigen Wiedergabe dieser Seite ist Internet Explorer 10 erforderlich.)

Das autofocus-Attribut

Mit dem autofocus-Attribut können Sie Benutzer zu einem bestimmten Feld führen, indem Sie den Fokus nach dem Laden einer Webseite auf ein bestimmtes Feld oder Steuerelement lenken. Dies dient den Benutzern als Orientierungshilfe und zur Vereinfachung. Außerdem müssen die Benutzer nach dem Öffnen einer Seite nicht durch Klicken oder Drücken von TAB zu einem Formularsteuerelement navigieren.

autofocus kann nur für ein Steuerelement in einem Dokument angegeben sein. Wenn mehrere Elemente dieses Attribut aufweisen, erhält beim Öffnen der Seite nur das erste dieser Elemente auf der Seite den Fokus. Da es sich um ein boolesches Attribut handelt, muss es nicht auf einen Wert festgelegt werden; sein Vorhandensein impliziert, dass es "true" entspricht.


<input name="email" type="text" placeholder="joe@contoso.com" autofocus />

Die Attribute "novalidate" und "formnovalidate"

Das novalidate-Attribut kann für form-Elemente festgelegt werden, die Überprüfungseinschränkungen haben, damit das Formular ohne Überprüfung übermittelt werden kann.

Möglicherweise möchten Sie mehrere Übermittlungsschaltflächen für ein Formular verwenden - beispielsweise eine zum Übermitteln des Formulars und eine zum Speichern eines teilweise ausgefüllten Formulars, zu dem Benutzer später zurückkehren können. Sie können Formularelemente mit Überprüfungseinschränkungen bei Verwendung der Hauptübermittlungsschaltfläche überprüfen lassen und verhindern, dass solche Elemente überprüft werden, wenn die Schaltfläche zum Speichern für später verwendet wird. Hierzu legen Sie nicht das novalidate-Attribut für das gesamte Formular fest, sondern Sie legen das formnovalidate-Attribut für die Schaltfläche fest, mit der das Formular für später gespeichert wird.

Im folgenden Beispiel wird die Verwendung beider Attribute gezeigt. Das formnovalidate-Attribut wird für die Schaltfläche Save for Later festgelegt, während das novalidate-Attribut für das zweite form-Element festgelegt wird. Das heißt, im ersten Formular werden mit der Schaltfläche Submit die Formularelemente mit Überprüfungseinschränkungen überprüft, mit der Schaltfläche Save for Later jedoch nicht. Im zweiten Formular werden ungeachtet der Überprüfungseinschränkungen keine Formularelemente überprüft.


<!DOCTYPE html>
<html>
<head>
  <title>novalidate and formnovalidate Example</title>
</head>
<body>
  <form>
    <p><label>*Name: <input type="text" required /></label></p>
    <p><label>*Street: <input type="text" required /></label></p>
    <p><label>*Zip: <input type="text" pattern="[0-9](5|10)" placeholder="5 or 9 digit ZIP" required /></label></p>
    <input type="submit" name=submit value="Submit" />
    <input type="submit" formnovalidate name="save" value="Save for Later" />
    <p>* Required field</p>
  </form>
  <form novalidate>
    <p>Unvalidated area</p>
    <p><label>Name: <input type="text" required /></label></p>
    <p><label>Street: <input type="text" required /></label></p>
    <p><label>Zip: <input type="text" pattern= "[0-9](5|10)" placeholder="5 or 9 digit zip" required /></label></p>
    <input type="submit" name=submit value="Submit" />
  </form>
</body>
</html>


Benutzerdefinierte Überprüfungsfehlermeldungen

Internet Explorer 10 zeigt verschiedene generische Meldungen für eine Vielzahl von Überprüfungsfehlern bei input-Elementen an. Sie können diese Meldungen mit dem title-Attribut im input-Element anpassen. Der Inhalt des title-Attributs wird als QuickInfo-Text für das Feld angezeigt und außerdem der generischen Fehlermeldung bei Nichtübereinstimmung mit dem Muster angefügt. Im folgenden Beispiel wird gezeigt, wie ein Telefoneingabefeld Benutzer darauf hinweisen kann, in welchem Format die Nummer eingegeben werden muss.


<form>
  <label>Enter a phone number: 
  <input type="text" title="xxx-xxx-xxxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
  <input type="submit" />
  </label>
</form>


Wenn Benutzer die Gedankenstriche weglassen oder Buchstaben in das Feld eingeben, wird die folgende Antwort angezeigt. Der Text "You must use this format:" wird automatisch angezeigt.

Bild eines Telefoneingabefelds mit QuickInfo-Text, aus dem das richtige Format hervorgeht

Automatische Feststelltastenwarnung in Kennwortfeldern

Damit Benutzer schneller bemerken, dass sie ein falsches Kennwort eingeben, da die FESTSTELLTASTE aktiviert ist, wird in Internet Explorer 10 und in Windows Store-Apps mit JavaScript eine Warnmeldung angezeigt, wenn sich der Fokus in einem Eingabefeld mit dem typepassword befindet und die FESTSTELLTASTE aktiviert ist. Zusätzlicher Code ist nicht erforderlich.

Bild eines Kennworteingabefelds mit QuickInfo-Text, aus dem hervorgeht, dass die FESTSTELLTASTE aktiviert ist

Formatieren überprüfter Felder mit den Pseudoklassen ":valid" und ":invalid"

Wenn Sie Benutzer anstatt mit einer Fehlermeldung mit visuellem Feedback informieren, ob die Eingabe gültig ist, wird dies positiver wahrgenommen. Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen die CSS-Pseudoklassen :valid und :invalid. Mit diesen Auswahlmöglichkeiten können Sie ein Eingabefeld abhängig vom Eingabetyp oder von einem Muster formatieren. So können Sie beispielsweise für ein URL-Feld einen roten Rahmen verwenden, bis eine Adresse im richtigen Format eingegeben wurde.

Ein erforderliches Feld ist ungültig, bis die richtige Eingabe eingegeben wird. Ein Feld, das nicht erforderlich ist, aber eine Überprüfung enthält (beispielsweise ein URL-Feld), ist gültig, bis Text eingegeben wird.

Sie können erforderliche oder optionale Felder auch mit den Pseudoklassen :required bzw. :optional formatieren. "Erforderliche" Felder werden weiter oben beschrieben. "Optionale" Felder sind definiert als alle input-Felder, die das required-Attribut akzeptieren können, das aber nicht festgelegt ist. Außerdem gehören dazu alle textarea- und select-Elemente, für die das required-Attribut nicht festgelegt ist.

Im folgenden Beispiel wird für ein Feld ein grüner Rahmen verwendet, wenn das Feld gültig ist, und ein roter Rahmen mit fett formatiertem Text, wenn das Feld nicht gültig ist. Das E-Mail-Feld ist erforderlich, die anderen dagegen nicht. Das URL-Feld ist bereits mit einer ungültigen URL ausgefüllt und ist daher beim Öffnen der Seite nicht gültig. Außerdem sind die beiden optionalen Felder mit hellgrauem Hintergrund formatiert, und das erforderliche Feld ist mit einem auffälligen gelben Hintergrund formatiert.


<!DOCTYPE html >
<html>
<head>
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border :solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid { 
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required{
    background-color:Yellow;
  }
  #PC1 input:optional{
    background-color:LightGray;
  }       
  </style>
</head>
<body>
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>
  </form>
</body>
</html>


Wenn Sie anfangen, eine E-Mail-Adresse in das Feld für die E-Mail-Adresse einzugeben, wird das Feld wie folgt angezeigt.

Bild von mehreren Eingabefeldern. Das E-Mail-Eingabefeld enthält eine unvollständige E-Mail-Adresse und hat einen roten Rahmen, der darauf hinweist.

Wenn Sie eine (syntaktisch) gültige E-Mail-Adresse eingeben, wechselt wie hier gezeigt die Farbe des Feldrahmens von Rot zu Grün, und der Text ist nicht mehr fett formatiert.

Bild von mehreren Eingabefeldern. Das E-Mail-Eingabefeld enthält eine vollständige E-Mail-Adresse und hat einen grünen Rahmen, der darauf hinweist.

Auf diese Weise formatierte Felder geben Benutzern sofortiges Feedback, da sie sich während der Eingabe ändern.

Sie können diese Seite anzeigen. (Damit diese Seite richtig gerendert wird, benötigen Sie Internet Explorer 10 oder einen Browser, der die Pseudoklassen für die Formularüberprüfung unterstützt.)

DOM-Methoden, -Attribute und -Objekte für die Eingabeüberprüfung

Internet Explorer 10 und Windows Store-Apps mit JavaScript enthalten neue APIs, die den programmgesteuerten Zugriff auf den Überprüfungsstatus von Formularen und Elementen mit JavaScript ermöglichen.

Die checkValidity-Methode [für "HTMLFormElement"]

Die checkValidity-Methode überprüft statisch die Einschränkungen (gemäß der Beschreibung in Abschnitt 4.10.21.2 der HTML5-Spezifikation) des form-Elements und gibt "true" zurück, wenn die Einschränkungsüberprüfung ein positives Ergebnis zurückgibt, oder "false", wenn sie ein negatives Ergebnis zurückgibt.

Die checkValidity-Methode [für "HTMLInputElement" und alle anderen Formularelemente]

Die checkValidity-Methode überprüft, ob das Element gültig ist, und gibt gegebenenfalls "true" zurück. Anderenfalls gibt sie "false" zurück. Wenn das Element nicht gültig ist, wird außerdem ein einfaches invalid-Ereignis ausgelöst, das abgebrochen werden kann, aber kein Standardereignis hat.

Das willValidate-Attribut

Das willValidate-Attribut gibt "true" zurück, wenn ein Element überprüft werden kann (beispielsweise ein url- oder email-Eingabetyp oder ein Element, für das das validation-Attribut festgelegt ist). Anderenfalls gibt es "false" zurück.

Das validity-Attribut

Das validity-Attribut gibt ein Gültigkeitsstatusobjekt (ValidityState) für das Element zurück. Das Objekt ist live, und bei jedem Abruf des Attributs wird das gleiche Objekt zurückgegeben.

Das validationMessage-Attribut

Das validationMessage-Attribut gibt die Fehlermeldung zurück, die abhängig vom aktuellen Status des Formulars angezeigt wird. Wenn das Formular beispielsweise in diesem Moment übermittelt wird, ist es ungültig.

Die setCustomValidity-Methode (in "DOMString Error")

Die setCustomValidity-Methode legt die benutzerdefinierte Gültigkeitsfehlermeldung für ein Element fest.

Das ValidityState-Objekt

Das ValidityState-Objekt gibt für die folgenden schreibgeschützten booleschen Attribute "true" oder "false" zurück:

AttributBeschreibung

valueMissing

Der Benutzer hat in ein erforderliches Feld keinen Wert eingegeben.

typeMismatch

Der Benutzer hat etwas mit falscher Syntax eingegeben, beispielsweise eine falsch formatierte URL- oder E-Mail-Adresse.

patternMismatch

Der Benutzer hat etwas eingegeben, das nicht dem entspricht, was das pattern-Attribut angibt, beispielsweise Buchstaben, wenn Zahlen erwartet werden.

tooLong

Ein Steuerelement hat einen Wert, der länger ist als das maxlength-Attribut angibt. Da Benutzer in Windows Internet Explorer nur die in maxlength angegebene Anzahl von Zeichen eingeben können, tritt dies normalerweise auf, wenn der Standardwert zu viele Zeichen enthält.

rangeUnderflow

Der Benutzer hat einen Wert eingeben, der niedriger ist als der vom min-Attribut angegebene.

rangeOverflow

Der Benutzer hat einen Wert eingeben, der höher ist als der vom max-Attribut angegebene.

stepMismatch

Der Benutzer hat einen Wert eingegeben, der nicht einem von den Attributen step und min angegebenen Wert entspricht. Beispielsweise hat der Benutzer eine ungerade Zahl eingegeben, wenn gerade Zahlen erwartet werden.

customError

Für das Steuerelement ist durch die setCustomValidity-Methode des Elements eine Meldung festgelegt (Zeichenfolge ist nicht leer).

valid

Andere Bedingungen treffen nicht zu.

 

API-Referenz

:invalid
:optional
:required
:valid
checkValidity
input
progress
setCustomValidity
validationMessage
validity
ValidityState
willValidate

Beispiele und Lernprogramme

Beispiel für Formularsteuerelemente
Beispiel für Formularüberprüfung

Demos für die Internet Explorer-Testversion

Touch First Controls

IEBlog-Beiträge

Richtlinien für das Erstellen von Websites für die Toucheingabe

Spezifikation

HTML5: Abschnitt 4.10

 

 

Anzeigen:
© 2014 Microsoft