Versions-Historie des Beitrags „input oder button für submit-Elemente?“

input oder button für submit-Elemente?

bearbeitet von

Matthias Apsel 10.02.2015 00:50

<p>Sie haben grundsätzlich zwei Möglichkeiten, submit-Buttons für Formulare zu erstellen:</p> <ul> <li><code><input type="submit" value="Absenden"></code></li> <li><code><button>Absenden</button></code></li> </ul> <p>Doch welche Variante sollten Sie wählen?</p> <h2>Geschichtliches</h2> <p>Seit HTML mit der Version 2.0 auch Formulare unterstützte, gibt es das <code>input</code>-Element, damals, 1995 noch mit einer sehr überschaubaren Anzahl verschiedener Typen, unter anderem eben auch als <code>type="submit"</code>. Dieses Element war dafür gedacht, das Formular abzusenden. Zwei Jahre später, mit der HTML-Version 4.0, erblickte das <code>button</code>-Element das Licht der Welt - als eine Verbesserung des <code>input</code>-Elements mit dem default-type <code>submit</code>.</p> <h2>Vorteil <code>button</code></h2> <p>Das <code>input</code>-Element ist ein inhaltsleeres Element, das heißt, es darf keine Kindelemente, ja nicht einmal normalen Text als Inhalt haben. Das bringt dem <code>button</code> deutliche Vorteile. So können Sie</p> <ul> <li>die Beschriftung individuell mit Hervorhebungen formatieren <pre><button><strong>kostenpflichtig</strong> bestellen</button></pre> </li> <li>Pseudoelemente für generierten Inhalt verwenden <pre>button::after { content: "Es fehlen noch Pflichtangaben"; }</pre> </li> </ul> <p>Ersteres ist bei Verwendung des input-Elements überhaupt nicht möglich, letzteres nur mit geschickt gewähltem Markup (das <code>label</code>-Element bietet sich an).</p> <p>Nebenbei steckt die Beschriftung des <code>button</code>-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.</p> <h2>Semantik</h2> <p>input-Elemente definieren Elemente für Benutzereingaben, beispielsweise als Text, als Checkbox, als Auswahl, …</p> <p><code><input type="submit"></code> 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.</p> <p>Allerdings gehören sowohl <code>button</code> als auch <code>input</code>, neben <code>textarea</code> und <code>select</code>, zu den sogenannten <em>submittable elements</em>. Das sind solche Elemente, die beim Abschicken eines Formulars ein Paar aus <code>name</code> und <code>value</code> zu den Formulardaten beitragen können. Die Kategorie verleiht diesen Elementen also eine gemeinsame semantische Bedeutung, die über die reinen Elementnamen hinausgeht.</p> <p>Überdenkenswert ist die Verwendung von <code>button</code>-Elementen, wenn es mehrere Submit-Buttons gibt, weil der Benutzer an dieser Stelle eine Entscheidung trifft:</p> <pre><button>reparieren</button> <button>deinstallieren</button></pre> <p>wäre eine direktere Interaktion (ein Klick weniger) als: <pre><label><input type="radio" name="action">reparieren</label> <label><input type="radio" name="action">deinstallieren</label> <button>ausführen</button></pre> <p>Deshalb würde ich an dieser Stelle durchaus auch <code>input</code>-Elemente verwenden: <pre><input type="submit" value="reparieren"> <input type="submit" value="deinstallieren"></pre> <p>Allerdings spielt auch hier der <code>button</code> seinen unschätzbaren Vorteil aus: Die Bezeichnung steckt im Elementinhalt und nicht im <code>value</code>-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. <pre><button name="action" value="0">reparieren</button> <button name="action" value="1">deinstallieren</button></pre> <p> <pre><button name="action" value="0">repair</button> <button name="action" value="1">uninstall</button></pre> <p>Insbesondere besteht keine Notwendigkeit das Script zu ändern, falls neue Sprachversionen der Seite erstelllt werden. <pre><button name="action" value="0">réparer</button> <button name="action" value="1">désinstaller</button></pre> <h2>Fazit</h2> <p>Seitdem man auf den Internetexplorer, dessen Verhalten beim Absenden von Formularen mit <code>button</code>-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 <code>button</code>-Element, denn</p> <ul> <li>es darf Kindelemente und generierten Inhalt haben,</li> <li>seine Beschriftung steht im Markup,</li> <li>es heißt so wie es aussieht,</li> <li>es ist unter Umständen mit CSS einfacher zu stylen und</li> <li>sein default-type ist submit, sie brauchen also weniger zu schreiben ;-)</li> </ul> <h2>Anmerkungen</h2> <p>Es gibt natürlich in HTML kein Element mit dem Namen <em>submit</em>, auch wenn der Titel das suggeriert.</p> <p>Die Code-Schnipsel sind nicht immer vollständig. So fehlen manchmal die für die Formularübertragung notwendigen <code>value</code>- bzw. <code>name</code>-Attribute. Auch sollten Sie im Sinne eines weitestgehend zugänglichen Formulars notwendige Beschriftungen in <code>label</code>-Elemente stecken und diese explizit mittels <code>for</code>-Attributen ihren <code>input</code>-Elementen zuordnen.</p> <p>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.</p> <h2>Ergänzung</h2> <p>In diesen Artikel sind zwischenzeitlich Anregungen aus der <a href="https://forum.selfhtml.org/self/2015/feb/10/input-oder-button-fuer-submit-elemente/1631986#m1631986">Diskussion im SELFHTML-Forum</a> eingeflossen, sodass er nicht mehr mit der ursprünglich veröffentlichten Variante übereinstimmt. Mein Dank gilt an dieser Stelle insbesondere <em>1UnitedPower</em> und <em>Gunnar Bittersmann</em>.</p>

