Das Tag <button> wird für die Erstellung von interaktiven Buttons auf der Webseite verwendet. Im Unterschied zum ordinären Tag <input>, mit dem man Buttons erstellen kann, kann der Inhalt des Tages <button> nicht nur ein Text, sondern auch ein Foto sein.

Wenn Sie ein Button im HTML-Format erstellen möchten, verwenden Sie das Element <input>, da die Browser den Inhalt des Tages <button> unterschiedlich anzeigen.

Syntax

Der Inhalt des Tages wird zwischen den Start- <button> und Endtags </button> geschrieben.

Beispiel

<!DOCTYPE html>
<html>
   <head>
       <title>Der Titel des Dokuments</title>
   </head>
   <body>
	<h1>Hier wird unser Button sein</h1>
	<button type="button">Klicken</button>
   </body>
</html>

Ergebnis

button beispiel

Gebrauch von CSS-Stilen

Sie können CSS-Stile auf das Tag <button> anwenden, um das Aussehen der Schaltfläche, ihre Größe, Farbe, Textschriftart usw. zu ändern.

Beispiel

<!DOCTYPE html>
<html>
   <head>
       <title>Der Titel des Dokuments</title>
   </head>
  <body>
    Normale Taste
    <button type="button">Zum Papierkorb hinzufügen</button>
    <hr />
   Taste mit rotem Text
    <button type="button" style="color: red;"><b>HTML-Buch</b></button>
    <hr />
    Taste mit vergrößerter Schriftgröße
    <button type="button" style="font: bold 14px Arial;">Buch herunterladen </button><br />
  </body>
</html>

Ergebnis

button beispiel

Attribute

Das Tag <button> hat keine obligatorischen Attribute, aber wir empfehlen Ihnen, immer das Attribut type=”button” zu verwenden, wenn das Tag als einfacher Button benutzt wird.
Attribut Wert Beschreibung
autofocus autofocus Es bezeichnet dem Browser, dass der Button nach dem Hochladen der Seite einen Fokus bekommen soll.
disabled disabled Es deaktiviert den Button. (Es wird in dem Fall benutzt, wenn die Taste nach der Erfüllung irgendeiner Handlung aktiviert werden muss.)
form form_id Es gibt ein oder mehrere Formulare an, zu denen der Button gehört. Wenn der Button mehrere Formulare hat, müssen deren Bezeichner (form_id) durch Leerzeichen getrennt werden.
formaction URL Es bestimmt die Adresse, an die die Formangaben beim Drücken der Taste abgesendet werden. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet).
formenctype application/x-www-form-
urlencoded
multipart/form-data
text/plain
Es bestimmt die Methode der Codierung vor dem Absenden an Server. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet). Alle Symbolen werden vor dem Absenden codiert (automatisch). Die Symbole werden nicht codiert, werden die Leertasten mit "+" ersetzt, aber die Symbole werden codiert.
formmethod Es bestimmt die HTTP-Anfragemethoden, die beim Absenden der Formdaten verwendet wird. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet.)
get Es übergibt die Formangaben in der Adressenzeile («Name=Wert»), die zur URL der Seite nach dem Fragezeichen hinzugefügt und untereinander durch das Et-Zeichen (&) geteilt werden. (http://example.ru/doc/?name=Ivan&password=vanya)
post Der Browser verbindet sich mit dem Server und sendet die Daten zur Bearbeitung ab.
formnovalidate formnovalidate Es annuliert die Überprüfung der Formangaben auf Fehler. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet).
formtarget Es bestimmt, wo die Antwort nach dem Absenden der Form angezeigt soll. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet).
blank Es eröffnet die Antwort im neuen Fenster.
self Es eröffnet die Antwort im aktuellen Fenster.
parent Es eröffnet die Antwort im Parentframe.
top Es eröffnet die Antwort mit der ganzen Breite des Fensters.
name name Es bestimmt den Namen der Taste.
type Es bestimt den Tastentyp.
button Einfache Taste
reset Eine Taste, die die ausgefüllten Daten in der Form löscht.
submit Eine Taste für die Absendung der Formdaten.
value text Es bestimmt den Wert der Taste.

Das Tag <button> unterschtützt Globale Attribute und Globale Eventhandler.

Browser-Support

chrome edge firefox safari opera

Übe dein Wissen

Was ist der HTML <button> tag und wie wird er verwendet?
Finden Sie das nützlich?