Buttons in HTML? Lerne es in nur 5 Minuten!

HTML Button

Jede Webseite benötigt Buttons, um interaktionen mit dem Benutzer zu bekommen und deshalb solltest du dir auch umbedingt dieses 5 minütige Tutorial über HTML Buttons anschauen.

Buttons können für verschiedenste Dinge genutzt werden wie z.B. bei einem Formular oder beim Popup, um mal ein paar zu nennen.

Lass uns direkt starten, denn ich möchte dir wirklich in dieser Zeit einiges beibringen.

Dein erster Button

Als erstes solltet wir beispielhaft ein Button erzeugen ohne schnick schnack:

<button>Absenden</button>

Wie man gut erkennen kann wird einfach ein „button“ Tag genutzt. Es ist definitiv kein Designmonster, aber dazu kommen wir später 😉

Der nächste Step solltet es sein, denn Button mal zu verlinken…

Verlinken? einfach!

Ok… ok… ich versteh… du willst wissen wie man den Button verlinkt und das zu recht, also lass es mir dir zeigen:

<a href="https://guthdev.de"><button>GuthDev</button></a>

Wenn du bereits dich mit Verlinkung auskennst, dann wird das nichts neues sein. Ansonsten wie immer wird ein „a“ Tag um den verlinken Bereich (in unserem Fall: der Button) gesetzt.

Somit weiß der Browser bescheid, dass der Button eine Verlinkung hat.

Es gibt auch noch verschiedene Typen, die die Funktionsweise des Buttons verändert und damit werden wir uns als nächstes beschäftigen.

Verschiedene Typen

Bei Buttons gibt es den Parameter „type“, womit du 3 verschiedene Funktionszustände setzen kannst.

Welche es sind sehen wir uns jetzt an:

Typ = Button

Als ersten Typ schauen wir uns „Button“ an:

<button type="button">Button</button>

Dieser Typ signalisiert, dass dieser Button nur clientseitige Aktionen machen soll.

Clientseitige bedeutet, dass eine Funktion nur beim Client (deinem Browser) ausgeführt wird.Meistens sind damit Javascript Funktionen gemeint.

Die letzten zwei Typen sind sehr interessant sobald du ein Formular nutzt.

Typ = Submit

Beim Typ Submit kann man eventuell am Namen schon erkennen, dass etwas abgesendet wird. Bevor ich zur Erklärung komme, zeige ich dir ein Beispiel:

<button type="submit">Absenden</button>

Vorallem früher, aber heute auch noch oft genutzt wird bei einem Formular eine Kombination aus HTML und PHP genutzt.

Der Grund dafür ist, dass beim absenden deiner Daten, die du im Formular eingetragen hast, der Serverseitige Part sie verarbeitet und in eine Datenbank schreibt.

Wie du vielleicht schon herauslesen konntest, kann man mit diesem Typ dem Brower mitteilen, die Daten an seinen Server zu schicken.

Typ = Reset

Zuguterletzt noch den Typen „reset“, womit du deine Formularfelder zurücksetzen kannst:

<button type="reset">Reset</button>

Ganz praktisch und sollte bei keinem Formular fehlen.

Pimp your Button

Achja ich hatte dir ja noch etwas versprochen 😉

Natürlich kannst du deine Buttons designtechnisch noch anpassen. Dies ist wie immer nur durch CSS möglich.

Hier ist eine Video, das dir paar Basics zeigt:

>