HTML-Attributwert <input type="reset">

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

Wert

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

Das Attribut value festlegen

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

Das Attribut value weglassen

Wenn Sie value nicht angeben, erhält die Schaltfläche eine Standardbeschriftung (in der Regel „Reset“, dies hängt jedoch vom User Agent ab):

<input type="reset" />

Reset-Schaltflächen verwenden

<input type="reset">-Schaltflächen dienen zum Zurücksetzen von Formularen. Wenn Sie eine eigene Schaltfläche erstellen und ihr Verhalten mit JavaScript anpassen möchten, müssen Sie <input type="button"> oder, besser noch, 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 (oft beim Versuch, auf die Senden-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>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

Sie wird wie folgt dargestellt:

Geben Sie Text in das Textfeld ein und drücken Sie anschließend die Reset-Schaltfläche.

Ein Tastenkürzel zum Zurücksetzen 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 für Ihre Browser- und Betriebssystemkombination erforderlichen Modifikatortasten drücken; eine hilfreiche Übersicht finden Sie unter accesskey).

<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 am obigen Beispiel ist, dass Benutzer nicht erkennen können, welche Zugriffstaste festgelegt wurde. Das gilt besonders, weil die erforderlichen Modifikatortasten in der Regel nicht einheitlich sind, um Konflikte zu vermeiden. Stellen Sie beim Erstellen einer Website sicher, dass Sie diese Information bereitstellen, ohne die Gestaltung der Website zu beeinträchtigen (beispielsweise durch einen leicht zugänglichen Link zu einer Übersicht der Zugriffstasten der Website). Ein Tooltip für die Schaltfläche (über das Attribut title) kann ebenfalls 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 beispielsweise so aus: btn.disabled = true oder btn.disabled = false.

Validierung

Schaltflächen nehmen nicht an der Constraint-Validierung teil; sie haben keinen eigentlichen Wert, der eingeschränkt werden könnte.

Beispiele

Einfache Beispiele finden Sie bereits oben. Zu Reset-Schaltflächen gibt es darüber hinaus kaum etwas zu ergänzen.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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