SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Sie haben grundsätzlich zwei Möglichkeiten, submit-Buttons für Formulare zu erstellen:

• <input type="submit" value="Absenden">
• <button>Absenden</button>

Doch welche Variante sollten Sie wählen?

Geschichtliches

Seit HTML mit der Version 2.0 auch Formulare unterstützte, gibt es das input-Element, damals, 1995 noch mit einer sehr überschaubaren Anzahl verschiedener Typen, unter anderem eben auch als type="submit". Dieses Element war dafür gedacht, das Formular abzusenden. Zwei Jahre später, mit der HTML-Version 4.0, erblickte das button-Element das Licht der Welt - als eine Verbesserung des input-Elements mit dem default-type submit.

Vorteil button

Das input-Element ist ein inhaltsleeres Element, das heißt, es darf keine Kindelemente, ja nicht einmal normalen Text als Inhalt haben. Das bringt dem button deutliche Vorteile. So können Sie

• die Beschriftung individuell mit Hervorhebungen formatieren

  <button><strong>kostenpflichtig</strong> bestellen</button>

• Pseudoelemente für generierten Inhalt verwenden

  button::after { content: "Es fehlen noch Pflichtangaben"; }

Ersteres ist bei Verwendung des input-Elements überhaupt nicht möglich, letzteres nur mit geschickt gewähltem Markup (das label-Element bietet sich an).

Nebenbei steckt die Beschriftung des button-Elementes im Markup und nicht bloß in einem Attribut, was insbesondere dann wichtig wird, wenn ein Formular mehrere submit-buttons hat, die serverseitig unterschiedliche Reaktionen zur Folge haben sollen.

Semantik

input-Elemente definieren Elemente für Benutzereingaben, beispielsweise als Text, als Checkbox, als Auswahl, …

<input type="submit"> stellt im Allgemeinen jedoch keine Eingabe dar, sondern löst eine Aktion, nämlich das Absenden eines Formulars, aus. Solche Elemente sehen aus wie Buttons, funktionieren wie Buttons und sollten deshalb auch so heißen wie Buttons.

Allerdings gehören sowohl button als auch input, neben textarea und select, zu den sogenannten submittable elements. Das sind solche Elemente, die beim Abschicken eines Formulars ein Paar aus name und value zu den Formulardaten beitragen können. Die Kategorie verleiht diesen Elementen also eine gemeinsame semantische Bedeutung, die über die reinen Elementnamen hinausgeht.

Überdenkenswert ist die Verwendung von button-Elementen, wenn es mehrere Submit-Buttons gibt, weil der Benutzer an dieser Stelle eine Entscheidung trifft:

<button>reparieren</button>
<button>deinstallieren</button>

wäre eine direktere Interaktion (ein Klick weniger) als:

<label><input type="radio" name="action">reparieren</label>
<label><input type="radio" name="action">deinstallieren</label>
<button>ausführen</button>

Deshalb würde ich an dieser Stelle durchaus auch input-Elemente verwenden:

<input type="submit" value="reparieren">
<input type="submit" value="deinstallieren">

Allerdings spielt auch hier der button seinen unschätzbaren Vorteil aus: Die Bezeichnung steckt im Elementinhalt und nicht im value-Attribut. Sie wird deshalb auch nicht an das verarbeitende Script gesendet und kann somit für mehrsprachige Webseiten in der jeweiligen Sprache erfolgen, ohne dass das verarbeitende Script die aktuelle Bezeichnung kennen müsste.

<button name="action" value="0">reparieren</button>
<button name="action" value="1">deinstallieren</button>

<button name="action" value="0">repair</button>
<button name="action" value="1">uninstall</button>

Insbesondere besteht keine Notwendigkeit das Script zu ändern, falls neue Sprachversionen der Seite erstelllt werden.

<button name="action" value="0">réparer</button>
<button name="action" value="1">désinstaller</button>

Fazit

Seitdem man auf den Internetexplorer, dessen Verhalten beim Absenden von Formularen mit button-Elementen bis zur Version 6 fehlerhaft war, ruhigen Gewissens keine Rücksicht mehr zu nehmen braucht, kann das Fazit nur heißen: Wenn Sie einen Button erzeugen möchten, verwenden Sie ein button-Element, denn

• es darf Kindelemente und generierten Inhalt haben,
• seine Beschriftung steht im Markup,
• es heißt so wie es aussieht,
• es ist unter Umständen mit CSS einfacher zu stylen und
• sein default-type ist submit, sie brauchen also weniger zu schreiben ;-)

Anmerkungen

Es gibt natürlich in HTML kein Element mit dem Namen submit, auch wenn der Titel das suggeriert.

Die Code-Schnipsel sind nicht immer vollständig. So fehlen manchmal die für die Formularübertragung notwendigen value- bzw. name-Attribute. Auch sollten Sie im Sinne eines weitestgehend zugänglichen Formulars notwendige Beschriftungen in label-Elemente stecken und diese explizit mittels for-Attributen ihren input-Elementen zuordnen.

Dieselben Überlegungen lassen sich übrigens auch für Reset-Buttons anstellen, allerdings sollten Sie auf Reset-Buttons weitestgehend verzichten: Wer ein Formular nicht absenden möchte, kann die Seite einfach verlassen. Wer jedoch versehentlich ein umfangreiches Formular leert, obwohl er es eigentlich absenden wollte, ist zu Recht frustriert.

Ergänzung

In diesen Artikel sind zwischenzeitlich Anregungen aus der Diskussion im SELFHTML-Forum eingeflossen, sodass er nicht mehr mit der ursprünglich veröffentlichten Variante übereinstimmt. Mein Dank gilt an dieser Stelle insbesondere 1UnitedPower und Gunnar Bittersmann.