<input type="reset">

Das Attribut value eines <input type="reset">-Elements enthält einen String, der als Beschriftung der Schaltfläche verwendet wird und der Schaltfläche eine barrierefreie Beschreibung bietet. Schaltflächen wie reset haben ansonsten keinen Wert.

Wenn Sie keinen value angeben, erhalten Sie eine Schaltfläche mit der Standardbeschriftung (typischerweise "Zurücksetzen", dies kann jedoch je nach Benutzeragent variieren):

<input type="reset" />

<input type="reset">-Schaltflächen werden verwendet, um Formulare zurückzusetzen. Wenn Sie eine benutzerdefinierte Schaltfläche erstellen möchten und das Verhalten dann mit JavaScript anpassen wollen, sollten Sie <input type="button"> verwenden oder noch besser ein <button>-Element.

Wir beginnen mit der Erstellung eines einfachen Rücksetzknopfes:

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

Dies wird wie folgt gerendert:

Versuchen Sie, etwas Text in das Textfeld einzugeben und dann den Rücksetzknopf zu drücken.

Um einer Rücksetzschaltfläche eine Tastenkombination hinzuzufügen – genauso wie bei jedem anderen <input>, bei dem dies sinnvoll ist – verwenden Sie das globale Attribut accesskey.

In diesem Beispiel wird r als Zugriffstaste angegeben (Sie müssen r zusammen mit den jeweiligen Modifikatortasten für Ihre Browser-/OS-Kombination drücken; siehe accesskey für eine nützliche Liste dieser Kombinationen).

<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 mit dem obigen Beispiel ist, dass der Benutzer keine Möglichkeit hat, zu wissen, was die Zugriffstaste ist! Dies gilt insbesondere, da die Modifikatoren normalerweise nicht standardisiert sind, um Konflikte zu vermeiden. Wenn Sie eine Website erstellen, stellen Sie sicher, dass diese Informationen auf eine Weise bereitgestellt werden, die das Design der Website nicht stört (z.B. durch einen leicht zugänglichen Link, der auf Informationen über die Zugriffstasten 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.

Um einen Rücksetzknopf zu deaktivieren, geben Sie das Attribut disabled an, wie folgt:

<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 aus wie btn.disabled = true oder btn.disabled = false.

Schaltflächen nehmen nicht an der Einschränkungsvalidierung teil; sie haben keinen echten Wert, der eingeschränkt werden könnte.

Wir haben oben einfache Beispiele gezeigt. Es gibt nicht wirklich viel mehr über Rücksetzknöpfe zu sagen.

• <input> und die HTMLInputElement-Schnittstelle, die es implementiert.
• Formulare und Schaltflächen
• HTML-Formulare
• Das <button>-Element