<input>-Elemente vom Typreset werden als Schaltflächen gerendert, mit einem standardmäßigenclick-Ereignishandler, der alle Eingaben im Formular auf ihre Anfangswerte zurücksetzt.

Probieren Sie es aus

<form>  <div>    <label for="id">User ID:</label>    <input type="text" name="id" />    <input type="reset" value="Reset" />    <input type="submit" value="Submit" />  </div></form>

.controls {  padding-top: 1rem;  display: grid;  grid-template-rows: repeat(3, 1fr);  grid-template-columns: 1fr 2fr;  gap: 0.7rem;}label {  font-size: 0.8rem;  justify-self: end;}input[type="reset"],input[type="submit"] {  width: 5rem;  justify-self: end;}input[type="reset"] {  grid-column: 2;  grid-row: 2;}input[type="submit"] {  grid-column: 2;  grid-row: 3;}

Wert

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

Das Wert-Attribut festlegen

<input type="reset" value="Reset the form" />

Das Wert-Attribut weglassen

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

<input type="reset" />

Verwendung von Rücksetzknöpfen

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

Ein einfacher Rücksetzknopf

Wir beginnen mit der Erstellung eines einfachen Rücksetzknopfes:

<form>  <div>    <label for="example">Type in some sample text</label>    <input 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.

Hinzufügen einer Tastenkombination für das Zurücksetzen

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

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

<form>  <div>    <label for="example">Type in some sample text</label>    <input 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 destitle-Attributs) kann ebenfalls hilfreich sein, obwohl es keine vollständige Lösung für Barrierefreiheitszwecke ist.

Deaktivieren und Aktivieren eines Rücksetzknopfes

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

<input type="reset" value="Disabled" disabled />

Sie können Schaltflächen zur Laufzeit aktivieren und deaktivieren, indem Siedisabled auftrue oderfalse setzen; in JavaScript sieht dies aus wiebtn.disabled = true oderbtn.disabled = false.

Validierung

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

Beispiele

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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