<przycisk> vs. <typ wejścia = „przycisk” />. Którego użyć?

Podczas przeglądania większości witryn (w tym SO) większość z nich używa:

<input type="button" />

zamiast:

<button></button>

• Jakie są główne różnice między nimi, jeśli w ogóle?
• Czy istnieją uzasadnione powody, aby używać jednego zamiast drugiego?
• Czy istnieją uzasadnione powody, aby je łączyć?
• Czy używanie <button>wiąże się z problemami ze zgodnością, ponieważ nie jest powszechnie używane?

• Oto strona opisująca różnice (w zasadzie możesz umieścić HTML w a <button></button>)
• I kolejna strona opisująca, dlaczego ludzie unikają <button></button>(Wskazówka: IE6)

Kolejny problem z IE podczas używania <button />:

I kiedy mówimy o IE, ma kilka błędów związanych z szerokością przycisków. Tajemniczo doda dodatkowe dopełnienie, gdy próbujesz dodać style, co oznacza, że ​​musisz dodać mały hack, aby uzyskać kontrolę.

Podobnie jak notatka dodatkowa, <button>niejawnie prześle, co może powodować problemy, jeśli chcesz użyć przycisku w formularzu bez jego przesłania. Zatem kolejny powód do korzystania <input type="button">(lub <button type="button">)

Edytuj - więcej szczegółów

Bez typu buttondomyślnie przyjmuje typsubmit . Nie ma znaczenia, ile przycisków przesyłania lub danych wejściowych znajduje się w formularzu, każdy z nich, który jest jawnie lub pośrednio wpisany jako prześlij, po kliknięciu prześle formularz.

Istnieją 3 obsługiwane typy 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ł wydaje się całkiem dobry przegląd różnicy.

Ze strony:

Przyciski utworzone za pomocą elementu BUTTON działają podobnie jak przyciski utworzone za pomocą elementu INPUT, ale oferują bogatsze możliwości renderowania: element BUTTON może zawierać treść. Na przykład element BUTTON, który zawiera obraz, działa podobnie i może przypominać element INPUT, którego typ jest ustawiony na „image”, ale typ elementu BUTTON zezwala na treść.

Element przycisku - W3C

Wewnątrz <button>elementu możesz umieścić treść, taką jak tekst lub obrazy.

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

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

Zacytować

Ważne: jeśli użyjesz elementu przycisku w formularzu HTML, różne przeglądarki przesyłają różne wartości. Internet Explorer prześle tekst między tagami <button>i </button>, a inne przeglądarki prześlą zawartość atrybutu value. Użyj elementu wejściowego, aby utworzyć przyciski w formie HTML.

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

Jeśli dobrze rozumiem, odpowiedzią jest zgodność i spójność wprowadzania danych między przeglądarkami

Zacytuję artykuł Różnica między kotwicami, wejściami i przyciskami :

Kotwice ( <a>element) reprezentują hiperłącza, zasoby, do których osoba może nawigować lub pobierać w przeglądarce. Jeśli chcesz pozwolić użytkownikowi przejść na nową stronę lub pobrać plik, użyj kotwicy.

Input ( <input>) oznacza pole danych: tak pewnych danych użytkownika, to znaczy, aby wysłać do serwera. Istnieje kilka typów wprowadzania związanych z przyciskami:

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

Każdy z nich ma znaczenie, na przykład „ plik ” służy do przesłania pliku, „ reset ” czyści formularz, a „ przesłanie ” wysyła dane do serwera. Sprawdź referencje W3 w MDN lub W3Schools .

Przycisk ( <button>)elementem jest dość wszechstronny:

• możesz zagnieżdżać elementy w przycisku, takie jak obrazy, akapity lub nagłówki;
• przyciski mogą również zawierać ::beforei ::afterpseudoelementy;
• przyciski obsługują ten disabledatrybut. Ułatwia to ich włączanie i wyłączanie.

