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


222

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


2
Element <button> HTML sam nie przesyła formularza, kolego ...
Teoria Hexagon

6
W rzeczywistości działa w niektórych przeglądarkach. Posiadanie formularza bez przycisku wysyłania, ale zamiast niego <przycisk> zastosuje do niego funkcję wysyłania. Firefox ma takie zachowanie.
jishi

Podczas odczytywania specyfikacji W3C jest to zachowanie domyślne, ponieważ przyciski mają atrybut typu, który domyślnie „przesyła”.
jishi


37
Miałem to samo pytanie i to zdecydowanie nie jest głupie pytanie, zwłaszcza jeśli przez całe życie byłeś twórcą formularzy internetowych asp.net, gdzie nie używamy zwykłego HTMLa, ponieważ głupie kontrole asp.net wypluwają to gówno dla nas ... dlatego nie jesteśmy głupi, kiedy przechodzimy do MVC i musimy wrócić do przedszkola, aby dowiedzieć się, jak ponownie kodować proste elementy formularza. :)
PositiveGuy

Odpowiedzi:


235

<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.


42
Przeglądarki mogą również przechwycić naciśnięcie klawisza „Enter” na formularzu i przesłać formularz automatycznie, jeśli jest dostępny przycisk przesyłania, ale nie inaczej.
Mr. Shiny and New 安 宇

2
Robią to również, jeśli masz typ = "obraz", którego można użyć do uruchomienia formularza po kliknięciu.
jishi

5
Mr. Shiny and New: Formularze można przesyłać za pomocą klawisza Enter bez żadnych przycisków. Wystarczy na przykład skoncentrować się na wprowadzaniu tekstu.
Lasar

3
Możesz używać elementów PRZYCISKOWYCH, chociaż (niespodzianka niespodzianka) istnieje kilka problemów z nimi podczas korzystania z Ulubionej przeglądarki Wszyscy (IE). Warto jednak wiedzieć.

4
Jest to oczywiście bardzo stary, ale czuję potrzebę przekazania moich 2 centów, ponieważ uważam, że jest to duży upadek używania typów przycisków ... zdarzenie onsubmit formularza NIE jest uruchamiane na podstawie zgłoszeń javascript, co prowadzi do potencjalnych koszmarów związanych z konserwacją.
mothmonsterman,

20

„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).


7

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.


3

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.


3

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.


Czy jest to zgodne ze specyfikacją, czy zależy od przeglądarki?
Magnus Lind Oxlund,

0

<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.


0

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


0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.