<input type="reset">

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

Wenn Sie kein value angeben, erhalten Sie eine Schaltfläche mit der Standardbeschriftung (typischerweise "Zurücksetzen", dies variiert jedoch je nach Benutzeragent):

<input type="reset" />

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

Wir beginnen mit der Erstellung 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>

Dies wird so dargestellt:

Versuchen Sie, etwas Text in das Textfeld einzugeben, und drücken Sie dann die Reset-Schaltfläche.

Um einer Reset-Schaltfläche ein Tastaturkürzel hinzuzufügen — genauso, wie Sie es bei jedem <input> tun würden, bei dem es sinnvoll ist — verwenden Sie das globale Attribut accesskey.

In diesem Beispiel ist r als Zugangstaste angegeben (Sie müssen r plus die spezifischen Modifikatortasten für Ihre Browser-/Betriebssystemkombination 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 der Benutzer nicht wissen kann, was die Zugangstaste ist! Dies ist besonders wahr, da die Modifikatoren typischerweise nicht standardisiert sind, um Konflikte zu vermeiden. Beim Erstellen einer Website stellen Sie sicher, dass Sie diese Informationen auf eine Weise bereitstellen, die das Design der Website nicht beeinträchtigt (z. B. indem Sie einen leicht zugänglichen Link bereitstellen, der auf Informationen darüber verweist, was die Zugangstasten der Website sind). Das Hinzufügen eines Tooltips zur Schaltfläche (mit dem title-Attribut) kann ebenfalls helfen, obwohl es keine vollständige Lösung für Barrierefreiheitszwecke ist.

Um eine Reset-Schaltflä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 das so aus: btn.disabled = true oder btn.disabled = false.

Schaltflächen nehmen nicht an der Einschränkungsvalidierung teil; sie haben keinen echten Wert, der eingeschränkt werden könnte.

Wir haben oben einfache Beispiele eingefügt. Es gibt eigentlich nicht mehr über Reset-Schaltflächen zu sagen.

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