<input type="reset"> HTML-Attributwert

Probieren Sie es aus

<form>
  <div class="controls">
    <label for="comments">Comments:</label>
    <textarea id="comments" name="comments"></textarea>

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

.controls {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}

label {
  font-size: 0.8rem;
  justify-self: end;
}

input[type="reset"] {
  width: 5rem;
  justify-self: end;
}

input[type="reset"] {
  grid-column: 2;
  grid-row: 2;
}

Wert

Das Attribut value eines <input type="reset">-Elements enthält eine Zeichenfolge, die als Beschriftung der Schaltfläche verwendet wird und ihr eine zugängliche Beschreibung gibt. Schaltflächen wie reset haben ansonsten keinen Wert.

Das value-Attribut festlegen

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

Das value-Attribut weglassen

Wenn Sie keinen value angeben, erhält die Schaltfläche die Standardbeschriftung (normalerweise „Reset“, dies hängt jedoch vom User-Agent ab):

<input type="reset" />

Reset-Schaltflächen verwenden

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

In der Regel sollten Sie Reset-Schaltflächen in Ihren Formularen vermeiden. Sie sind selten nützlich und frustrieren eher Benutzer, die versehentlich darauf klicken (häufig beim Versuch, auf die Submit-Schaltfläche zu klicken).

Eine einfache Reset-Schaltfläche

Beginnen wir mit einer einfachen Reset-Schaltfläche:

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <textarea id="example"></textarea>
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

Sie wird wie folgt dargestellt:

Geben Sie Text in das Textfeld ein und klicken Sie anschließend auf die Reset-Schaltfläche.

Ein Tastenkürzel für die Reset-Schaltfläche hinzufügen

Um einer Reset-Schaltfläche ein Tastenkürzel hinzuzufügen, verwenden Sie das globale Attribut accesskey – wie bei jedem <input>, für das dies sinnvoll ist.

In diesem Beispiel ist r als Zugriffstaste festgelegt. Sie müssen r zusammen mit den jeweiligen Zusatztasten für Ihre Browser- und Betriebssystemkombination drücken. Eine Liste dieser Zusatztasten finden Sie unter accesskey.

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <textarea id="example"></textarea>
  </div>
  <div>
    <input type="reset" value="Reset the form" accesskey="r" />
  </div>
</form>

Das Problem bei diesem Beispiel ist, dass Benutzer nicht erkennen können, welche Zugriffstaste festgelegt wurde. Das gilt insbesondere, weil die Zusatztasten zur Vermeidung von Konflikten in der Regel nicht einheitlich sind. Wenn Sie eine Website erstellen, sollten Sie diese Information so bereitstellen, dass sie das Design der Website nicht beeinträchtigt – beispielsweise über einen leicht zugänglichen Link zu einer Übersicht der Zugriffstasten der Website. Auch ein Tooltip für die Schaltfläche (über das Attribut title) kann helfen, ist im Hinblick auf die Barrierefreiheit aber keine vollständige Lösung.

Eine Reset-Schaltfläche deaktivieren und aktivieren

Um eine Reset-Schaltfläche zu deaktivieren, geben Sie das Attribut disabled an:

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

Validierung

Schaltflächen nehmen nicht an der Einschränkungsvalidierung teil; sie haben keinen Wert, der überprüft werden könnte.

Beispiele

Oben finden Sie bereits einfache Beispiele. Zu Reset-Schaltflächen gibt es darüber hinaus kaum etwas zu sagen.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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