<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

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

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

html
<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).

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

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