Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/HTML/Reference/Elements/input/button below:

<input type="button"> - HTML | MDN

Baseline Widely available

<input>-Elemente vom Typ button werden als Druckschaltflächen dargestellt, die programmiert werden können, um benutzerdefinierte Funktionen überall auf einer Webseite zu steuern, wenn sie mit einer Ereignisbehandlungsfunktion (typischerweise für das click-Ereignis) versehen sind.

<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: Während <input>-Elemente vom Typ button immer noch vollständig gültiges HTML sind, ist das neuere <button>-Element jetzt die bevorzugte Methode zur Erstellung von Schaltflächen. Da der Beschriftungstext eines <button> zwischen den öffnenden und schließenden Tags eingefügt wird, können Sie HTML in die Beschriftung einfügen, sogar Bilder.

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

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

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

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

Wir beginnen mit der Erstellung einer grundlegenden Schaltfläche mit einem click-Ereignis-Handler, der unsere Maschine startet (nun, er wechselt den value der Schaltfläche und den Textinhalt des folgenden Absatzes).

<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 festzulegen, die ausgeführt wird, wenn click-Ereignisse auf der Schaltfläche auftreten.

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

In diesem Beispiel ist s als Zugangstaste angegeben (Sie müssen s plus die speziellen Modifikatortasten für Ihre Browser-/OS-Kombination drücken; siehe accesskey für eine nützliche Liste dieser).

<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 wissen wird, was die Zugangstaste ist! Auf einer echten Website müssten Sie diese Information auf eine Weise bereitstellen, die das Design der Website nicht stört (zum Beispiel durch einen leicht zugänglichen Link, der auf Informationen darüber verweist, was die Zugangstasten der Website sind).

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

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

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

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

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

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

<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 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.)

Schaltflächen nehmen nicht an der Einschränkungsvalidierung teil; sie haben keinen echten Wert, um eingeschränkt zu werden.

Das folgende Beispiel zeigt eine sehr einfache Zeichenanwendung, die mit einem <canvas>-Element sowie etwas CSS und JavaScript erstellt wurde (wir verstecken CSS der Kürze halber). Die beiden oberen Steuerungen ermöglichen es Ihnen, die Farbe und Größe des Zeichenstifts auszuwählen. Die Schaltfläche, wenn sie geklickt wird, ruft eine Funktion auf, die die Leinwand löscht.

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

[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4