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

149

Ada banyak legenda tentang mereka. Saya ingin tahu yang sebenarnya. Apa perbedaan antara dua contoh berikut?

  1. <input type='submit' value='text' />

  2. <button type='submit'>text</button>

html button James
sumber
29
Apakah maksud Anda <input type="submit">dan <button type="submit">?
kennytm
2
Kemungkinan duplikat Perbedaan antara <input type = 'button' /> dan <input type = 'submit' />
Hakan Fıstık
1
inputadalah elemen batal. Jangan gunakan <input />, gunakan saja <input>.
CDT
@ HakanFıstık, bukan dup itu, pernah ke sana, itu yang (kurang lebih halus) berbeda, misalnya type=submituntuk buttonbahkan bukan masalah di sana (kemungkinan karena itu bahkan bukan bagian dari std. Saat itu (AFAIK), ketika pertanyaan lain diajukan).
Sz.

Jawaban:

121

Tidak yakin dari mana Anda mendapatkan legenda tetapi:

Kirim tombol dengan <button>

Seperti:

<button type="submit">(html content)</button>

IE6 akan mengirimkan semua teks untuk tombol ini di antara tag, browser lain hanya akan mengirimkan nilai. Menggunakan <button>memberi Anda lebih banyak kebebasan tata letak atas desain tombol. Dalam semua maksud dan tujuannya, itu tampak sangat baik pada awalnya, tetapi berbagai kebiasaan browser membuatnya sulit untuk digunakan di kali.

Dalam contoh Anda, IE6 akan mengirim textke server, sementara sebagian besar browser lain tidak akan mengirim apa pun. Untuk membuatnya kompatibel lintas-browser, gunakan <button type="submit" value="text">text</button>. Lebih baik lagi: jangan gunakan nilainya, karena jika Anda menambahkan HTML itu menjadi agak rumit apa yang diterima di sisi server. Sebaliknya, jika Anda harus mengirim nilai tambahan, gunakan bidang tersembunyi.

Tombol dengan <input>

Seperti:

<input type="button" />

Secara default, ini tidak menghasilkan apa-apa. Bahkan tidak akan mengirimkan formulir Anda. Anda hanya dapat menempatkan teks pada tombol dan memberi ukuran dan batas dengan CSS. Maksud aslinya (dan saat ini) adalah untuk mengeksekusi skrip tanpa perlu mengirimkan formulir ke server.

Tombol kirim normal dengan <input>

Seperti:

<input type="submit" />

Seperti yang pertama, tetapi sebenarnya menyerahkan formulir di sekitarnya.

Tombol kirim gambar dengan <input>

Seperti:

<input type="image" />

Seperti yang pertama (kirim), itu juga akan mengirimkan formulir, tetapi Anda dapat menggunakan gambar apa pun. Ini dulunya merupakan cara yang disukai untuk menggunakan gambar sebagai tombol ketika formulir perlu dikirimkan. Untuk kontrol lebih lanjut, <button>sekarang digunakan. Ini juga dapat digunakan untuk peta gambar sisi server tapi itu jarang terjadi hari ini. Saat Anda menggunakanusemap -attribute dan (dengan atau tanpa atribut itu), browser akan mengirimkan koordinat X / Y mouse-pointer ke server (lebih tepatnya, lokasi pointer-mouse di dalam tombol saat Anda mengkliknya). Jika Anda mengabaikan ekstra ini, itu tidak lebih dari tombol kirim yang disamarkan sebagai gambar.

Ada beberapa perbedaan halus antara browser, tetapi semua akan mengirimkan atribut nilai, kecuali untuk <button>tag seperti yang dijelaskan di atas.

Abel
sumber
1
Karena bagaimanapun Anda telah mengedit, poin tentang IE6 masih benar dengan IE11 dalam mode kebiasaan. (Namun alasan lain untuk tidak menggunakan mode kebiasaan). Tetap di Edge. Oh, dan ada lebih banyak perbedaan antara <input> dan <button>: <input> white-space:presecara default, <button> tidak. Ini menjadi jelas ketika mencoba membuat tombol lebih lebar dari viewport.
Tn. Lister
19

Dengan <button>, Anda dapat menggunakan tag img, dll. Di mana teks berada

<button type='submit'> text -- can be img etc.  </button>

dengan <input>tipe, Anda terbatas pada teks

Sparky
sumber
dengan <input type="image" />Anda tidak terbatas pada teks dan juga melakukan pengiriman.
Abel
2
@ Bel: itu lebih untuk membuat peta gambar yang pada gilirannya mengirimkan posisi pointer mouse sebagai name.xdan name.yparameter (perhatikan bahwa nameparameter tidak ada!). Saya lebih suka menggunakan <input type="submit">dengan latar belakang CSS jika satu-satunya tujuan adalah untuk memiliki tombol dengan gambar latar belakang.
BalusC
@ BalusC: Benar, tetapi tujuannya, pada saat penulisan standar HTML 2.0, ketika tidak ada CSS, adalah, seperti yang dijelaskan, untuk menggunakan gambar sebagai tombol atau sebagai peta gambar sisi-server. Tetapi memang, Anda dapat (ab) menggunakan tombol normal dengan gambar latar belakang untuk melakukan hal yang sama dengan CSS dan HTML.
Abel
@ Bel: Itu tidak pernah menjadi tujuan input type="image". Untuk itulah yang <button type="submit">dimaksud.
BalusC
1
@BalusC: mungkin kita memahami standar secara berbeda, tetapi ini dalam teks asli Lee untuk standar HTML 2.0: " TYPE=IMAGE' implies TYPE = SUBMIT 'processing; yaitu, ketika sebuah pixel dipilih, formulir secara keseluruhan dikirimkan." . Jadikan apa yang Anda pikirkan adalah niat sebenarnya :)
Abel
1

Singkatnya :

<input type="submit">

<button type="submit"> Submit </button>

Keduanya secara default akan menggambar tombol yang melakukan tindakan yang sama (mengirimkan formulir).

Namun, dianjurkan untuk menggunakan <button type="submit">karena memiliki semantik yang lebih baik, dukungan ARIA yang lebih baik dan lebih mudah untuk bergaya.

Juanma Menendez
sumber