HTML-Element button und input - der Unterschied

Mittwoch, 30 März 2011 15:18 MET

Thema:
Webgestaltung  
Stichworte:
, ,  
 
Screenshot großer Schaltfläche mit kleinem Bild und Text
HTML-Element button und input - der Unterschied [hyperkontext | Weblog]

Ich wurde vor ein paar Tagen gefragt, worin der Unterschied bestehe, eine Schaltfläche mit dem Element <input> beziehungsweise <button> zu kreieren.

Ich musste selbst wieder genau nachsehen. Ich hatte vor vielen Jahren nämlich den Einsatz des Button-Elementes allein deswegen hintan gehalten, weil Internet Explorer, bis Version 6 erhebliche und bis Version 8 einige, Probleme damit hat.

Nach wie vor gilt: Ein Button-Element mit Attribut submit ist gefährlich, weil alte Browser unter Umständen damit nicht richtig umgehen. Hier die Erläuterungen.

HTML-Element button

Eingeführt wurde das Element button in HTML Version 4. Der Sinn war, neben input mehr Gestaltungsmöglichkeiten für Schaltflächen zu schaffen.

Wohlgemerkt, das war zu einer Zeit, in der CSS (Cascading Style Sheets) auch noch in den Kinderschuhen steckte. Auszug aus der – nun mehr als zehn Jahre alten – Spezifikation zu HTML 4:

Schaltflächen, die mit dem BUTTON-Element erzeugt werden, funktionieren wie Schaltflächen, die mit dem INPUT-Element erzeugt wurden, bieten jedoch mehr Darstellungsmöglichkeiten: das BUTTON-Element kann Inhalt haben. Element Button W3C

<button> kann, analog zu <input> in Bezug auf Schaltflächen, drei Werte mit dem Attribut type annehmen:

  • button
  • reset
  • submit

Mit anderen Worten:

<button type="submit">Absenden</button>
funktioniert in einem Formular wie
<input type="submit" value="Absenden">.

Das Element button lässt aber mehr Möglichkeiten der Gestaltung zu, was auch im Sinne der Erfindung war. Wir könnten innerhalb eines Formulares eine große Absende-Schaltfläche auch so gestalten:

<button type="submit">  
 <p>Eingaben <br>   
 <img src="…" alt="…"> <br>   
 <strong>hier absenden</strong> </p> 
</button>

Klingt schön, aber in der Praxis hat das leider Tücken.

Vorsicht vor button mit Attribut submit

IE bis Version 6 sendet einfach alles was innerhalb des Elementes steht.

Zusätzlich verwirren diese alten Browser noch mehrere <button type="submit"> in einem Formular. Mehrere Absende-Buttons sind durchaus erlaubt und können die Bedienung einfacher machen. Mit solchen Konstrukten gibt es übrigens Probleme bis inklusive Internet Explorer 8.

Element button und input in der Praxis

Bis heute würde ich also meinen, ein Button-Element mit Attribut type="submit" – also zum Absenden eines Formulares – ist gefährlich, weil alte Browser unter Umständen damit nicht richtig umgehen.

Mehr zu empfehlen ist <input type="submit"> da allemal noch.

Hingegen ist <button type="button"> durchaus eine Option. In diesem Fall wird ja eine bestimmte Aktion mit Hilfe von Javascript verarbeitet. Hierzu auch der Hinweis, dass sich button solcherart nicht zwingend in einem Formular befinden muss.

Ein anschauliches Beispiel, wie mit input und button umzugehen ist, zeigt Stefan Münz in seinem HTML5-Handbuch: Schaltflächen (Buttons).

Abschnitt 1 von 1

Weitere Verweise zum Thema:

Externe Verweise dieses Artikels wurden zuletzt am 30. März 2011 auf Relevanz geprüft.

Datum:
veröffentlicht am 30 März 2011, 15:18 MET.
Artikel:
HTML-Element button und input - der Unterschied [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/305
Thema:
Webgestaltung 
Stichworte:
, ,  

Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

älterer Artikel »
Februar 2011 im Kontext