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

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.

Mehr erfahren
Vollständige Kompatibilität anzeigen

<input>-Elemente des Typs button werden als Druckknöpfe dargestellt, die programmiert werden können, um benutzerdefinierte Funktionen überall auf einer Webseite zu steuern. Dies geschieht, indem 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: 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%);
}

Hinweis: Obwohl <input>-Elemente des Typs button weiterhin absolut gültiges HTML sind, ist das neuere <button>-Element nun die bevorzugte Methode, um Schaltflächen zu erstellen. Da der Text des Labels einer <button> zwischen den öffnenden und schließenden Tags eingefügt wird, können Sie HTML im Label enthalten, sogar Bilder.

Wert

Taste mit einem Wert

Das value-Attribut eines <input type="button">-Elements enthält einen String, der als Beschriftung der Taste dient. Der value liefert die zugängliche Beschreibung für die Taste.

html

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

Taste ohne Wert

Wenn Sie keinen value angeben, erhalten Sie eine leere Taste:

html

<input type="button" />

Verwendung von Tasten

<input type="button">-Elemente haben kein Standardverhalten (ihre Verwandten, <input type="submit"> und <input type="reset"> werden verwendet, um Formulare abzuschicken und zurückzusetzen). Um Tasten eine Funktion zuzuweisen, müssen Sie JavaScript-Code schreiben, der die Arbeit erledigt.

Eine grundlegende Taste

Wir beginnen mit der Erstellung einer grundlegenden Taste mit einem click-Ereignis-Handler, der unsere Maschine startet (genauer gesagt, er schaltet den value der Taste 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> im DOM repräsentiert, und speichert diese Referenz in der Variablen button. addEventListener() wird dann verwendet, um eine Funktion festzulegen, die ausgeführt wird, wenn click-Ereignisse auf der Taste auftreten.

Tastenkombinationen zu Tasten hinzufügen

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

In diesem Beispiel wird s als Zugangsschlüssel festgelegt (Sie müssen s plus die jeweiligen Modifikatortasten 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 mit 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 Seitendesign nicht stört (zum Beispiel, indem Sie einen leicht zugänglichen Link zur Verfügung stellen, der auf Informationen verweist, welche Zugangsschlüssel die Seite verwendet).

Aktivieren und Deaktivieren einer Taste

Um eine Taste zu deaktivieren, geben Sie das globale Attribut disabled an, wie folgt:

html

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

Das disabled-Attribut festlegen

Sie können Tasten zur Laufzeit aktivieren und deaktivieren, indem Sie disabled auf true oder false setzen. In diesem Beispiel ist unsere Taste anfangs aktiviert, aber wenn Sie darauf drücken, wird sie mit button.disabled = true deaktiviert. Eine setTimeout()-Funktion wird dann verwendet, um die Taste nach zwei Sekunden wieder in ihren aktivierten Zustand zu versetzen.

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 disabled-Attribut nicht angegeben wird, erbt die Taste ihren disabled-Zustand von ihrem Elternelement. Dies macht es möglich, Gruppen von Elementen auf einmal zu aktivieren und zu deaktivieren, indem sie in einen Container wie ein <fieldset>-Element eingeschlossen werden und disabled am Container gesetzt wird.

Das folgende Beispiel zeigt dies in Aktion. Dies ist dem vorherigen Beispiel sehr ähnlich, außer dass das disabled-Attribut auf dem <fieldset> festgelegt wird, wenn die erste Taste gedrückt wird — dies führt dazu, dass alle drei Tasten deaktiviert werden, bis der Zwei-Sekunden-Timeout 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 sogar 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

Tasten nehmen nicht an der eingeschränkten Validierung teil; sie haben keinen wirklichen Wert, der eingeschränkt werden könnte.

Beispiele

Das folgende Beispiel zeigt eine sehr einfache Zeichen-App, die mit einem <canvas>-Element und etwas CSS und JavaScript erstellt wurde (wir blenden das CSS aus Gründen der Kürze aus). Die beiden oberen Steuerelemente ermöglichen es Ihnen, die Farbe und Größe des Zeichenstifts auszuwählen. Die Taste ruft beim Klicken 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: #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"]');

// 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 Beschriftungstext der Taste 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)
Implizierte ARIA-Rolle	`button`

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

<input> und die HTMLInputElement-Schnittstelle, die es 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

<input type="button"> HTML-Attributwert

Das disabled-Attribut festlegen

Den deaktivierten Zustand erben

Help improve MDN

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