Ponownie sprawdź referencję W3 dla <button>znacznika w MDN lub W3Schools .

Cytując stronę formularzy w podręczniku HTML:

Przyciski utworzone za pomocą elementu BUTTON działają podobnie jak przyciski utworzone za pomocą elementu INPUT, ale oferują bogatsze możliwości renderowania: element BUTTON może zawierać treść. Na przykład element BUTTON, który zawiera obraz, działa podobnie i może przypominać element INPUT, którego typ jest ustawiony na „image”, ale typ elementu BUTTON zezwala na treść.

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

<button>

• domyślnie zachowuje się tak, jakby miał atrybut „type =” submission
• może być używany bez formularza, a także w formularzach.
• dozwolona zawartość tekstowa lub HTML
• dozwolone pseudoelementy css (jak: przed)
• nazwa znacznika jest zwykle unikalna dla pojedynczego formularza

vs.

<input type='button'>

• typ powinien być ustawiony na „prześlij”, aby zachowywał się jak element podający
• można używać tylko w formularzach.
• dozwolona tylko treść tekstowa
• brak pseudoelementów css
• taka sama nazwa znacznika jak większość elementów formularzy (danych wejściowych)

-
we współczesnych przeglądarkach oba elementy można łatwo stylizować za pomocą css, ale w większości przypadków buttonpreferowany jest element, ponieważ możesz stylizować więcej za pomocą wewnętrznego html i pseudoelementów

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

Ze względu na <input type="button">wizualne renderowanie inne niż <a>lub w <span>stylu z klasami w niektórych sytuacjach unikam ich.

Warto zauważyć, że obecna najlepsza odpowiedź została napisana w 2009 roku. IE6 nie jest teraz problemem, więc <button type="submit">Wins</button>spójność stylizacji 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. W przypadku przycisków jQuery rozpoznaje tylko zdarzenia „kliknięcia”. W przypadku danych wejściowych jQuery jest świadomy zdarzeń „kliknięcia”, „skupienia” i „rozmycia”.

Zawsze możesz w razie potrzeby powiązać zdarzenia z przyciskami, ale pamiętaj, że zdarzenia, o których jQuery automatycznie wie, są różne. Na przykład, jeśli utworzyłeś funkcję, która była wykonywana za każdym razem, gdy na twojej stronie istniało zdarzenie „focusin”, dane wejściowe wyzwalałyby tę funkcję, ale przycisk nie.

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

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

Chcę tylko dodać coś do pozostałych odpowiedzi tutaj. Elementy wejściowe są uważane za puste lub puste (pozostałe 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 zawartości puste elementy nie mogą mieć żadnych pseudoelementów, takich jak :: after i :: before , co uważam za poważną wadę.

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 kątowym interfejsem użytkownika i chociaż tagi input / div / etc działają dobrze z ng-click, przycisk może spowodować awarię debugera Visual Studio, z pewnością z powodu różnic spowodowanych przez programistę; zauważ, że odpowiedź MattC wskazuje na ten sam problem, jQuery to po prostu biblioteka, a dostawca nie pomyślał o niektórych funkcjach w jednym elemencie, który zapewnia w innym. więc gdy korzystasz z biblioteki, możesz napotkać problem z jednym elementem, z którym nie spotkasz innego. i po prostu popularny, taki jak input, będzie w większości ustalony, tylko dlatego, że jest bardziej popularny.

Chociaż jest to bardzo stare pytanie i może nie być już istotne, należy pamiętać, że większość problemów, które <button>kiedyś występowały w tagu, już nie istnieje i dlatego zaleca się jego użycie.

Jeśli nie możesz tego zrobić z różnych powodów, pamiętaj o dodaniu atrybutu rola = ”przycisk” w tagu jako ułatwienia dostępu. Ten artykuł jest dość pouczający: https://www.deque.com/blog/accessible-aria-buttons/