<input type="reset"> HTML-Attributwert

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

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

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):

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

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

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

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

Validierung

Schaltflächen nehmen nicht an der Beschränkungsvalidierung teil; sie haben keinen wirklichen Wert, der beschränkt werden könnte.

Beispiele

Wir haben oben grundlegende Beispiele aufgenommen. Es gibt wirklich nichts weiter über Rücksetzschaltflächen zu sagen.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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