Perbedaan antara <input type = 'button' /> dan <input type = 'submit' />

223

Tidak ada yang namanya pertanyaan bodoh, jadi di sini kita mulai: Apa perbedaan antara <input type='button' />dan <input type='submit' />?

html input types bounav
sumber
2
Elemen HTML <button> tidak mengirimkan formulir sendiri, sobat ...
Hexagon Theory
6
Sebenarnya, itu ada di beberapa browser. Memiliki formulir, tanpa tombol kirim tetapi sebagai gantinya <button> akan menerapkan fungsi kirim ke sana. Firefox memiliki perilaku ini.
jishi
Saat membaca spesifikasi W3C ini sebenarnya adalah perilaku default, karena tombol memiliki atribut tipe yang defaultnya "dikirimkan".
jishi
2
Lihat juga tipe input = "kirim" Tag tombol Vs apakah dapat dipertukarkan?
hippietrail
37
Saya memiliki pertanyaan yang sama dan ini jelas bukan pertanyaan bodoh, terutama jika Anda telah menjadi pengembang formulir web asp.net sepanjang hidup Anda di mana kami tidak menggunakan html biasa hari itu juga karena kontrol asp.net yang bodoh meludahkan omong kosong ini bagi kami ... itu sebabnya kami akhirnya menjadi bodoh ketika pindah ke MVC dan harus kembali ke taman kanak-kanak untuk mencari tahu bagaimana kode elemen bentuk sederhana lagi. :)
PositiveGuy

Jawaban:

235

<input type="button" />tombol tidak akan mengirimkan formulir - mereka tidak melakukan apa pun secara default. Mereka umumnya digunakan bersama dengan JavaScript sebagai bagian dari aplikasi AJAX.

<input type="submit"> tombol akan mengirimkan formulir di mana pengguna mengkliknya, kecuali jika Anda menentukan sebaliknya dengan JavaScript.


sumber
42
Browser juga dapat menangkap penekanan tombol "Enter" pada formulir dan mengirimkan formulir secara otomatis jika ada tombol kirim, tetapi tidak sebaliknya.
Tn. Shiny dan Baru 安 宇
2
Mereka juga melakukan itu jika Anda memiliki type = "image", yang dapat digunakan untuk memicu pengiriman formulir ketika diklik.
jishi
5
Tn. Shiny dan Baru: Formulir dapat dikirimkan melalui tombol enter tanpa tombol apa pun. Misalnya, cukup fokus pada input teks.
Lasar
3
Anda dapat menggunakan elemen BUTTON, meskipun (kejutan kejutan) ada beberapa masalah dengan mereka ketika menggunakan Browser Favorit Semua Orang (IE). Layak tahu tentang itu.
4
Ini jelas sangat tua tapi saya merasa perlu untuk memberikan 2 sen saya karena saya merasa itu adalah kejatuhan besar menggunakan jenis tombol ... bentuk acara pengiriman TIDAK dipecat dari pengajuan javascript, yang mengarah ke mimpi buruk pemeliharaan potensial.
mothmonsterman
20

'Tombol' hanya itu, sebuah tombol, di mana Anda dapat menambahkan fungsionalitas tambahan menggunakan Javascript. Jenis input 'kirim' memiliki fungsi default untuk mengirimkan formulir yang ada di dalamnya (meskipun, tentu saja, Anda masih dapat menambahkan fungsionalitas tambahan menggunakan Javascript).

Aistina
sumber
7

Tombol tidak akan mengirimkan formulir sendiri. Ini adalah tombol sederhana yang digunakan untuk melakukan beberapa operasi dengan menggunakan javascript sedangkan Kirim adalah jenis tombol yang secara default mengirimkan formulir setiap kali pengguna mengklik tombol kirim.

Sujeet Srivastava
sumber
3

IE 8 sebenarnya menggunakan tombol pertama yang ditemui atau tombol. Alih-alih dengan mudah menunjukkan mana yang diinginkan dengan menjadikannya tipe input = kirim pesanan pada halaman sebenarnya signifikan.

Martin Murphy
sumber
3

Juga harus disebutkan bahwa input bernama type = "submit" juga akan dikirimkan bersama dengan field bernama form lainnya sementara input type bernama "button" tidak akan.

Dengan kata lain, dalam contoh di bawah ini, input bernama name=button1 TIDAK AKAN disampaikan sementara input bernama name=submit1 AKAN dikirimkan.

Contoh formulir 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>

Skrip PHP (checkout.php) yang memproses tindakan formulir di atas:

<?php var_dump($_POST); ?>

Tes di atas pada mesin lokal Anda dengan membuat dua file di folder bernama / tmp / test / lalu jalankan server web PHP bawaan dari shell:

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

Buka browser Anda di http: // localhost: 3000 dan lihat sendiri.

Orang akan bertanya-tanya mengapa kita perlu mengirimkan tombol bernama? Itu tergantung pada skrip back-end. Sebagai contoh, plugin WordPress WooCommerce tidak akan memproses halaman Checkout yang diposting kecuali Place Ordertombol bernama juga dikirimkan. Jika Anda mengubah jenisnya dari tombol kirim ke maka tombol ini tidak akan dikirimkan dan dengan demikian formulir Checkout tidak akan pernah diproses.

Ini mungkin detail kecil tapi Anda tahu, iblis ada dalam detailnya.

Eugen Mihailescu
sumber
Apakah ini sesuai dengan spesifikasi atau tergantung browser?
Magnus Lind Oxlund
0

<input type="button">dapat digunakan di mana saja, tidak hanya dalam bentuk dan mereka tidak mengirimkan formulir jika mereka dalam satu. Jauh lebih cocokJavascript .

<input type="submit">harus digunakan hanya dalam bentuk dan mereka akan mengirim permintaan (baik GET atau POST) ke URL yang ditentukan. Mereka tidak boleh diletakkan di tempat HTML mana pun.


sumber
0

W3C memperjelas, tentang spesifikasi tentang elemen Tombol

Tombol dapat dilihat sebagai kelas umum untuk semua jenis Tombol tanpa perilaku default.

W3C

Mahfoud Boukert
sumber
0

type='Submit'diatur untuk meneruskan & mendapatkan nilai pada BACK-END (PHP, .NET dll). type='button'akan mencerminkan perilaku tombol normal.

Shashank Malviya
sumber