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

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

<input>-Elemente des Typs button werden als Druckknpfe dargestellt, die programmiert werden knnen, um benutzerdefinierte Funktionen berall auf einer Webseite zu steuern. Dies geschieht, indem ihnen eine Ereignis-Handler-Funktion zugewiesen wird (typischerweise fr 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 gltiges HTML sind, ist das neuere <button>-Element nun die bevorzugte Methode, um Schaltflchen zu erstellen. Da der Text des Labels einer <button> zwischen den ffnenden und schlieenden Tags eingefgt wird, knnen Sie HTML im Label enthalten, sogar Bilder.

Wert

Taste mit einem Wert

Das value-Attribut eines <input type="button">-Elements enthlt einen String, der als Beschriftung der Taste dient. Der value liefert die zugngliche Beschreibung fr 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 zurckzusetzen). Um Tasten eine Funktion zuzuweisen, mssen 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 reprsentiert, und speichert diese Referenz in der Variablen button. addEventListener() wird dann verwendet, um eine Funktion festzulegen, die ausgefhrt wird, wenn click-Ereignisse auf der Taste auftreten.

Tastenkombinationen zu Tasten hinzufgen

Tastenkombinationen, auch als Zugangsschlssel und Tastaturquivalente bekannt, ermglichen es dem Benutzer, eine Taste mit einer Taste oder einer Tastenkombination auf der Tastatur auszulsen. Um eine Tastenkombination zu einer Taste hinzuzufgen genau wie bei jedem <input>, bei dem es Sinn macht verwenden Sie das globale Attribut accesskey.

In diesem Beispiel wird s als Zugangsschlssel festgelegt (Sie mssen s plus die jeweiligen Modifikatortasten fr Ihre Browser/OS-Kombination drcken; siehe accesskey fr eine ntzliche 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 natrlich, dass der Benutzer nicht wei, was der Zugangsschlssel ist! Auf einer echten Seite mssten Sie diese Information auf eine Weise bereitstellen, die das Seitendesign nicht strt (zum Beispiel, indem Sie einen leicht zugnglichen Link zur Verfgung stellen, der auf Informationen verweist, welche Zugangsschlssel 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 knnen 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 drcken, 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 mglich, 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, auer dass das disabled-Attribut auf dem <fieldset> festgelegt wird, wenn die erste Taste gedrckt wird dies fhrt 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 behlt 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 fr weitere Details.)

Validierung

Tasten nehmen nicht an der eingeschrnkten Validierung teil; sie haben keinen wirklichen Wert, der eingeschrnkt werden knnte.

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 Grnden der Krze aus). Die beiden oberen Steuerelemente ermglichen es Ihnen, die Farbe und Gre des Zeichenstifts auszuwhlen. Die Taste ruft beim Klicken eine Funktion auf, die die Leinwand lscht.

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)
Untersttzte 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-Kompatibilitt

Siehe auch

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

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden

<input type="button"> HTML-Attributwert

In diesem Artikel

Das disabled-Attribut festlegen

Den deaktivierten Zustand erben

Help improve MDN

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