Różnica między <input type = 'submit' /> a <button type = 'submit'> text </button>

148

Jest o nich wiele legend. Chcę znać prawdę. Jakie są różnice między dwoma poniższymi przykładami?

<input type='submit' value='text' />
<button type='submit'>text</button>

html button

— James
źródło

Masz na myśli <input type="submit">i <button type="submit">?

— kennytm

Możliwy duplikat różnicy między <input type = 'button' /> a <input type = 'submit' />

— Hakan Fıstık

inputjest pustym elementem. Nie używaj <input />, po prostu używaj <input>.

— CDT

@ HakanFıstık, a nie dup z tym, tam, to jest (mniej lub bardziej subtelnie) inna, na przykład type=submitdla buttonnawet nie było problemem tam (prawdopodobnie dlatego, że nie było jeszcze częścią std. Wtedy (AFAIK), kiedy zadawano to inne pytanie).

— Sz.

Odpowiedzi:

120

Nie jestem pewien, skąd bierzesz swoje legendy, ale:

Przycisk Prześlij z `<button>`

Jak z:

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

IE6 prześle cały tekst tego przycisku między tagami, inne przeglądarki prześle tylko wartość. Użycie <button>zapewnia większą swobodę układu w projektowaniu przycisku. Pod względem wszystkich swoich zamiarów i celów wydawał się na początku doskonały, ale różne dziwactwa przeglądarki czasami utrudniają korzystanie z niego.

W twoim przykładzie IE6 wyśle textna serwer, podczas gdy większość innych przeglądarek nic nie wyśle. Aby był kompatybilny z różnymi przeglądarkami, użyj <button type="submit" value="text">text</button>. Jeszcze lepiej: nie używaj wartości, ponieważ jeśli dodasz HTML, stanie się raczej trudne, co jest odbierane po stronie serwera. Zamiast tego, jeśli musisz wysłać dodatkową wartość, użyj ukrytego pola.

Przycisk z `<input>`

Jak z:

<input type="button" />

Domyślnie to prawie nic. Nie prześle nawet Twojego formularza. Możesz tylko umieścić tekst na przycisku i nadać mu rozmiar i obramowanie za pomocą CSS. Jego pierwotnym (i obecnym) zamiarem było wykonanie skryptu bez konieczności przesyłania formularza na serwer.

Zwykły przycisk przesyłania z `<input>`

Jak z:

<input type="submit" />

Podobnie jak poprzedni, ale w rzeczywistości przekazuje otaczającą formę.

Przycisk przesyłania obrazu z `<input>`

Jak z:

<input type="image" />

Podobnie jak pierwsza (wyślij), również prześle formularz, ale możesz użyć dowolnego obrazu. Kiedyś był to preferowany sposób używania obrazów jako przycisków, gdy trzeba było przesłać formularz. Dla większej kontroli <button>jest teraz używany. Może być również używany do map obrazu po stronie serwera, ale w dzisiejszych czasach jest to rzadkość. Kiedy użyjesz usemap-attribute i (z tym atrybutem lub bez), przeglądarka wyśle współrzędne X / Y wskaźnika myszy do serwera (a dokładniej, lokalizacja wskaźnika myszy wewnątrz przycisku w momencie kliknięcia). Jeśli po prostu zignorujesz te dodatki, to nic innego jak przycisk przesyłania przebrany za obraz.

Istnieją pewne subtelne różnice między przeglądarkami, ale wszystkie przesyłają atrybut wartość, z wyjątkiem <button>tagu, jak wyjaśniono powyżej.

— Abel
źródło

Ponieważ i tak edytujesz, kwestia dotycząca IE6 jest nadal aktualna w przypadku IE11 w trybie dziwactw. (Kolejny powód, aby nie używać trybu dziwactw). Naprawiono jednak w Edge. Aha, i jest więcej różnic między <input> a <button>: <input> ma white-space:predomyślnie <button> nie. Staje się to widoczne podczas próby poszerzenia przycisku niż rzutnia.

— Pan Lister

W programie <button>możesz używać tagów img itp. Tam, gdzie znajduje się tekst

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

z <input>tekstem jesteś ograniczony do tekstu

— iskrzący
źródło

z <input type="image" />tobą nie ogranicza się do tekstu, a także wykonuje przesyłanie.

— Abel

@Abel: to więcej, aby stworzyć mapę obrazu, który z kolei wysyła wskaźnik myszy pozycję jak name.xi name.yparametry (zauważ, że nameparametr nie jest obecny!). Wolałbym używać <input type="submit">tła CSS, jeśli jedynym celem jest posiadanie przycisku z obrazem tła.

— BalusC

@BalusC: To prawda, ale celem, w momencie pisania standardu HTML 2.0, kiedy nie było CSS, było, zgodnie z opisem, użycie obrazu jako przycisku lub jako mapy obrazu po stronie serwera. Ale rzeczywiście, możesz (ab) użyć zwykłego przycisku z obrazem tła, aby zrobić to samo z CSS i HTML.

— Abel

@Abel: To nigdy nie było zamiarem input type="image". Do tego <button type="submit">jest przeznaczony.

— BalusC

@BalusC: być może inaczej rozumiemy ten standard, ale to jest w oryginalnym tekście Lee dotyczącym standardu HTML 2.0: Przetwarzanie „ TYPE=IMAGE' implies TYPE = SUBMIT”; to znaczy, gdy wybrany jest piksel, przesyłany jest cały formularz. ” . Zrób z tego to, co myślisz, jest prawdziwym zamiarem :)

— Abel

W podsumowaniu :

<input type="submit">

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

Oba domyślnie narysują wizualnie przycisk, który wykonuje tę samą akcję (wyślij formularz).

Jednak zaleca się go używać, <button type="submit">ponieważ ma lepszą semantykę, lepszą obsługę ARIA i jest łatwiejszy do stylizacji.

— Juanma Menendez
źródło

Różnica między <input type = 'submit' /> a <button type = 'submit'> text </button>

Przycisk Prześlij z <button>

Przycisk z <input>

Zwykły przycisk przesyłania z <input>

Przycisk przesyłania obrazu z <input>

Przycisk Prześlij z `<button>`

Przycisk z `<input>`

Zwykły przycisk przesyłania z `<input>`

Przycisk przesyłania obrazu z `<input>`