HTML: <input type="button"> oder <button type="button>?

[Bernd (Gast)]

Hallo,

ich hoffe, ich bin hier im richtigen Forum. Es geht um 
Webseiten-Programmierung.

Was sollte man verwenden? Was ist besser/zukunftssicherer? Wo liegen die 
Unterschiede, jetzt mal davon abgesehen, dass bei der ersten Variante 
der Text in einem value-Tag stehen muss?

<input type="button" value="Blubb">

oder

<button type="button">Blubb</button>

Wie macht ihr es?

[Johnny B. (johnnyb)]

Bernd schrieb:
> Was sollte man verwenden?

Naja, kommt darauf an, was Du mit dem Button genau machen willst.
Ein <input> ist normalerweise Teil eines Formulares (<form>) und sollte 
nicht anders verwendet werden.
Ein <button> kannst Du einfach so, also ausserhalb eines Formulares 
verwenden.

https://www.w3schools.com/tags/tag_input.asp
https://www.w3schools.com/tags/tag_button.asp

[Daniel A. (daniel-a)]

In einem button tag können alle Elemente die im nachfolgenden Link unter 
"Phrasing content" aufgelistet sind stehen:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content

Du kannst also in den button tag auch Bilder, Zeilenumbrüche, etc. 
packen.

Bei einem input tag mit type="button" kannst du nur Text als Inhalt 
haben (ausser man packt Bilder in Schriftarten als Zeichen, oder 
verwendet input type="image", aber letzterer reagiert wie ein submit 
button). Es ist möglich einen Zeilenumbruch zu realisieren, ich würde 
aber davon abraten.

Ein weiterer unterschied ist, dass man bei selfclosing tags wie input 
oder img die CSS Pseudo elemente ::before und ::after nicht verwenden 
kann, beim button element ist dies jedoch möglich.

Ich persönlich verwende immer input, ausser ich muss Zeilenumbrüche oder 
Bilder darin haben, in dem fall nehme ich meistens ein div oder span, 
damit verschiedene Browser das ganze gleich darstellen.


Johnny B. schrieb:
> Ein <input> ist normalerweise Teil eines Formulares (<form>) und sollte
> nicht anders verwendet werden

Es gibt keinen Grund den input tag nur innerhalb einer form zu 
verwenden. Von den diversen Standards wird dies nicht vorgeschrieben. 
Man kann input Elemente fast überall verwenden, ich empfehle jeweils auf 
MDN nachzusehen, dort steht zu jedem Element wo es erlaubt ist: 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

PS: <button type="button" ist etwas redundant, ich würde das 
type="button" einfach weglassen.

[Joachim S. (oyo)]

Daniel hat ja eigentlich schon das wichtigste gesagt:
Der Hauptunterschied ist, dass ein <input type="button"> nur einen 
String als Beschriftung haben kann, schwerer zu stylen ist etc., während 
ein button beliebigen HTML-Code, also u.A. auch Bilder, schön 
formatierten Text etc. enthalten kann.

Mich wundert nur etwas, dass Daniel trotzdem standardmässig <input> 
benutzt - denn weil <button> damit deutlich flexibler ist, gleichzeitig 
aber kaum Nachteile hat, würde ich persönlich standardmässig immer 
<button> nehmen.

Ein gewisser Nachteil des <button>-Elements soll aber wohl sein, dass 
sich das <button>-Element in ur-ur-ur-alten Versionen (6/7) des Internet 
Explorer innerhalb von Formularen anders verhält.

[Mooskopf (Gast)]

ich verwende bevorzugt <button type="submit" .. und war ist der Text auf 
dem Button beim frei waehlbar, waehrend beim <input type="submit" .. der 
String auf dem Button auch gleich der Variablen name ist.

<button type="submit" name="opselector" value="1"> los mach mal</button>
<input type="submit" name="opselector" value="1">