vs.. Którego użyć?

Tak na marginesie, <button> domyślnie prześle, co może powodować problemy, jeśli chcesz użyć przycisku w formularzu bez jego przesyłania. Tak więc, kolejny powód do używania <input type="button"> (lub <button type="button">)

Edytuj - więcej szczegółów

Bez typu, button implicite odbiera typ submit. Nie ma znaczenia, ile przycisków submit lub danych wejściowych znajduje się w formularzu, każdy z nich, który jest bezpośrednio lub pośrednio wpisany jako submit, po kliknięciu, prześle forma.

Istnieją 3 Obsługiwane typy dla przycisku

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

Ten artykuł {[2] } wydaje się oferować całkiem dobry przegląd różnicy.

Ze strony:

Przyciski utworzone za pomocą funkcji BUTTON element podobnie jak przyciski stworzony z elementem wejściowym, ale oferują bogatsze renderowanie możliwości: element przycisku może miej zadowolenie. Na przykład przycisk element zawierający obraz funkcje takie jak i mogą przypominać Element wejściowy, którego typ jest ustawiony na "obraz", ale Typ elementu przycisku zezwala na zawartość.

element przycisku-W3C

Wewnątrz elementu <button> można umieścić zawartość, jak tekst lub obrazy.

<button type="button">Click Me!</button> 

Jest to różnica między tym elementem a przyciskami utworzonymi za pomocą elementu <input>.

Cytat

Ważne: jeśli użyjesz elementu button w formularzu HTML, różne przeglądarki będą przesyłać różne wartości. Internet Explorer przesyła tekst pomiędzy znacznikami <button> i </button>, podczas gdy inne przeglądarki przesyłają zawartość atrybutu value. Za pomocą elementu input można utworzyć przyciski w formie HTML.

From: http://www.w3schools.com/tags/tag_button.asp

Jeśli dobrze rozumiem, odpowiedzią jest kompatybilność i wejście spójność z przeglądarką do przeglądarki

Przytoczę Artykuł różnica między Anchorami, wejściami i przyciskami:

Anchory (element <a>) reprezentują hiperłącza, zasoby, do których osoba może nawigować lub pobierać w przeglądarce. Jeśli chcesz zezwolić użytkownikowi na przejście do nowej strony lub pobranie pliku, użyj kotwicy.

An input (<input>) reprezentuje pole danych: więc niektóre dane użytkownika, które chcesz wysłać na serwer. Istnieje kilka typów wejść związanych z przyciski:

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

Każdy z nich ma znaczenie, na przykład "file" służy do przesłania pliku, "reset" czyści formularz, a" submit " wysyła dane do serwera. Sprawdź W3 reference na MDN lub na W3Schools.

Przycisk (<button>) element jest dość uniwersalny:

• możesz zagnieżdżać elementy w przycisku, takich jak obrazy, akapity lub headers;
• przyciski mogą również zawierać ::before i ::after pseudoelementy;
• przyciski obsługują atrybut disabled. Ułatwia to obracanie włączają się i wyłączają.

Ponownie sprawdź referencję w3 dla znacznika <button> na MDN lub na W3Schools.

Cytowanie strony formularzy w Podręczniku HTML:

Przyciski utworzone za pomocą funkcji BUTTON element podobnie jak przyciski utworzone za pomocą elementu INPUT, ale oferują bogatsze możliwości renderowania: element BUTTON może mieć zawartość. Na przykład element przycisku, który zawiera obraz, działa jak i może przypominać element wejściowy, którego typ jest ustawiony na "obraz", ale Typ elementu przycisku zezwala na zawartość.

Użyj przycisku z elementu wejściowego, jeśli chcesz utworzyć przycisk w formularzu. I użyj znacznika przycisku, jeśli chcesz utworzyć przycisk dla akcji.

<button>

• domyślnie zachowuje się tak, jakby miał atrybut "type=" submit "
• może być używany bez formularza, jak również w formularzach.
• dozwolone treści tekstowe lub html
• CSS pseudo elements allowed (like :before)
• nazwa znacznika jest zwykle unikalna dla pojedynczej formy

Vs.

<input type='button'>

• type powinien być ustawiony na 'submit', aby zachowywał się jak element submit
• mogą być używane tylko w formularzach.
• dozwolone tylko treści tekstowe
• no css pseudoelementy
• ta sama nazwa znacznika co większość elementów formularzy (wejść)

