<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 vom Typ reset werden als Schaltflächen dargestellt, mit einem Standard-click-Ereignishandler, der alle Eingaben im Formular auf ihre Anfangswerte 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, Zurücksetzen-Schaltflächen in Ihre Formulare aufzunehmen. Sie sind selten nützlich und führen eher dazu, dass Benutzer frustriert werden, wenn sie versehentlich darauf klicken (oft beim Versuch, die Absende-Schaltfläche zu drücken).

Wert

Das value-Attribut eines <input type="reset">-Elements enthält einen String, der als Beschriftung der Schaltfläche verwendet wird, um der Schaltfläche eine zugängliche Beschreibung bereitzustellen. Schaltflächen wie reset haben sonst keinen Wert.

Das "value"-Attribut setzen

html

Das "value"-Attribut weglassen

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

html

Verwendung von Zurücksetzen-Schaltflächen

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

Eine einfache Zurücksetzen-Schaltfläche

Wir beginnen mit 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 gerendert:

Versuchen Sie, Text in das Textfeld einzugeben und anschließend die Zurücksetzen-Schaltfläche zu drücken.

Hinzufügen einer Tastenkombination für die Zurücksetzen-Schaltfläche

Um einer Zurücksetzen-Schaltfläche eine Tastenkombination hinzuzufügen — so wie Sie es mit jedem <input> tun würden, für das es Sinn macht — verwenden Sie das globale accesskey-Attribut.

In diesem Beispiel wird r als Zugriffstaste angegeben (Sie müssen r plus die speziellen Modifikatortasten 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 es für den Benutzer keine Möglichkeit gibt zu wissen, wie die Zugriffstaste ist! Dies ist besonders problematisch, da die Modifikatoren typischerweise 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 beeinträchtigt (zum Beispiel durch einen leicht zugänglichen Link, der auf Informationen zu den 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.

Deaktivieren und Aktivieren einer Zurücksetzen-Schaltfläche

Um eine Zurücksetzen-Schaltfläche zu deaktivieren, geben Sie das disabled-Attribut 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 das 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	Ein String, der 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

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

Das "value"-Attribut weglassen

Verwendung von Zurücksetzen-Schaltflächen

Eine einfache Zurücksetzen-Schaltfläche

Hinzufügen einer Tastenkombination für die Zurücksetzen-Schaltfläche

Deaktivieren und Aktivieren einer Zurücksetzen-Schaltfläche

Validierung

Beispiele

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN