Input Image vs. Button mit Image

[AlexH]

Hallo zusammen,

was ist "valider"?

  
<input type="image" src="bild.png" name="unwichtig" />  

oder

  
<button type="submit" name="unwichtig">  
   <img src="bild.png" alt="" />  
</button>  

Ich persönlich finde Möglichkeit 1 valider.
Ein Bild eingebettet in einem Button-Element halte ich für den falschen Ansatz.

Über ein paar Meinungen würde ich mich freuen.

[molily]

Hallo,

<input type="image" src="bild.png" name="unwichtig" />

  
Hier fehlt das alt-Attribut.  
  

> ~~~html
  

> <button type="submit" name="unwichtig">  
>    <img src="bild.png" alt="" />  
> </button>  
> 

Hier sollte das alt-Attribut sinnvoll gesetzt sein.

was ist "valider"?
Ich persönlich finde Möglichkeit 1 valider.

Was bedeutet hier »valide« und was ist »valider«?

»Valide« hat im HTML5-Kontext eine besondere Bedeutung. Ein Dokument ist entweder valide oder nicht.

Ein Bild eingebettet in einem Button-Element halte ich für den falschen Ansatz.

Warum?

Dieser Ansatz ist genauso richtig wie der andere.

Über ein paar Meinungen würde ich mich freuen.

Beides ist möglich und erlaubt. <input type="image"> ist der einfachere, ältere Ansatz. <button><img></button> ist erst einmal gleichwertig und im Hinblick auf zukünftige Erweiterung flexibler. Viele sagen, dass das kein Wert an sich ist, denn von dem einen auf das andere dann zu wechseln, wenn es nötig ist, ist keine große Sache.

Mathias

[AlexH]

Hallo Mathias,

Hier fehlt das alt-Attribut.
...
Hier sollte das alt-Attribut sinnvoll gesetzt sein.

Sind nur Beispiele.

Ein Bild eingebettet in einem Button-Element halte ich für den falschen Ansatz.

Warum?

Dieser Ansatz ist genauso richtig wie der andere.

Ja funktionieren tun beide, auch sind beide valide.
Im meinen Augen (siehe Antwort auf Chris Post) simuliert die Button Variante das Verhalten des <input type="image" /> die übrigens auch viel lesbarer ist.

Beides ist möglich und erlaubt. <input type="image"> ist der einfachere, ältere Ansatz. <button><img></button> ist erst einmal gleichwertig und im Hinblick auf zukünftige Erweiterung flexibler. Viele sagen, dass das kein Wert an sich ist, denn von dem einen auf das andere dann zu wechseln, wenn es nötig ist, ist keine große Sache.

In wie fern flexibler?

[molily]

Im meinen Augen (siehe Antwort auf Chris Post) simuliert die Button Variante das Verhalten des <input type="image" /> die übrigens auch viel lesbarer ist.

Keine Variante »simuliert« das Verhalten anderen, sie sind funktional gleichwertig.

<input type="image"> und <input type="submit"> sind die älteren Varianten. Ich denke nicht, dass diese Elemente heute noch einmal so spezifiziert werden würden. Warum ein leeres Element? Warum bei <input type="image"> den Alternativinhalt auf Nur-Text beschränken? Warum bei <input type="submit"> Button-Label und Formularfeld-Wert zusammenlegen? Es ist kürzer, das ist wahr, aber äußerst beschränkt. Die Einführung von button mit freiem Inhaltsmodell war hier sehr sinnvoll. button hat diese Einschränkungen nicht.

Wenn ich in einer Markup-Sprache Bilder und Formular-Submit-Buttons brauche, erfinde ein generisches Button-Element und ein generisches Bilder- oder Objekt-Element, aber keinen speziellen Bilder-Submit-Button. Wenn ich alles drei brauche, so kombiniere ich die vorhandenen Techniken.

Mathias

[ChrisB]

Hi,

was ist "valider"?

Das ist die falsche Frage – „valide” ist beides.

<input type="image" src="bild.png" name="unwichtig" />

> oder  
> ~~~html
  

> <button type="submit" name="unwichtig">  
>    <img src="bild.png" alt="" />  
> </button>  
> 

Ich persönlich finde Möglichkeit 1 valider.

Du meinst vermutlich „semantischer” oder sowas in der Art?

Ein Bild eingebettet in einem Button-Element halte ich für den falschen Ansatz.

Über ein paar Meinungen würde ich mich freuen.

Dann *begründe* du doch bitte erst mal deine, damit wir eine Diskussionsgrundlage haben.

MfG ChrisB

[AlexH]

Hallo Chris,

Du meinst vermutlich „semantischer” oder sowas in der Art?

Exakt.

Ein Bild eingebettet in einem Button-Element halte ich für den falschen Ansatz.

Über ein paar Meinungen würde ich mich freuen.

