<input type="reset">

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

Wenn Sie keinen value angeben, erhalten Sie eine Schaltfläche mit der Standardbeschriftung (typischerweise "Reset", aber dies variiert je nach Benutzeragent):

<input type="reset" />

<input type="reset">-Schaltflächen werden zum Zurücksetzen von Formularen verwendet. Wenn Sie eine benutzerdefinierte Schaltfläche erstellen und das Verhalten mit JavaScript anpassen möchten, sollten Sie <input type="button"> oder noch besser ein <button>-Element verwenden.

Beginnen wir mit der Erstellung 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 dargestellt:

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

Um einem Zurücksetzen-Schaltfläche ein Tastaturkürzel hinzuzufügen – genauso wie bei jedem <input>, bei dem dies sinnvoll ist – verwenden Sie das globale Attribut accesskey.

In diesem Beispiel wird r als Zugangstaste festgelegt (Sie müssen r zusammen mit den spezifischen Modifikator-Tasten 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 der Benutzer nicht weiß, welche Zugangstaste es ist! Dies ist besonders problematisch, da die Modifikatoren typischerweise 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 indem Sie einen leicht zugänglichen Link bereitstellen, der auf Informationen über die Zugangstasten 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.

Um eine Zurücksetzen-Schaltfläche zu deaktivieren, geben Sie das disabled-Attribut 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 dies so aus: btn.disabled = true oder btn.disabled = false.

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

Wir haben oben grundlegende Beispiele beigefügt. Es gibt wirklich nichts Weiteres zu Zurücksetzen-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