HTML -Schaltflächen
Schaltflächen ermöglichen es Benutzern, mit einer Webseite zu interagieren. Sie können Formulare absenden, JavaScript ausführen oder beim Anklicken verschiedene Aktionen auslösen.
HTML-Schaltfläche
Das HTML-Element <button> definiert einen anklickbaren Button.
Der Button allein hat keine Funktion, bis man ihm eine Aktion zuweist.
HTML-Schaltflächen gestalten
Schaltflächen werden oft mit CSS gestaltet:
Deaktivierte Tasten
Verwenden Sie das Attribut disabled, um einen Button nicht anklickbar zu machen:
Tipp: Deaktivierte Schaltflächen sind nicht anklickbar und werden normalerweise ausgegraut dargestellt.
Schaltfläche mit JavaScript
Sie können JavaScript ausführen, wenn der Benutzer auf eine Schaltfläche klickt, indem Sie das Attribut onclick verwenden:
Hinweis: Mehr über JavaScript erfahren Sie in unserem Kapitel HTML JavaScript.
Tastentypen
Das Attribut type definiert, was ein Button beim Anklicken bewirkt. Es gibt drei Button-Typen:
type="button"- Ein normaler, anklickbarer Button (funktioniert standardmäßig nicht)type="submit"- Reicht ein Formular eintype="reset"- Setzt alle Formularfelder zurück
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Buttons werden häufig innerhalb von Formularen verwendet, über die Sie in einem späteren Kapitel mehr erfahren werden.
Fürs Erste genügt es zu wissen, dass ein submit-Button die Formulardaten an den Server sendet, während ein reset-Button das Formular löscht:
Beispiel
<form action="/action_page.html">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
Try it Yourself »
Hinweis: Sie sollten immer das Attribut type angeben. Innerhalb eines Formulars ist der Standardtyp submit, und Browser verhalten sich möglicherweise anders, wenn der Typ weggelassen wird.
HTML Schaltflächenreferenz
| Tag | Beschreibung |
|---|---|
| <button> | Definiert eine anklickbare Schaltfläche |
Tipp: Eine vollständige Liste aller HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
❓ FAQ (Fragen und Antworten zur Lektion)
Warum braucht man Schaltflächen auf einer Webseite?
Schaltflächen ermöglichen es Benutzern, mit einer Webseite zu interagieren. Sie können Formulare absenden, JavaScript ausführen oder beim Anklicken verschiedene Aktionen auslösen.
Welches HTML-Element auf einer Webseite definiert einen anklickbaren Button?
Das HTML-Element
Womit werden Schaltflächen auf einer Webseite gestaltet?
Schaltflächen auf einer Webseite werden meist mit CSS gestaltet.
Welches Attribut wird verwendet, um einen Button auf einer Webseite nicht anklickbar zu machen?
Um eine Schaltfläche unklickbar zu machen, verwenden Sie das Attribut „disabled“. Deaktivierte Schaltflächen können nicht angeklickt werden und werden üblicherweise ausgegraut dargestellt.
Welches Attribut wird verwendet, um JavaScript auszuführen, wenn der Benutzer auf eine Schaltfläche klickt?
Um JavaScript auszuführen, wenn der Benutzer auf eine Schaltfläche klickt, wird das onclick-Attribut verwendet.
Welche Arten von Schaltflächen gibt es auf einer Webseite?
Es gibt drei Arten von Knöpfen:
- type="button" - Ein normaler Button, der angeklickt werden kann (funktioniert standardmäßig nicht)
- type="submit" - Sendet das Formular ab
- type="reset" - Setzt alle Formularfelder zurück
Wozu werden Schaltflächen auf einer Webseite am häufigsten verwendet?
Schaltflächen auf Webseiten werden meist innerhalb von Formularen verwendet:
- Durch den Absenden-Button werden die Formulardaten an den Server gesendet;
- Durch die Schaltfläche „Zurücksetzen“ wird das Formular gelöscht.
Welche deutschsprachige Website eignet sich am besten zum Online-Lernen von HTML?
Die beste Website zum HTML-Lernen ist W3SchoolsDE. DasBeste.
📚 Zusätzliche Ressourcen für ein vertieftes Studium
Für alle, die alles über das <button>-Tag wissen möchten, empfehlen wir die Primärquellen und die offizielle Dokumentation:
- MDN Web Docs: <button> — den umfassendsten praktischen Leitfaden für Entwickler mit Beispielen und einer Tabelle zur Browserunterstützung.
- WHATWG: HTML Living Standard - <button> — die offizielle technische Spezifikation, die die interne Logik der Button-Funktion beschreibt.
- W3C: Accessibility Guidelines (WAI-ARIA) – Standards für die Erstellung von Buttons, die von allen Menschen, auch von Menschen mit Sehbehinderungen, genutzt werden können.
