<input type="reset"> HTML-Attributwert - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<input type="reset"> HTML-Attributwert

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

<input>-Elemente des Typs reset werden als Schaltflächen gerendert, mit einem Standard-click-Ereignishandler, der alle Eingaben im Formular auf ihre Ausgangswerte zurücksetzt.

In diesem Artikel

Probieren Sie es aus

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" 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;
}

Hinweis: Sie sollten normalerweise vermeiden, Rücksetzknöpfe in Ihre Formulare aufzunehmen. Sie sind selten nützlich und führen stattdessen eher dazu, dass Benutzer durch einen versehentlichen Klick darauf frustriert sind (oft beim Versuch, den Submit-Button zu klicken).

Wert

Das value-Attribut eines <input type="reset">-Elements enthält eine Zeichenkette, die als Beschriftung der Schaltfläche dient und damit der Schaltfläche eine zugängliche Beschreibung bietet. Schaltflächen wie reset haben ansonsten keinen Wert.

Das value-Attribut festlegen

html

Das value-Attribut weglassen

Wenn Sie keinen value angeben, erhalten Sie eine Schaltfläche mit der Standardbeschriftung (in der Regel "Zurücksetzen", aber dies variiert je nach User Agent):

html

Verwendung von Rücksetzknöpfen

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

Eine einfache Rücksetzschaltfläche

Wir beginnen mit der Erstellung einer einfachen Rücksetzschaltflä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>

Dies wird so gerendert:

Versuchen Sie, etwas Text in das Textfeld einzugeben und dann die Rücksetzschaltfläche zu drücken.

Hinzufügen einer Rücksetztastenkombination

Um einer Rücksetzschaltfläche eine Tastenkombination hinzuzufügen – so wie bei jedem <input>, bei dem es Sinn macht – verwenden Sie das globale Attribut accesskey.

In diesem Beispiel wird r als Zugriffstaste angegeben (Sie müssen r plus die speziellen Modifikator-Tasten für Ihre Browser-/OS-Kombination drücken; siehe accesskey für eine nützliche Liste davon).

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 mit dem obigen Beispiel ist, dass es keine Möglichkeit gibt, dem Benutzer mitzuteilen, was die Zugriffstaste ist! Dies ist besonders problematisch, da die Modifikatoren normalerweise 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 durch Bereitstellung eines leicht zugänglichen Links, der auf Informationen zu den Zugriffstasten der Website verweist). Das Hinzufügen eines Tooltips zur Schaltfläche (mittels des title-Attributs) kann ebenfalls helfen, obwohl dies keine vollständige Lösung für Zugänglichkeitszwecke darstellt.

Deaktivieren und Aktivieren einer Rücksetzschaltfläche

Um eine Rücksetzschaltfläche zu deaktivieren, geben Sie das disabled-Attribut für sie an, wie folgt:

html

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: Weitere Ideen zum Aktivieren und Deaktivieren von Schaltflächen finden Sie auf der Seite <input type="button">.

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)
Implizite ARIA-Rolle	button

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<input type="reset"> HTML-Attributwert

In diesem Artikel

Probieren Sie es aus

Wert

Das value-Attribut festlegen

Das value-Attribut weglassen

Verwendung von Rücksetzknöpfen

Eine einfache Rücksetzschaltfläche

Hinzufügen einer Rücksetztastenkombination

Deaktivieren und Aktivieren einer Rücksetzschaltfläche

Validierung

Beispiele

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN