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

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

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

<input type="reset" />

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:

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

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

<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 wirklichen Wert, der eingeschränkt werden könnte.

Beispiele

Wir haben oben grundlegende Beispiele eingefügt. Es gibt wirklich nichts Weiteres über Zurücksetzen-Schaltflä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