Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/HTML/Reference/Elements/input/reset below:

<input type="reset"> - HTML | MDN

Baseline Widely available

<input>-Elemente vom Typ reset werden als Schaltflächen gerendert, mit einem standardmäßigen click-Ereignishandler, der alle Eingaben im Formular auf ihre Anfangswerte zurücksetzt.

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

Hinweis: Sie sollten normalerweise vermeiden, Rücksetzknöpfe in Ihre Formulare einzufügen. Sie sind selten nützlich und frustrieren eher die Benutzer, die sie versehentlich anklicken (oft während sie versuchen, den Submit-Button zu klicken).

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

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

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

<input type="reset">-Schaltflächen werden verwendet, um Formulare zurückzusetzen. Wenn Sie eine benutzerdefinierte Schaltfläche erstellen möchten und das Verhalten dann mit JavaScript anpassen wollen, sollten Sie <input type="button"> verwenden oder noch besser ein <button>-Element.

Wir beginnen mit der Erstellung eines einfachen Rücksetzknopfes:

<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 wie folgt gerendert:

Versuchen Sie, etwas Text in das Textfeld einzugeben und dann den Rücksetzknopf zu drücken.

Um einer Rücksetzschaltfläche eine Tastenkombination hinzuzufügen – genauso wie bei jedem anderen <input>, bei dem dies sinnvoll ist – verwenden Sie das globale Attribut accesskey.

In diesem Beispiel wird r als Zugriffstaste angegeben (Sie müssen r zusammen mit den jeweiligen Modifikatortasten für Ihre Browser-/OS-Kombination drücken; siehe accesskey für eine nützliche Liste dieser Kombinationen).

<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 der Benutzer keine Möglichkeit hat, zu wissen, was die Zugriffstaste ist! Dies gilt insbesondere, da die Modifikatoren normalerweise 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 stört (z.B. durch einen leicht zugänglichen Link, der auf Informationen über die 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.

Um einen Rücksetzknopf zu deaktivieren, geben Sie das Attribut disabled 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 aus wie btn.disabled = true oder btn.disabled = false.

Hinweis: Weitere Ideen zum Aktivieren und Deaktivieren von Schaltflächen finden Sie auf der Seite <input type="button">.

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 gezeigt. Es gibt nicht wirklich viel mehr über Rücksetzknöpfe zu sagen.

[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4