<input type="button">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<input>-Elemente vom Typ button werden als Schaltflächen dargestellt, die programmiert werden können, um benutzerdefinierte Funktionen überall auf der Webseite zu steuern, wenn ihnen eine Ereignis-Handler-Funktion zugewiesen wird (typischerweise für das click Ereignis).

Probieren Sie es aus

<input class="styled" type="button" value="Add to favorites" />

.styled { border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(220 0 0 / 100%); background-image: linear-gradient( to top left, rgb(0 0 0 / 20%), rgb(0 0 0 / 20%) 30%, rgb(0 0 0 / 0%) ); box-shadow: inset 2px 2px 3px rgb(255 255 255 / 60%), inset -2px -2px 3px rgb(0 0 0 / 60%); } .styled:hover { background-color: rgb(255 0 0 / 100%); } .styled:active { box-shadow: inset -2px -2px 3px rgb(255 255 255 / 60%), inset 2px 2px 3px rgb(0 0 0 / 60%); }

Hinweis: Obwohl <input>-Elemente vom Typ button immer noch vollkommen gültiges HTML sind, ist das neuere <button>-Element jetzt die bevorzugte Methode, um Schaltflächen zu erstellen. Da der Text des Labels eines <button> zwischen den öffnenden und schließenden Tags eingefügt wird, können Sie HTML im Label verwenden, sogar Bilder.

Wert

Schaltfläche mit einem Wert

Das value-Attribut eines <input type="button">-Elements enthält eine Zeichenkette, die als Label der Schaltfläche verwendet wird. Der value bietet die zugängliche Beschreibung für die Schaltfläche.

html

<input type="button" value="Click Me" />

Schaltfläche ohne Wert

Wenn Sie keinen value angeben, erhalten Sie eine leere Schaltfläche:

html

<input type="button" />

Verwendung von Schaltflächen

<input type="button">-Elemente haben kein Standardverhalten (ihre Verwandten, <input type="submit"> und <input type="reset">, werden verwendet, um Formulare abzusenden und zurückzusetzen). Um die Schaltflächen etwas tun zu lassen, müssen Sie JavaScript-Code schreiben, der die Arbeit erledigt.

Eine einfache Schaltfläche

Wir beginnen mit der Erstellung einer einfachen Schaltfläche mit einem click-Ereignis-Handler, der unsere Maschine startet (bzw. den value der Schaltfläche und den Textinhalt des folgenden Absatzes umschaltet):

html

<form> <input type="button" value="Start machine" /> </form> <p>The machine is stopped.</p>

const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() { if (button.value === "Start machine") { button.value = "Stop machine"; paragraph.textContent = "The machine has started!"; } else { button.value = "Start machine"; paragraph.textContent = "The machine is stopped."; } }

Das Skript erhält eine Referenz auf das HTMLInputElement-Objekt, das das <input> im DOM darstellt, und speichert diese Referenz in der Variablen button. addEventListener() wird dann verwendet, um eine Funktion zu etablieren, die ausgeführt wird, wenn click-Ereignisse auf der Schaltfläche auftreten.

Hinzufügen von Tastenkombinationen zu Schaltflächen

Tastenkombinationen, auch als Zugriffsschlüssel und Tastaturäquivalente bekannt, ermöglichen dem Benutzer das Auslösen einer Schaltfläche über eine Taste oder Kombination von Tasten auf der Tastatur. Um einer Schaltfläche eine Tastenkombination hinzuzufügen – genau so, wie Sie es bei jedem <input> tun würden, bei dem es sinnvoll ist – verwenden Sie das globale Attribut accesskey.

In diesem Beispiel ist s als Zugriffsschlüssel angegeben (Sie müssen s plus die besonderen Modifier-Tasten für Ihre Browser-/Betriebssystem-Kombination drücken; siehe accesskey für eine nützliche Liste dieser).

html

<form> <input type="button" value="Start machine" accesskey="s" /> </form> <p>The machine is stopped.</p>

const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() { if (button.value === "Start machine") { button.value = "Stop machine"; paragraph.textContent = "The machine has started!"; } else { button.value = "Start machine"; paragraph.textContent = "The machine is stopped."; } }

Hinweis: Das Problem mit dem obigen Beispiel ist natürlich, dass der Benutzer nicht weiß, was der Zugriffsschlüssel ist! Auf einer realen Seite müssten Sie diese Information auf eine Weise bereitstellen, die das Seitendesign nicht beeinträchtigt (zum Beispiel durch einen leicht zugänglichen Link, der auf Informationen zu den Zugriffsschlüsseln der Seite verweist).

Deaktivieren und Aktivieren einer Schaltfläche

Um eine Schaltfläche zu deaktivieren, geben Sie das globale Attribut disabled dafür an, wie folgt:

html

<input type="button" value="Disable me" disabled />