input oder button für submit-Elemente?

bearbeitet von

Matthias Scharwies 23.03.2021 12:36

<p>Sie haben grundsätzlich zwei Möglichkeiten, submit-Buttons für Formulare zu erstellen:</p> <ul> <li><code><input type="submit" value="Absenden"></code></li> <li><code><button>Absenden</button></code></li> </ul> <p>Doch welche Variante sollten Sie wählen?</p> <h2>Geschichtliches</h2> <p>Seit HTML mit der Version 2.0 auch Formulare unterstützte, gibt es das <code>input</code>-Element, damals, 1995 noch mit einer sehr überschaubaren Anzahl verschiedener Typen, unter anderem eben auch als <code>type="submit"</code>. Dieses Element war dafür gedacht, das Formular abzusenden. Zwei Jahre später, mit der HTML-Version 4.0, erblickte das <code>button</code>-Element das Licht der Welt - als eine Verbesserung des <code>input</code>-Elements mit dem default-type <code>submit</code>.</p> <h2>Vorteil <code>button</code></h2> <p>Das <code>input</code>-Element ist ein inhaltsleeres Element, das heißt, es darf keine Kindelemente, ja nicht einmal normalen Text als Inhalt haben. Das bringt dem <code>button</code> deutliche Vorteile. So können Sie</p> <ul> <li>die Beschriftung individuell mit Hervorhebungen formatieren <pre><bu</p> utton><strong>kostenpflichtig</strong> bestellen</button></pre> </li> <li>Pseudoelemente für generierten Inhalt verwenden <p pre>button::after { content: "Es fehlen noch Pflichtangaben"; }</pre> </li> </ul> <p>Ersteres ist bei Verwendung des input-Elements überhaupt nicht möglich, letzteres nur mit geschickt gewähltem Markup (das <code>label</code>-Element bietet sich an).</p> <p>Nebenbei steckt die Beschriftung des <code>button</code>-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.</p> <h2>Semantik</h2> <p>input-Elemente definieren Elemente für Benutzereingaben, beispielsweise als Text, als Checkbox, als Auswahl, …</p> <p><code><input type="submit"></code> 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.</p> <p>Allerdings gehören sowohl <code>button</code> als auch <code>input</code>, neben <code>textarea</code> und <code>select</code>, zu den sogenannten <em>submittable elements</em>. Das sind solche Elemente, die beim Abschicken eines Formulars ein Paar aus <code>name</code> und <code>value</code> zu den Formulardaten beitragen können. Die Kategorie verleiht diesen Elementen also eine gemeinsame semantische Bedeutung, die über die reinen Elementnamen hinausgeht.</p> <p>Überdenkenswert ist die Verwendung von <code>button</code>-Elementen, wenn es mehrere Submit-Buttons gibt, weil der Benutzer an dieser Stelle eine Entscheidung trifft:</p> <pre><button</p> n>reparieren</button> <button>deinstallieren</button></pre> <p>wäre eine direktere Interaktion (ein Klick weniger) als: <p pre><label><input type="radio" name="action">reparieren</label> <label><input type="radio" name="action">deinstallieren</label> <button>ausführen</button></pre> <p>Deshalb würde ich an dieser Stelle durchaus auch <code>input</code>-Elemente verwenden: <p pre><input type="submit" value="reparieren"> <input type="submit" value="deinstallieren"></pre> <p>Allerdings spielt auch hier der <code>button</code> seinen unschätzbaren Vorteil aus: Die Bezeichnung steckt im Elementinhalt und nicht im <code>value</code>-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. <pre e><button name="action" value="0">reparieren</button> <button name="action" value="1">deinstallieren</button></pre> <p>< <pre><button name="action" value="0">repair</button> <button name="action" value="1">uninstall</button></pre> <p>Insbesondere besteht keine Notwendigkeit das Script zu ändern, falls neue Sprachversionen der Seite erstelllt werden. <p pre><button name="action" value="0">réparer</button> <button name="action" value="1">désinstaller</button></pre> <h2>Fazit</h2> <p>Seitdem man auf den Internetexplorer, dessen Verhalten beim Absenden von Formularen mit <code>button</code>-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 <code>button</code>-Element, denn</p> <ul> <li>es darf Kindelemente und generierten Inhalt haben,</li> <li>seine Beschriftung steht im Markup,</li> <li>es heißt so wie es aussieht,</li> <li>es ist unter Umständen mit CSS einfacher zu stylen und</li> <li>sein default-type ist submit, sie brauchen also weniger zu schreiben ;-)</li> </ul> <h2>Anmerkungen</h2> <p>Es gibt natürlich in HTML kein Element mit dem Namen <em>submit</em>, auch wenn der Titel das suggeriert.</p> <p>Die Code-Schnipsel sind nicht immer vollständig. So fehlen manchmal die für die Formularübertragung notwendigen <code>value</code>- bzw. <code>name</code>-Attribute. Auch sollten Sie im Sinne eines weitestgehend zugänglichen Formulars notwendige Beschriftungen in <code>label</code>-Elemente stecken und diese explizit mittels <code>for</code>-Attributen ihren <code>input</code>-Elementen zuordnen.</p> <p>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.</p> <h2>Ergänzung</h2> <p>In diesen Artikel sind zwischenzeitlich Anregungen aus der <a href="https://forum.selfhtml.org/self/2015/feb/10/input-oder-button-fuer-submit-elemente/1631986#m1631986">Diskussion im SELFHTML-Forum</a> eingeflossen, sodass er nicht mehr mit der ursprünglich veröffentlichten Variante übereinstimmt. Mein Dank gilt an dieser Stelle insbesondere <em>1UnitedPower</em> und <em>Gunnar Bittersmann</em>.</p>