Różnica między <typ wejścia = „przycisk” /> a <typ wejścia = „prześlij” />

Nie ma czegoś takiego jak głupie pytanie, więc zaczynamy: Jaka jest różnica między <input type='button' />i <input type='submit' />?

<input type="button" />przyciski nie prześlą formularza - domyślnie nic nie robią. Są one zwykle używane w połączeniu z JavaScript jako część aplikacji AJAX.

<input type="submit"> przyciski prześlą formularz, w którym się znajdują, gdy użytkownik je kliknie, chyba że w JavaScript zostanie zaznaczone inaczej.

„Przycisk” to po prostu przycisk, do którego można dodać dodatkową funkcjonalność za pomocą Javascript. Typ wejściowy „Prześlij” ma domyślną funkcję przesyłania formularza, w którym jest umieszczony (choć oczywiście można dodawać dodatkowe funkcje za pomocą Javascript).

Przycisk nie przesyła formularza samodzielnie. Jest to prosty przycisk, który służy do wykonywania niektórych operacji za pomocą javascript, natomiast Prześlij jest rodzajem przycisku, który domyślnie przesyła formularz za każdym razem, gdy użytkownik kliknie przycisk Prześlij.

IE 8 faktycznie używa pierwszego przycisku napotka przycisk przesyłania lub przycisku. Zamiast łatwo wskazywać, co jest pożądane, ustawiając go na typ wejściowy = złożenie zamówienia na stronie jest w rzeczywistości znaczące.

Należy również wspomnieć, że nazwane wejście typu = „prześlij” zostanie również przesłane wraz z nazwanymi polami innego formularza, podczas gdy nazwany typ wejścia = „przycisk” nie.

Innymi słowy, w poniższym przykładzie nazwane dane wejściowe name=button1 NIE zostaną przesłane, a dane wejściowe NIE name=submit1 zostaną przesłane.

Przykładowy formularz HTML (index.html):

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

Skrypt PHP (checkout.php) przetwarzający akcję powyższego formularza:

<?php var_dump($_POST); ?>

Przetestuj powyższe na komputerze lokalnym, tworząc dwa pliki w folderze o nazwie / tmp / test /, a następnie uruchamiając wbudowany serwer PHP z powłoki:

php -S localhost:3000 -t /tmp/test/

Otwórz przeglądarkę pod adresem http: // localhost: 3000 i przekonaj się sam.

Można się zastanawiać, dlaczego mielibyśmy przesłać nazwany przycisk? To zależy od skryptu zaplecza. Na przykład wtyczka WooCommerce WordPress nie przetworzy opublikowanej strony kasy, chyba że Place Orderzostanie przesłany również nazwany przycisk. Jeśli zmienisz typ z przycisku Prześlij na przycisk, ten przycisk nie zostanie przesłany, a zatem formularz zamówienia nigdy nie zostanie przetworzony.

To prawdopodobnie mały szczegół, ale wiesz, diabeł tkwi w szczegółach.

<input type="button">mogą być używane w dowolnym miejscu, nie tylko w formularzu i nie przesyłają formularza, jeśli są w jednym. O wiele lepiej nadaje się do Javascript.

<input type="submit">należy używać tylko w formularzach, a oni wyślą żądanie (GET lub POST) na określony adres URL. Powinny one nie być umieszczone w dowolnym miejscu HTML.

W3C jasno to wyjaśnia w specyfikacji elementu Button

Przycisk może być postrzegany jako ogólna klasa dla wszystkich rodzajów przycisków bez domyślnego zachowania.

W3C

type='Submit'jest ustawiony na przesyłanie dalej i uzyskiwanie wartości na BACK-END (PHP, .NET itp.). type='button'będzie odzwierciedlać normalne zachowanie przycisku.