HTML - Element: <button>

Mit dem <button>-Tag erstellen Sie einen anklickbaren Button. Solche Buttons sind flexibler als herkömmliche Buttons, denn sie dürfen auch einen durch HTML definierten Inhalt haben, etwa eine Grafik.
Mit dem Event-Handler Attribut onclick="" können diese Buttons eine JavaScript-Funktion ausführen.

<!DOCTYPE html>
<html>
<head>
 <title>Button mit Funktion</title>
</head>
<body>

<h1>Button mit Funktion</h1>

<button type="button" onclick="alert('Hallo Besucher!');">
<img src="logo.png" width="38" height="38" alt="Logo">
<br>Webbausteine.de
</button>

</body>
</html>

Beispiel anzeigen

Attribute

name="testi" - Bezeichnername.
type="button" - Button um eine Aktion auszuführen.
type="submit" - Button um das Formular abzusenden (Standardeinstellung).
type="submit" formaction="edit.php" - Button um das Formular zur Datei: edit.php zu senden *1.
type="reset" - Button um das Formular zurück zu setzen (Eingegebene Daten werden verworfen).
value="Mein Test" - Inhalt der gesendet werden soll.
value="Mein Test" - Inhalt der gesendet werden soll.

➤ Sie sollten auf Reset-Buttons (type="reset") weitestgehend verzichten: Wer ein Formular nicht absenden möchte, kann die Seite einfach verlassen. Wer jedoch versehentlich ein umfangreiches Formular leert, obwohl er es eigentlich absenden wollte, ist zu Recht frustriert.

<button name="action" value="1">Erstellen</button>
<button name="action" value="2">Aktualisieren</button>

*1

<form action="newuser.php" method="post">
  <button type="submit"> Neuer Benutzer </button>
  <button type="submit" formaction="delete.php"> Löschen </button>
  <button type="submit" formaction="edit.php"> Bearbeiten </button>
…

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<header> Kopfbereich

CSS - Container mit Eselsohren

PHP - Dateinamen trennen

JavaScript - JavaScript-Version des Browsers anzeigen

MySQL - Den nächsten und vorherigen Datensatz ermitteln