HTML Button Typen

Absenden, Zurücksetzen, Aktion ausführen – HTML Button Typen machen's möglich! Es gibt drei Haupttypen: submit, reset und button. In diesem Tutorial lernst du, wann du welchen verwendest.

Einführung in das HTML Button Tutorial

Was du über HTML Button Typen lernst

Die drei Button-Typen:

• type="submit" – sendet Formulardaten ab
• type="reset" – setzt Formular zurück
• type="button" – macht nichts (für JavaScript)

Warum Button Typen wichtig sind

Ein Button ohne type verhält sich in Formularen wie type="submit" – das kann ungewollte Absendevorgänge auslösen! Setze den Typ immer explizit.

Voraussetzungen

Grundlegende HTML Kenntnisse

Du solltest HTML-Formulare verstehen. Falls nicht, hol das kurz nach!

Entwicklungsumgebung

Texteditor und Browser – mehr brauchst du nicht.

Schritt-für-Schritt-Anleitung

Schritt 1: Grundlegende Button Syntax

<button>Klick mich</button>

Der Text zwischen den Tags erscheint auf dem Button.

Schritt 2: Button Type Attribut

<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>
<button type="button">Aktion ausführen</button>

Schritt 3: Submit Button

Sendet Formulardaten an den Server:

<form action="/login" method="post">
    <input type="text" name="username" placeholder="Benutzername">
    <input type="password" name="password" placeholder="Passwort">
    <button type="submit">Anmelden</button>
</form>

Schritt 4: Reset Button

Setzt alle Formularfelder zurück:

<form>
    <input type="text" name="email" placeholder="E-Mail">
    <textarea name="message" placeholder="Nachricht"></textarea>
    <button type="reset">Formular zurücksetzen</button>
    <button type="submit">Nachricht senden</button>
</form>

Vorsicht: Nutzer können versehentlich ihre Eingaben löschen!

Schritt 5: Standard Button

Für JavaScript-Aktionen – tut von sich aus nichts:

<button type="button" onclick="alert('Hallo Welt!')">Begrüßung anzeigen</button>
<button type="button" onclick="window.print()">Seite drucken</button>

[bildapi id="123456" prompt="A colorful illustration showing three different HTML button types (submit, reset, and button) with arrows indicating their different functions, designed for children learning web development" name="html-button-types-overview" alt="Übersicht der drei HTML Button Typen mit ihren Funktionen"]

Code-Beispiele zu HTML Button

Mehrere Submit-Buttons mit verschiedenen Aktionen

<form>
    <textarea name="content"></textarea>
    <button type="submit" name="action" value="save">Speichern</button>
    <button type="submit" name="action" value="draft">Als Entwurf speichern</button>
</form>

Mit name und value sendest du zusätzliche Infos: Welcher Button wurde geklickt?

Deaktivierter Button

<button type="submit" disabled>Noch nicht verfügbar</button>

disabled macht den Button nicht klickbar.

Häufige Fehler & Troubleshooting

Fehler 1: type vergessen

PROBLEM:
<button onclick="doSomething()">Klick</button>
→ In Formularen: Sendet das Formular ab!

LÖSUNG:
<button type="button" onclick="doSomething()">Klick</button>

Fehler 2: Button in Link verschachtelt

FALSCH: <a href="..."><button>...</button></a>

Interaktive Elemente dürfen nicht verschachtelt werden!

Fehler 3: Formular sendet nicht

Prüfe:

• Sind Pflichtfelder (required) ausgefüllt?
• Hat das Formular eine action?
• Blockiert JavaScript mit preventDefault()?

HTML Button: Best Practices & Tipps

Semantisch korrekte Verwendung

• type="submit" für Formular-Absenden
• type="button" für JavaScript-Aktionen
• type="reset" sparsam verwenden

Gute Beschriftungen

• "Speichern" statt "OK"
• "Newsletter abonnieren" statt "Absenden"
• "Löschen" statt "Weiter"

Barrierefreiheit

Screenreader lesen den Button-Text vor. Keine reinen Icon-Buttons ohne Text oder aria-label!

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt die drei Button-Typen:

• type="submit" – sendet Formular
• type="reset" – setzt Formular zurück
• type="button" – für JavaScript

Setze den Typ immer explizit, um unerwartetes Verhalten zu vermeiden!

Bereit für mehr? Lerne als Nächstes, wie du mit HTML Label und Fieldset deine Formulare strukturierst!