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.

<doctype> Dokumententyp

CSS - Link farbig unterstreichen

PHP - Bildname aus IMG-Tag ermitteln

JavaScript - Beim Anklicken einer Checkbox den dazugehörenden Text hervorheben

MySQL - Das Datum der letzten Woche anzeigen

Webseiten in Planung
Je tiefer die Homepage konstruiert ist desto größer ist die Gefahr, dass der Besucher die Orientierung verliert. Daraus folgt, dass gleich bei der Planung darauf zu achten ist, mehr in die Breite als in die Tiefe zu strukturieren. Sorgfältige Planung ist das „A und O“ einer guten Homepage, diese entsteht nicht von heute auf Morgen.