Setzen des disabled-Attributs

Sie können Schaltflächen zur Laufzeit aktivieren und deaktivieren, indem Sie disabled auf true oder false setzen. In diesem Beispiel beginnt unsere Schaltfläche im aktivierten Zustand, aber wenn Sie sie drücken, wird sie durch button.disabled = true deaktiviert. Eine setTimeout()-Funktion wird dann verwendet, um die Schaltfläche nach zwei Sekunden wieder in ihren aktivierten Zustand zurückzusetzen.

html

<input type="button" value="Enabled" />

const button = document.querySelector("input"); button.addEventListener("click", disableButton); function disableButton() { button.disabled = true; button.value = "Disabled"; setTimeout(() => { button.disabled = false; button.value = "Enabled"; }, 2000); }

Vererbung des deaktivierten Status

Wenn das disabled-Attribut nicht angegeben ist, erbt die Schaltfläche ihren disabled-Status von ihrem Elternelement. Damit ist es möglich, Gruppen von Elementen auf einmal zu aktivieren oder zu deaktivieren, indem Sie sie in einem Container wie einem <fieldset>-Element umschließen und dann disabled auf den Container setzen.

Das unten stehende Beispiel zeigt dies in Aktion. Dies ist dem vorherigen Beispiel sehr ähnlich, außer dass das disabled-Attribut auf dem <fieldset> gesetzt wird, wenn die erste Schaltfläche gedrückt wird — dies führt dazu, dass alle drei Schaltflächen deaktiviert werden, bis die zwei Sekunden Timeout vergangen sind.

html

<fieldset> <legend>Button group</legend> <input type="button" value="Button 1" /> <input type="button" value="Button 2" /> <input type="button" value="Button 3" /> </fieldset>

const button = document.querySelector("input"); const fieldset = document.querySelector("fieldset"); button.addEventListener("click", disableButton); function disableButton() { fieldset.disabled = true; setTimeout(() => { fieldset.disabled = false; }, 2000); }

Hinweis: Anders als andere Browser behält Firefox den disabled-Zustand eines <input>-Elements auch nach dem Neuladen der Seite bei. Als Workaround setzen Sie das autocomplete-Attribut des <input>-Elements auf off. (Siehe Firefox bug 654072 für weitere Details.)

Validierung

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

Beispiele

Das unten stehende Beispiel zeigt eine sehr grundlegende Zeichenanwendung, die mit einem <canvas>-Element und etwas CSS und JavaScript erstellt wurde (wir blenden das CSS der Kürze halber aus). Die beiden oberen Bedienelemente ermöglichen Ihnen, die Farbe und Größe des Zeichenstiftes auszuwählen. Die Schaltfläche, wenn sie angeklickt wird, ruft eine Funktion auf, die die Leinwand löscht.

html

<div class="toolbar"> <input type="color" aria-label="select pen color" /> <input type="range" min="2" max="50" value="30" aria-label="select pen size" /><span class="output">30</span> <input type="button" value="Clear canvas" /> </div> <canvas class="myCanvas"> <p>Add suitable fallback here.</p> </canvas>

body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; }

const canvas = document.querySelector(".myCanvas"); const width = (canvas.width = window.innerWidth); const height = (canvas.height = window.innerHeight - 85); const ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); const colorPicker = document.querySelector('input[type="color"]'); const sizePicker = document.querySelector('input[type="range"]'); const output = document.querySelector(".output"); const clearBtn = document.querySelector('input[type="button"]'); // covert degrees to radians function degToRad(degrees) { return (degrees * Math.PI) / 180; } // update size picker output value sizePicker.oninput = () => { output.textContent = sizePicker.value; }; // store mouse pointer coordinates, and whether the button is pressed let curX; let curY; let pressed = false; // update mouse pointer coordinates document.onmousemove = (e) => { curX = e.pageX; curY = e.pageY; }; canvas.onmousedown = () => { pressed = true; }; canvas.onmouseup = () => { pressed = false; }; clearBtn.onclick = () => { ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); }; function draw() { if (pressed) { ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc( curX, curY - 85, sizePicker.value, degToRad(0), degToRad(360), false, ); ctx.fill(); } requestAnimationFrame(draw); } draw();

Technische Zusammenfassung

Wert	Eine Zeichenkette, die als Label der Schaltfläche verwendet wird
Ereignisse	[`click`](/de/docs/Web/API/Element/click_event)
Unterstützte gewöhnliche Attribute	`type` und `value`
IDL-Attribute	`value`
DOM-Schnittstelle	[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)
Methoden	Keine
Implizite ARIA-Rolle	`button`

Spezifikationen

Specification
HTML # button-state-(type=button)

Browser-Kompatibilität

Siehe auch

<input> und die HTMLInputElement-Schnittstelle, die es implementiert.
Das modernere <button>-Element.