HTML <button>-Tag
Das <button>-Element wird verwendet, um anklickbare Buttons auf der Webseite zu erstellen. Der Unterschied zwischen diesen Elementen und Buttons, die mit dem <input>-Tag erstellt werden, besteht darin, dass Sie Inhalte (Bilder oder Text) in das <button>-Element einfügen können.
TIP
Verwenden Sie das <input>-Element, um einen Button innerhalb eines HTML-Formulars zu definieren, da Browser den Inhalt des <button>-Tags unterschiedlich darstellen.
Syntax
Das <button>-Element wird immer als öffnendes und schließendes Tagpaar verwendet. Der Inhalt wird zwischen dem öffnenden (<button>) und dem schließenden (</button>) Tag geschrieben.
Beispiel für das HTML <button>-Tag:
Beispiel für das HTML <button>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>CSS-Stile verwenden
Sie können CSS-Stile auf das <button>-Element anwenden, um das Aussehen des Buttons, seine Größe, Farbe, Text Schriftart usw. zu ändern.
Beispiel für das <button>-Tag mit CSS-Stilen:
Beispiel für das HTML <button>-Tag mit CSS-Eigenschaften für Farbe und Schriftart
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" style="color: red;"><b>HTML Book </b></button>
<hr />
Button with increased font size
<button type="button" style="font: bold 14px Arial;">Download the book </button><br />
</body>
</html>Ergebnis
Attribute
TIP
Das <button>-Element hat keine erforderlichen Attribute; wir empfehlen jedoch, immer das Attribut type="button" zu verwenden, wenn das Tag als normaler Button dient.
Hinweis: Wenn das type-Attribut weggelassen wird und der Button sich in einem HTML-Formular befindet, wird standardmäßig type="submit" verwendet.
Attribute
| Attribute | Wert | Beschreibung |
|---|---|---|
autofocus | autofocus | Gibt an, dass der Button nach dem Laden der Seite den Fokus erhalten soll. |
disabled | disabled | Deaktiviert den Button. (Wird verwendet, wenn der Button nach einer bestimmten Aktion aktiv werden soll.) |
form | form_id | Gibt eines oder mehrere Formulare an, zu denen der Button gehört. Wenn der Button zu mehreren Formularen gehört, müssen deren Kennungen (form_id) durch Leerzeichen getrennt werden. |
formaction | URL | Definiert die Adresse, an die die Formulardaten nach dem Klicken auf den Button gesendet werden. (Nur für Buttons mit dem Attribut type="submit" verwendet.) |
formenctype | application/x-www-form-urlencoded | Definiert, wie die Formulardaten beim Absenden eines Formulars codiert werden sollen. (Nur für type="submit" verwendet.) Alle Zeichen werden vor dem Absenden eines Formulars codiert (Standardwert). |
multipart/form-data | Codiert Daten als multipart MIME. | |
text/plain | Leerzeichen werden durch das Zeichen "+" ersetzt, aber Symbole werden nicht codiert. | |
formmethod | get | Definiert die Methode der HTTP-Anfrage, die beim Absenden eines Formulars verwendet wird (nur für type="submit"). Überträgt die Formulardaten in der Adressleiste ("name = value"), die nach dem Fragezeichen an die URL der Seite angehängt und durch ein kaufmännisches Und (&) getrennt werden. |
post | Der Browser kommuniziert mit dem Server und sendet die Daten zur Verarbeitung. | |
formnovalidate | formnovalidate | Gibt an, dass die Formulardaten beim Absenden nicht validiert werden sollen (nur für type="submit"). |
formtarget | _blank | Gibt an, wo die Antwort nach dem Absenden des Formulars angezeigt wird (nur für type="submit"). Öffnet die Antwort in einem neuen Fenster. |
_self | Öffnet die Antwort im aktuellen Fenster. | |
_parent | Öffnet die Antwort im übergeordneten Frame. | |
_top | Öffnet die Antwort im Vollbildfenster. | |
name | name | Definiert den Namen des Buttons. |
type | button | Definiert einen normalen Button. |
reset | Button, der das Formular von den Eingabedaten löscht. | |
submit | Button zum Senden von Formulardaten. | |
value | text | Definiert den Wert des Buttons. |
Das <button>-Element unterstützt auch die Globalen Attribute und die Ereignisattribute.
So fügen Sie einem Button mit einem Bild Alternativtext hinzu?
Um einem Button mit einem Bild Alternativtext hinzuzufügen, können Sie das alt-Attribut verwenden. Hier ist ein Beispiel:
So fügen Sie einem Button mit einem Bild Alternativtext hinzu?
<button type="button">
<img src="button-image.png" alt="Button Label">
</button>In diesem Beispiel wurde das alt-Attribut zum img-Element innerhalb des button-Elements hinzugefügt. Der Wert des alt-Attributs sollte eine kurze Beschreibung des Bildes sein, die von Screenreadern anstelle des eigentlichen Bildes vorgelesen wird.
So fügen Sie einem Button einen Link hinzu?
Um einen anklickbaren Link zu erstellen, der wie ein Button aussieht, verwenden Sie ein <a>-Element, das mit CSS gestylt ist. Das Einbetten eines <button>-Elements in ein <a>-Element ist in HTML5 ungültig. Hier ist der korrekte Ansatz:
So fügen Sie einem Button einen Link hinzu?
<a href="https://example.com" class="button-link">
Button Label
</a>In diesem Beispiel ist das <a>-Element so gestylt, dass es einem Button ähnelt. Wenn der Benutzer darauf klickt, wird er zur verlinkten URL weitergeleitet.
Praxis
Was sind einige Eigenschaften und Verwendungszwecke des HTML <button>-Tags?