Unterschied zwischen <input type = 'submit' /> und <button type = 'submit'> Text </ button>

147

Es gibt viele Legenden über sie. Ich will die Wahrheit wissen. Was sind die Unterschiede zwischen den beiden folgenden Beispielen?

  1. <input type='submit' value='text' />

  2. <button type='submit'>text</button>

html button James
quelle
29
Meinst du <input type="submit">und <button type="submit">?
Kennytm
2
Mögliches Duplikat des Unterschieds zwischen <input type = 'button' /> und <input type = 'submit' />
Hakan Fıstık
1
inputist ein nichtiges Element. Nicht verwenden <input />, nur verwenden <input>.
CDT
@ HakanFıstık, kein Dup davon, war da, das ist ein (mehr oder weniger subtil) anderes, zB type=submitdenn buttonwar dort nicht einmal ein Problem (wahrscheinlich, weil es damals nicht einmal Teil des Standards war (AFAIK), als diese andere Frage gestellt wurde).
Gr.

Antworten:

120

Ich bin mir nicht sicher, woher du deine Legenden nimmst, aber:

Senden-Schaltfläche mit <button>

Wie bei:

<button type="submit">(html content)</button>

IE6 sendet den gesamten Text für diese Schaltfläche zwischen den Tags, andere Browser senden nur den Wert. Durch <button>die Verwendung erhalten Sie mehr Layoutfreiheit bei der Gestaltung der Schaltfläche. In all seinen Absichten und Zwecken schien es zunächst ausgezeichnet zu sein, aber verschiedene Browser-Macken machen es manchmal schwierig, es zu verwenden.

In Ihrem Beispiel sendet IE6 textan den Server, während die meisten anderen Browser nichts senden. Verwenden Sie, um die Cross-Browser-Kompatibilität zu gewährleisten <button type="submit" value="text">text</button>. Besser noch: Verwenden Sie den Wert nicht, denn wenn Sie HTML hinzufügen, wird es ziemlich schwierig, was auf der Serverseite empfangen wird. Wenn Sie stattdessen einen zusätzlichen Wert senden müssen, verwenden Sie ein ausgeblendetes Feld.

Knopf mit <input>

Wie bei:

<input type="button" />

Standardmäßig macht dies so gut wie nichts. Es wird nicht einmal Ihr Formular senden. Sie können nur Text auf die Schaltfläche setzen und ihr mittels CSS eine Größe und einen Rahmen geben. Die ursprüngliche (und aktuelle) Absicht bestand darin, ein Skript auszuführen, ohne das Formular an den Server senden zu müssen.

Normale Senden-Schaltfläche mit <input>

Wie bei:

<input type="submit" />

Wie das erstere, unterwirft sich aber tatsächlich der umgebenden Form.

Bild-Submit-Button mit <input>

Wie bei:

<input type="image" />

Wie beim ersteren (Senden) wird auch ein Formular gesendet, Sie können jedoch jedes Bild verwenden. Dies war früher die bevorzugte Methode, um Bilder als Schaltflächen zu verwenden, wenn ein Formular gesendet werden musste. Für mehr Kontrolle <button>wird jetzt verwendet. Dies kann auch für serverseitige Imagemaps verwendet werden, aber das ist heutzutage eine Seltenheit. Wenn Sie das usemapAttribut -attribute und (mit oder ohne dieses Attribut) verwenden, sendet der Browser die X / Y-Koordinaten des Mauszeigers an den Server (genauer gesagt die Position des Mauszeigers innerhalb der Schaltfläche in dem Moment, in dem Sie darauf klicken). Wenn Sie diese Extras einfach ignorieren, handelt es sich lediglich um eine als Bild getarnte Schaltfläche zum Senden.

Es gibt einige subtile Unterschiede zwischen den Browsern, aber alle senden das value-Attribut mit Ausnahme des <button>Tags, wie oben erläutert.

Abel
quelle
1
Da Sie sowieso bearbeitet haben, gilt der Punkt über IE6 immer noch für IE11 im Mackenmodus. (Ein weiterer Grund, den Mackenmodus nicht zu verwenden). In Edge jedoch behoben. Oh, und es gibt weitere Unterschiede zwischen <Eingabe> und <Button>: <Eingabe> hat white-space:prestandardmäßig <Button> nicht. Dies wird deutlich, wenn Sie versuchen, eine Schaltfläche breiter als das Ansichtsfenster zu machen.
Herr Lister
19

Mit <button>können Sie img-Tags usw. verwenden, bei denen sich Text befindet

<button type='submit'> text -- can be img etc.  </button>

Mit <input>Typ sind Sie auf Text beschränkt

Sparky
quelle
mit <input type="image" />Ihnen sind nicht auf Text beschränkt und es wird auch eine Übermittlung durchgeführt.
Abel
2
@Abel: Das ist mehr, um eine Imagemap zu erstellen, die wiederum die Mauszeigerposition als name.xund die name.yParameter sendet (beachten Sie, dass der nameParameter nicht vorhanden ist!). Ich würde es lieber <input type="submit">mit einem CSS-Hintergrund verwenden, wenn der einzige Zweck darin besteht, eine Schaltfläche mit einem Hintergrundbild zu haben.
BalusC
@BalusC: Stimmt, aber es war zum Zeitpunkt des Schreibens des HTML 2.0-Standards, als es kein CSS gab, wie beschrieben, ein Bild als Schaltfläche oder als serverseitige Imagemap zu verwenden. In der Tat können Sie (ab) eine normale Schaltfläche mit einem Hintergrundbild verwenden, um dasselbe mit CSS und HTML zu tun.
Abel
@Abel: Das war nie die Absicht von input type="image". Dafür <button type="submit">ist das beabsichtigt.
BalusC
1
@BalusC: Vielleicht verstehen wir den Standard anders, aber dies steht in Lees Originaltext für den HTML 2.0-Standard: " TYPE=IMAGE' implies TYPE = SUBMIT '-Verarbeitung; dh wenn ein Pixel ausgewählt wird, wird das gesamte Formular gesendet." . Machen Sie daraus, was Sie denken, ist die wahre Absicht :)
Abel
1

Zusammenfassend :

<input type="submit">

<button type="submit"> Submit </button>

Beide zeichnen standardmäßig visuell eine Schaltfläche, die dieselbe Aktion ausführt (senden Sie das Formular).

Es wird jedoch empfohlen, es zu verwenden, <button type="submit">da es eine bessere Semantik, eine bessere ARIA-Unterstützung und eine einfachere Gestaltung aufweist.

Juanma Menendez
quelle