Dann *begründe* du doch bitte erst mal deine, damit wir eine Diskussionsgrundlage haben.

Meiner Meinung nach wird das Button Element dazu "missbraucht" ein Submit auszulösen.
Dafür halte ich das Input-Element für die richtige Wahl.

Dazu ein Bild einbetten? Genau für diesen Fall (Submit Event beim Klick auf ein Bild) wurde das "InputTypeImage" eingeführt. Alles andere "simuliert" in meinen Augen nur dieses Verhalten.

[ChrisB]

Hi,

Meiner Meinung nach wird das Button Element dazu "missbraucht" ein Submit auszulösen.

Wieso, type=submit existiert doch offiziell?

Genau für diesen Fall (Submit Event beim Klick auf ein Bild) wurde das "InputTypeImage" eingeführt. Alles andere "simuliert" in meinen Augen nur dieses Verhalten.

Nein, buttons zum Absenden sind Teil der offiziellen HTML-Spezifikation.

MfG ChrisB

[AlexH]

Hallo zurück,

Meiner Meinung nach wird das Button Element dazu "missbraucht" ein Submit auszulösen.

Wieso, type=submit existiert doch offiziell?

Genau für diesen Fall (Submit Event beim Klick auf ein Bild) wurde das "InputTypeImage" eingeführt. Alles andere "simuliert" in meinen Augen nur dieses Verhalten.

Nein, buttons zum Absenden sind Teil der offiziellen HTML-Spezifikation.

Ja dass es offiziell korrekt ist ist mir bewusst.
Mir geht es um die persönliche Einstellung dazu.

Ein Holzbrett mit 4 Reifen dran kann man nicht als Auto bezeichnen, auch wenn es von alleine fährt :D

[Siri]

Hallo,

Dazu ein Bild einbetten? Genau für diesen Fall (Submit Event beim Klick auf ein Bild) wurde das "InputTypeImage" eingeführt. Alles andere "simuliert" in meinen Augen nur dieses Verhalten.

Mit input assoziiere ich eine Eingabemöglichkeit im Sinne eines Feldes. Ein Button ist was zum draufklicken, warum sollte der keinen submit auslösen? Ist für mich nahe liegend und im Code besser erkennbar.

Viele Grüße
Siri

[AlexH]

Hallo Siri,

Mit input assoziiere ich eine Eingabemöglichkeit im Sinne eines Feldes. Ein Button ist was zum draufklicken, warum sollte der keinen submit auslösen? Ist für mich nahe liegend und im Code besser erkennbar.

Mit "input" assoziiere ICH Interaktionen mit dem User, egal in welche Form (Eingabe, Klick ect).

[Der Martin]

Hallo,

Mit "input" assoziiere ICH Interaktionen mit dem User, egal in welche Form (Eingabe, Klick ect).

ja, sehe ich auch so.
Benutzer-Interaktionen gliedern sich aber ganz grob in drei Kategorien:

* Eintragen eines Wertes in ein Feld
 * Absenden des Formulars
 * Auslösen einer Aktion, ohne das Formular abzusenden

Die erste Kategorie wird beispielsweise duch <input type="text" />, <textarea />, <select /> oder meinetwegen auch <input type="radio" /> vertreten. Um die geht es hier nicht.

Die zweite umfasst neben <input type="submit" /> und <button type="submit" /> auch <input type="image />, das hier diskutiert wird.

Die dritte ist schließlich der typische Fall für <input type="button"> oder onclick-Handler auf beliebigen Elementen.

Ob ich <input type="image" /> oder die von dir vorgestellte Struktur <button><img /></button> für richtiger halte, kommt daher auf den Einsatzzweck an. Soll damit das Formular abgesendet werden, finde ich sie beide okay; <input type="image" /> hat halt den zusätzlichen Charme, dass ich die Klick-Koordinaten bekomme (mag in manchen Fällen praktisch sein). Für rein formular-interne Aktionen würde ich aber eher ein button-Element nehmen.

Ciao,
 Martin

[molily]

Meiner Meinung nach wird das Button Element dazu "missbraucht" ein Submit auszulösen.

Für was soll ein Button sonst da sein? Wieso darf ein Button nur ein Button ohne vordefinierte Aktion sein (das, was <button type="button"> derzeit macht)? Warum soll er nicht einen Submit auslösen können?

Mathias

[1UnitedPower]

Meine Herren!

Muss das Bild denn überhaupt ausgezeichnet werden?
Dei den Bildern auf Buttons, die mir gerade durch den Kopf gehen, handelt es sich um Haken, Kreuze und Warn-Schilder. Die sind meines Erachtens aber Teil des Designs und besser im CSS angesiedelt. Oder über welche Art von Absende-Bildern reden wir hier?

[ChrisB]

Hi,

[…] handelt es sich um Haken, Kreuze und […]

Ein Hoch auf Interpunktion.

MfG ChrisB