<input type="reset">
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<input>
-Elemente vom Typ reset
werden als Schaltflächen dargestellt, mit einem Standard-click
-Ereignishandling, das alle Eingaben im Formular auf ihre Anfangswerte zurücksetzt.
Probieren Sie es aus
Hinweis: Sie sollten in Ihren Formularen normalerweise auf Zurücksetzen-Schaltflächen verzichten. Sie sind selten nützlich und frustrieren stattdessen eher Benutzer, die sie versehentlich anklicken (oft beim Versuch, die Absenden-Schaltfläche zu klicken).
Wert
Das value
-Attribut eines <input type="reset">
-Elements enthält eine Zeichenkette, die als Beschriftung der Schaltfläche verwendet wird und der Schaltfläche eine zugängliche Beschreibung bietet. Schaltflächen wie reset
haben ansonsten keinen Wert.
Das value-Attribut setzen
<input type="reset" value="Reset the form" />
Das value-Attribut weglassen
Wenn Sie keinen value
angeben, erhalten Sie eine Schaltfläche mit der Standardbeschriftung (typischerweise "Reset", aber dies variiert je nach Benutzeragent):
<input type="reset" />
Verwendung von Zurücksetzen-Schaltflächen
<input type="reset">
-Schaltflächen werden zum Zurücksetzen von Formularen verwendet. Wenn Sie eine benutzerdefinierte Schaltfläche erstellen und das Verhalten mit JavaScript anpassen möchten, sollten Sie <input type="button">
oder noch besser ein <button>
-Element verwenden.
Eine einfache Zurücksetzen-Schaltfläche
Beginnen wir mit der Erstellung einer einfachen Zurücksetzen-Schaltfläche:
<form>
<div>
<label for="example">Type in some sample text</label>
<input id="example" type="text" />
</div>
<div>
<input type="reset" value="Reset the form" />
</div>
</form>
Diese wird wie folgt dargestellt:
Versuchen Sie, in das Textfeld etwas einzugeben, und drücken Sie dann die Zurücksetzen-Schaltfläche.
Hinzufügen eines Tastaturkürzels für das Zurücksetzen
Um einem Zurücksetzen-Schaltfläche ein Tastaturkürzel hinzuzufügen – genauso wie bei jedem <input>
, bei dem dies sinnvoll ist – verwenden Sie das globale Attribut accesskey
.
In diesem Beispiel wird r als Zugangstaste festgelegt (Sie müssen r zusammen mit den spezifischen Modifikator-Tasten für Ihre Browser/OS-Kombination drücken; siehe accesskey
für eine nützliche Liste dieser).
<form>
<div>
<label for="example">Type in some sample text</label>
<input id="example" type="text" />
</div>
<div>
<input type="reset" value="Reset the form" accesskey="r" />
</div>
</form>
Das Problem bei dem obigen Beispiel ist, dass der Benutzer nicht weiß, welche Zugangstaste es ist! Dies ist besonders problematisch, da die Modifikatoren typischerweise nicht standardisiert sind, um Konflikte zu vermeiden. Beim Erstellen einer Website sollten Sie diese Informationen auf eine Weise bereitstellen, die das Design der Website nicht beeinträchtigt (zum Beispiel indem Sie einen leicht zugänglichen Link bereitstellen, der auf Informationen über die Zugangstasten der Website verweist). Das Hinzufügen eines Tooltips zur Schaltfläche (mithilfe des title
-Attributs) kann ebenfalls hilfreich sein, obwohl es keine vollständige Lösung für Barrierefreiheitszwecke ist.
Deaktivieren und Aktivieren einer Zurücksetzen-Schaltfläche
Um eine Zurücksetzen-Schaltfläche zu deaktivieren, geben Sie das disabled
-Attribut an:
<input type="reset" value="Disabled" disabled />
Sie können Schaltflächen zur Laufzeit aktivieren und deaktivieren, indem Sie disabled
auf true
oder false
setzen; in JavaScript sieht dies so aus: btn.disabled = true
oder btn.disabled = false
.
Hinweis: Sehen Sie sich die Seite <input type="button">
an, um weitere Ideen zum Aktivieren und Deaktivieren von Schaltflächen zu erhalten.
Validierung
Schaltflächen nehmen nicht an der Einschränkungsvalidierung teil; sie haben keinen realen Wert, der eingeschränkt werden könnte.
Beispiele
Wir haben oben grundlegende Beispiele beigefügt. Es gibt wirklich nichts Weiteres zu Zurücksetzen-Schaltflächen zu sagen.
Technische Zusammenfassung
Wert | Eine Zeichenkette, die als Beschriftung der Schaltfläche verwendet wird |
Ereignisse | [`click`](/de/docs/Web/API/Element/click_event) |
Unterstützte gemeinsame Attribute |
type und
value
|
IDL-Attribute | value |
DOM-Schnittstelle |
[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement) |
Methoden | Keine |
Implizite ARIA-Rolle | button |
Spezifikationen
Specification |
---|
HTML Standard # reset-button-state-(type=reset) |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
<input>
und dieHTMLInputElement
-Schnittstelle, die es implementiert.- Formulare und Schaltflächen
- HTML-Formulare
- Das
<button>
-Element - Kompatibilität von CSS-Eigenschaften