HTML-Attributwert `<input type="button">`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

<input>-Elemente vom Typ button werden als Schaltflächen dargestellt. Wenn ihnen eine Event-Handler-Funktion zugewiesen wird (in der Regel für das click-Event), können sie so programmiert werden, dass sie an beliebiger Stelle einer Webseite benutzerdefinierte Funktionen ausführen.

Hinweis: Obwohl <input>-Elemente vom Typ button weiterhin gültiges HTML sind, wird zum Erstellen von Schaltflächen das <button>-Element bevorzugt. Da der Beschriftungstext eines <button>-Elements zwischen dem öffnenden und dem schließenden Tag steht, können Sie in der Beschriftung HTML verwenden, auch Bilder.

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: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 20%),
    rgb(0 0 0 / 20%) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 60%),
    inset -2px -2px 3px rgb(0 0 0 / 60%);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 60%),
    inset 2px 2px 3px rgb(0 0 0 / 60%);
}

Wert

Schaltfläche mit einem Wert

Das value-Attribut eines <input type="button">-Elements enthält eine Zeichenfolge, die als Beschriftung der Schaltfläche verwendet wird. value liefert die zugängliche Beschreibung der 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" />

Schaltflächen verwenden

<input type="button">-Elemente haben kein Standardverhalten (die verwandten Elemente <input type="submit"> und <input type="reset"> dienen dagegen zum Absenden beziehungsweise Zurücksetzen von Formularen). Damit Schaltflächen eine Aktion ausführen, müssen Sie entsprechenden JavaScript-Code schreiben.

Eine einfache Schaltfläche

Beginnen wir mit einer einfachen Schaltfläche mit einem Event-Handler für click, der unsere Maschine startet (genauer gesagt: Er schaltet zwischen verschiedenen Werten für value 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 ruft eine Referenz auf das HTMLInputElement-Objekt ab, das das <input>-Element im DOM repräsentiert, und speichert sie in der Variablen button. Anschließend wird mit addEventListener() eine Funktion registriert, die ausgeführt wird, wenn auf der Schaltfläche click-Events auftreten.

Tastenkombinationen für Schaltflächen hinzufügen

Mit Tastenkombinationen, auch Zugriffstasten genannt, können Benutzer eine Schaltfläche über eine Taste oder Tastenkombination auslösen. Um einer Schaltfläche eine Tastenkombination zuzuweisen, verwenden Sie – wie bei jedem <input>-Element, für das dies sinnvoll ist – das globale Attribut accesskey.

In diesem Beispiel wird s als Zugriffstaste festgelegt. Sie müssen s zusammen mit den für Ihre Browser-Betriebssystem-Kombination erforderlichen Zusatztasten drücken; eine hilfreiche Übersicht finden Sie unter accesskey.

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 beim obigen Beispiel ist natürlich, dass Benutzer nicht wissen, welche Zugriffstaste festgelegt wurde. Auf einer echten Website müssten Sie diese Information bereitstellen, ohne die Gestaltung der Website zu beeinträchtigen – beispielsweise über einen leicht auffindbaren Link zu einer Übersicht der Zugriffstasten der Website.

Eine Schaltfläche deaktivieren und aktivieren

Um eine Schaltfläche zu deaktivieren, geben Sie für 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 die Schaltfläche zunächst aktiviert. Wenn Sie sie drücken, wird sie mit button.disabled = true deaktiviert. Anschließend wird eine setTimeout()-Funktion verwendet, um die Schaltfläche nach zwei Sekunden wieder zu aktivieren.

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

Den deaktivierten Zustand erben

Wenn das Attribut disabled nicht angegeben ist, erbt die Schaltfläche ihren disabled-Zustand vom übergeordneten Element. So lassen sich Gruppen von Elementen gleichzeitig aktivieren oder deaktivieren: Sie werden in einem Container wie einem <fieldset>-Element zusammengefasst, und disabled wird für den Container gesetzt.

Das folgende Beispiel zeigt, wie das funktioniert. Es ähnelt dem vorherigen Beispiel, mit dem Unterschied, dass beim Drücken der ersten Schaltfläche das Attribut disabled für das <fieldset> gesetzt wird. Dadurch werden alle drei Schaltflächen deaktiviert, bis die Wartezeit 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: Anders als andere Browser behält Firefox den disabled-Zustand eines <input>-Elements auch nach dem Neuladen der Seite bei. Um dies zu umgehen, setzen Sie das Attribut autocomplete des <input>-Elements auf off. (Weitere Informationen finden Sie unter Firefox-Bug 654072.)

Validierung

Schaltflächen nehmen nicht an der Constraint-Validierung teil; sie haben keinen eigentlichen Wert, der Einschränkungen unterliegen könnte.

Beispiele

Das folgende Beispiel zeigt eine sehr einfache Zeichenanwendung, die mit einem <canvas>-Element sowie etwas CSS und JavaScript erstellt wurde (das CSS wird der Kürze halber ausgeblendet). Mit den beiden oberen Steuerelementen können Sie Farbe und Größe des Zeichenstifts auswählen. Beim Klicken auf die Schaltfläche wird eine Funktion aufgerufen, die die Zeichenfläche leert.

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: #cccccc;
  margin: 0;
  overflow: hidden;
}

.toolbar {
  background: #cccccc;
  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"]');

// convert 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 Zeichenfolge, die als Beschriftung der Schaltfläche verwendet wird
Events	[`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)
Implizite ARIA-Rolle	`button`

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML-Attributwert <input type="button">

Das disabled-Attribut setzen

Den deaktivierten Zustand erben

Help improve MDN

HTML-Attributwert `<input type="button">`