<input type="button">

<input>-Elemente des Typs button werden als einfache Drucktasten gerendert, die programmiert werden können, um benutzerdefinierte Funktionen überall auf einer Webseite zu steuern, wenn eine Event-Handler-Funktion (typischerweise für das click-Ereignis) zugewiesen wird.

Probieren Sie es aus

Hinweis: Während <input>-Elemente des Typs button immer noch vollkommen gültiges HTML sind, wird mittlerweile das neuere <button>-Element bevorzugt, um Schaltflächen zu erstellen. Da der Text des Labels eines <button> zwischen dem öffnenden und schließenden Tag eingefügt wird, können Sie HTML im Label verwenden, sogar Bilder.

Wert

Taste mit einem Wert

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

html

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

Taste 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 abzuschicken bzw. zurückzusetzen). Damit Schaltflächen eine Funktion haben, müssen Sie JavaScript-Code schreiben, der die Arbeit erledigt.

Eine einfache Taste

Wir beginnen mit der Erstellung einer einfachen Schaltfläche mit einem click-Event-Handler, der unsere Maschine startet (genauer gesagt, er schaltet den value der Schaltfläche und den Textinhalt des folgenden Absatzes um):

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. Mit addEventListener() wird dann eine Funktion eingerichtet, die ausgeführt wird, wenn click-Ereignisse auf der Schaltfläche auftreten.

Hinzufügen von Tastenkombinationen zu Schaltflächen

Tastenkombinationen, auch bekannt als Zugangsschlüssel und Tastaturäquivalente, ermöglichen es dem Benutzer, eine Taste mit einer oder mehreren Tasten auf der Tastatur auszulösen. Um einer Schaltfläche eine Tastenkombination hinzuzufügen – genau wie bei jedem <input>, bei dem es sinnvoll ist – verwenden Sie das globale Attribut accesskey.

In diesem Beispiel wird s als Zugangsschlüssel festgelegt (Sie müssen s zusammen mit den speziellen Modifikator-Tasten für Ihre Browser/OS-Kombination drücken; siehe accesskey für eine nützliche Liste dieser Kombinationen).

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 bei dem obigen Beispiel ist natürlich, dass der Benutzer nicht weiß, was der Zugangsschlüssel ist! Auf einer echten Seite müssten Sie diese Information auf eine Weise bereitstellen, die das Design der Seite nicht stört (zum Beispiel durch einen leicht zugänglichen Link, der auf Informationen über die Zugangsschlüssel der Seite hinweist).

Aktivieren und Deaktivieren einer Schaltfläche

Um eine Schaltfläche zu deaktivieren, geben Sie das globale Attribut disabled an:

html

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

Das disabled-Attribut setzen

Sie können Schaltflächen zur Laufzeit aktivieren und deaktivieren, indem Sie disabled auf true oder false setzen. In diesem Beispiel ist unsere Taste zunächst aktiviert, aber wenn Sie sie drücken, wird sie mit button.disabled = true deaktiviert. Eine setTimeout()-Funktion wird dann verwendet, um die Taste nach zwei Sekunden wieder in den 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);
}

Vererben des disabled-Status

Wenn das disabled-Attribut nicht angegeben ist, erbt die Schaltfläche ihren disabled-Status vom Elternelement. Dadurch ist es möglich, Gruppen von Elementen gleichzeitig zu aktivieren und zu deaktivieren, indem sie in einem Container wie einem <fieldset>-Element eingeschlossen werden und disabled auf dem Container gesetzt wird.

Das untenstehende Beispiel zeigt dies in Aktion. Es ist dem vorherigen Beispiel sehr ähnlich, außer dass bei Drücken der ersten Schaltfläche das disabled-Attribut auf dem <fieldset> gesetzt wird – dies führt dazu, dass alle drei Schaltflächen deaktiviert werden, bis der Timeout von zwei Sekunden abgelaufen ist.

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: Im Gegensatz zu anderen Browsern speichert Firefox den disabled-Status eines <input>-Elements auch nachdem die Seite neu geladen wurde. Um dies zu umgehen, setzen Sie das autocomplete-Attribut des <input>-Elements auf off. (Siehe Firefox-Fehler 654072 für mehr Details.)

Validierung

Schaltflächen nehmen nicht an der Constraint-Validierung teil; sie haben keinen wirklichen Wert, der eingeschränkt werden könnte.

Beispiele

Das untenstehende Beispiel zeigt eine sehr einfache Zeichenanwendung, die mit einem <canvas>-Element und etwas einfachem CSS und JavaScript erstellt wurde (wir verbergen das CSS aus Gründen der Übersichtlichkeit). Die zwei oberen Steuerungen ermöglichen die Auswahl der Farbe und der Größe des Zeichenstifts. Die Schaltfläche ruft bei Klick eine Funktion auf, die das Zeichenfeld 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	Ein String, der als Beschriftung der Schaltfläche verwendet wird
Ereignisse	[`click`](/de/docs/Web/API/Element/click_event)
Unterstützte allgemeine Attribute	`type` und `value`
IDL-Attribute	`value`
DOM-Schnittstelle	[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)
Methoden	Keine
Implizite ARIA-Rolle	`button`

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

<input> und die HTMLInputElement-Schnittstelle, die es implementiert.
Das modernere <button>-Element.
Kompatibilität von CSS-Eigenschaften