--
w większości przeglądarek oba elementy można łatwo stylizować za pomocą css, ale w większości przypadków preferowany jest element button, ponieważ można stylować bardziej za pomocą wewnętrznego html i pseudo elementów

Jeśli chodzi o styl CSS to <button type="submit" class="Btn">Example</button> jest lepsze, ponieważ daje możliwość korzystania z CSS :before i :after pseudo klasy , które mogą pomóc.

Ze względu na <input type="button"> wizualne renderowanie różniące się od <a> lub <span> kiedy stylizowane są na klasy w pewnych sytuacjach unikam ich.

Warto zwrócić uwagę na aktualna odpowiedź została napisana w 2009 roku. IE6 nie jest teraz problemem, więc <button type="submit">Wins</button> stylizacja konsystencji w moich oczach wychodzi na wierzch.

Jest duża różnica, jeśli używasz jQuery. jQuery jest świadomy większej liczby zdarzeń na wejściach niż na przyciskach. Na przyciskach jQuery jest świadomy tylko zdarzeń "kliknięcia". Na wejściach jQuery jest świadomy zdarzeń "click", "focus" i "blur".

Zawsze możesz powiązać zdarzenia z przyciskami w razie potrzeby, ale pamiętaj, że zdarzenia automatycznie rozpoznane przez jQuery są różne. Na przykład, jeśli utworzyłeś funkcję, która była wykonywana za każdym razem, gdy wystąpiło zdarzenie "focusin" na Twoim strona, wejście uruchomi funkcję, ale przycisk nie.

Chcę tylko dodać coś do reszty odpowiedzi tutaj. Elementy wejściowe są uważane za puste lub puste (inne puste elementy to: area , base , br , col , hr , img , input , link , meta i param. Możesz również sprawdzić tutaj), co oznacza, że nie mogą mieć żadnej treści. Oprócz braku treści, puste elementy nie mogą mieć żadnych pseudo-elementów, takich jak ::after I ::before , co uważam za poważną wadę.

Chociaż jest to bardzo stare pytanie i może już nie być istotne, należy pamiętać, że większość problemów, które miał tag <button> nie istnieje już i dlatego jest wysoce wskazane, aby go używać.

Jeśli nie możesz tego zrobić z różnych powodów, po prostu pamiętaj, aby dodać atrybut role = "button" w tagu jako dostępności. Ten artykuł jest dość pouczający: https://www.deque.com/blog/accessible-aria-buttons/

<button> jest elastyczny, ponieważ może zawierać HTML. Co więcej, o wiele łatwiej jest stylizować za pomocą CSS, a stylizacja jest faktycznie stosowana we wszystkich przeglądarkach. Istnieją jednak pewne wady dotyczące Internet Explorer (Eww! IE!). Internet Explorer nie wykrywa poprawnie atrybutu value, używając zawartości znacznika jako wartości. Wszystkie wartości w formularzu są wysyłane po stronie serwera, niezależnie od tego, czy przycisk został kliknięty, czy nie. To sprawia, że używanie go jako <button type="submit"> jest trudne i ból.

<input type="submit"> z drugiej strony nie ma żadnych problemów z wartością lub wykrywaniem, ale nie możesz jednak dodać HTML tak, jak możesz za pomocą <button>. Jest również trudniej stylizować, a stylizacja nie zawsze reaguje dobrze we wszystkich przeglądarkach. Mam nadzieję, że to pomogło.

Ponadto, jedna z różnic może pochodzić od dostawcy biblioteki i tego, co kodują. na przykład tutaj używam platformy cordova w połączeniu z mobilnym kanciastym interfejsem użytkownika, a podczas gdy input/div/etc tagi działają dobrze z ng-click, przycisk może spowodować awarię Visual Studio debugger, z pewnością przez różnice, że programista spowodował; zauważ, że odpowiedź MattC wskazuje na ten sam problem, jQuery jest tylko lib, a dostawca nie myślał o niektórych funkcjonalności na jednym elemencie, że s/On nie zapewnia na innym. tak więc, gdy korzystasz z biblioteki, możesz napotkać problem z jednym elementem, którego nie napotkasz z innym. i po prostu popularny, jak input, będzie w większości stały, tylko dlatego, że jest bardziej popularny.