<button> vs. <input type = "button" />. Yang mana untuk digunakan?

1635

Saat melihat sebagian besar situs (termasuk SO), sebagian besar menggunakan:

<input type="button" />

dari pada:

<button></button>
  • Apa perbedaan utama antara keduanya, jika ada?
  • Apakah ada alasan yang sah untuk menggunakan salah satunya?
  • Apakah ada alasan yang sah untuk menggunakan menggabungkannya?
  • Apakah menggunakan <button>disertai dengan masalah kompatibilitas, melihatnya tidak terlalu banyak digunakan?
Aron Rotteveel
sumber

Jawaban:

662

Masalah IE lain saat menggunakan <button />:

Dan sementara kita berbicara tentang IE, ada beberapa bug yang terkait dengan lebar tombol. Ini akan secara misterius menambah lapisan tambahan ketika Anda mencoba untuk menambahkan gaya, yang berarti Anda harus menambahkan retasan kecil untuk mengendalikan keadaan.

Tamas Czinege
sumber
186
Jawaban ini pada tahun 2009, karena IE6 sudah mati sekarang saya menganggap tidak ada alasan untuk tidak menggunakan <button>sekarang?
Rosdi Kasim
75
Jika mereka ingin membajak, biarkan mereka mendapatkan versi sial situs Anda. Drop IE6, drop IE7, sayangnya IE8 masih membutuhkan dukungan.
Jared
15
Menurut halaman Countdown IE6 Microsoft , penggunaan IE6 China masih mencatat waktu (per Januari 2014) sekitar 22%. ie6death.com mencatat bahwa dukungan IE6 akan berakhir 8 April 2014.
BryanH
54
Seperti banyak orang telah menyindir, pengguna yang masih menggunakan IE versi lama cenderung terbiasa dengan internet yang tampak rusak parah.
jinglesthula
9
<button />juga memiliki formatribut (dan atribut terkait) sehingga dapat ditautkan ke formulir di bagian lain dari badan dokumen.
Gup3rSuR4c
327

Sama seperti catatan tambahan, <button>secara implisit akan mengirimkan, yang dapat menyebabkan masalah jika Anda ingin menggunakan tombol dalam formulir tanpa mengirimkannya. Jadi, alasan lain untuk menggunakan <input type="button">(atau <button type="button">)

Edit - detail lebih lanjut

Tanpa tipe, buttonsecara implisit menerima tipesubmit . Tidak masalah berapa banyak tombol yang dikirimkan atau input yang ada dalam formulir, salah satu dari mereka yang secara eksplisit atau implisit diketikkan sebagai kirim, ketika diklik, akan mengirimkan formulir.

Ada 3 jenis yang didukung untuk sebuah tombol

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"
Travis J
sumber
4
dapatkah Anda menambahkan lebih detail? apa yang terjadi jika ada beberapa tombol? apakah hanya ketik = 'kirim' yang melakukan ini?
Simon_Weaver
44
Oh sayang W3C, mengapa submitsebagai default ketika 99,9% dari bentuk memiliki banyak buttondengan satu submit ?!
2grit
13
Banyak formulir juga hanya memiliki satu tombol, yaitu mengirimkan. Harus membuat panggilan satu arah atau yang lain, saya kira.
jinglesthula
5
Ini bisa menjadi gotcha BESAR! Kode pengujian saya mengirimkan sekitar 80% dari waktu jika tidak diperlakukan sebagai tombol normal. HATI-HATI saat menggunakan <button> dalam <form>
Sydwell
4
@ mik01aj "Tidak masalah berapa banyak tombol yang dikirimkan atau input yang ada dalam formulir, salah satu dari mereka yang secara eksplisit atau implisit diketik sebagai kirim, ketika diklik, akan mengirimkan formulir." Bukankah ini sudah jelas? Setiap tombol kirim harus mengirimkan formulir. Kenapa mengatakan ini? Apa yang saya lewatkan?
Concrete Gannet
174

Artikel ini tampaknya menawarkan ikhtisar perbedaan yang cukup bagus.

Dari halaman:

Tombol yang dibuat dengan fungsi elemen BUTTON sama seperti tombol yang dibuat dengan elemen INPUT, tetapi mereka menawarkan kemungkinan rendering yang lebih kaya: elemen BUTTON mungkin memiliki konten. Misalnya, elemen BUTTON yang berisi fungsi gambar suka dan mungkin menyerupai elemen INPUT yang tipenya diatur ke "gambar", tetapi jenis elemen BUTTON memungkinkan konten.

Elemen Tombol - W3C

Noldorin
sumber
44

Di dalam <button>elemen Anda dapat meletakkan konten, seperti teks atau gambar.

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

Ini adalah perbedaan antara elemen ini dan tombol yang dibuat dengan <input>elemen.

Santhosh
sumber
4
+1, karena <input />memang elemen batal, sementara <button>tidak
Sebastian
39

Mengutip

Penting: Jika Anda menggunakan elemen tombol dalam formulir HTML, browser yang berbeda akan mengirimkan nilai yang berbeda. Internet Explorer akan mengirimkan teks di antara tag <button>dan </button>, sementara browser lain akan mengirimkan konten dari atribut nilai. Gunakan elemen input untuk membuat tombol dalam bentuk HTML.

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

Jika saya mengerti dengan benar, jawabannya adalah kompatibilitas dan konsistensi input dari browser ke browser

pengguna54579
sumber
43
@Hawken Halaman itu ditulis oleh para idiot yang berpikir W3Schools berpura-pura menjadi W3C. Pada kenyataannya, W3Schools tidak lebih baik atau lebih buruk daripada ribuan situs lain yang menangani materi semacam ini.
Tuan Lister
sebenarnya, itu tergantung pada versi IE dan mode IE - w3schools memperbarui info sejak kutipan
Damien
12
@ Mr.Lister Saya sudah bicara dengan orang-orang yang berpikir W3Schools dikaitkan dengan W3C. Meskipun saya tidak yakin saya setuju dengan "tanggung jawab W3Fools untuk memberikan informasi yang akurat", saya pikir akurasi W3Schools meninggalkan sesuatu yang diinginkan, dan bahwa para kritikusnya tidak selalu idiot. (Saya belajar banyak dari W3S, saat itu bagus; itu tidak mengikuti standar.)
Marnen Laibow-Koser
17
@MrLister W3Schools adalah sumber tidak resmi yang paling sering digunakan untuk informasi teknologi Web. Dan kualitasnya sangat menyebalkan. Mengapa tidak memilih mereka? Dan detail apa yang salah dari W3Fools? Segala sesuatu di sana terlihat benar bagi saya.
Marnen Laibow-Koser
19

Saya akan mengutip artikel Perbedaan Antara Jangkar, Input dan Tombol :

Jangkar ( <a>elemen) mewakili hyperlink, sumber daya yang dapat ditavigasi seseorang atau unduh di browser. Jika Anda ingin mengizinkan pengguna untuk pindah ke halaman baru atau mengunduh file, gunakan jangkar.

Sebuah masukan ( <input>) merupakan data lapangan: sehingga beberapa data pengguna yang Anda maksud untuk mengirim ke server. Ada beberapa jenis input yang terkait dengan tombol:

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

Masing-masing dari mereka memiliki makna, misalnya " file " digunakan untuk mengunggah file, " reset " membersihkan formulir, dan " mengirimkan " mengirim data ke server. Periksa referensi W3 di MDN atau di W3Schools .

The tombol ( <button>)elemen cukup serbaguna:

  • Anda bisa membuat elemen di dalam tombol, seperti gambar, paragraf, atau header;
  • tombol juga dapat berisi ::beforedan ::afterelemen semu;
  • tombol mendukung disabledatribut. Ini membuatnya mudah untuk menghidupkan dan mematikannya.

Sekali lagi, periksa referensi W3 untuk <button>tag di MDN atau W3Schools .

Attilio
sumber
17

Mengutip Halaman Formulir di manual HTML:

Tombol yang dibuat dengan fungsi elemen BUTTON sama seperti tombol yang dibuat dengan elemen INPUT, tetapi mereka menawarkan kemungkinan rendering yang lebih kaya: elemen BUTTON mungkin memiliki konten. Misalnya, elemen BUTTON yang berisi fungsi gambar suka dan mungkin menyerupai elemen INPUT yang tipenya diatur ke "gambar", tetapi tipe elemen BUTTON memungkinkan konten.

Gimel
sumber
17

Gunakan tombol dari elemen input jika Anda ingin membuat tombol dalam formulir. Dan gunakan tag tombol jika Anda ingin membuat tombol untuk suatu tindakan.

nickomarsa
sumber
9
Untuk skrip sisi klien. <input type = "button"> tidak memiliki fungsi dalam HTML.
iGEL
12
<button>
  • secara default berperilaku seperti jika itu memiliki atribut "type =" submit "
  • dapat digunakan tanpa formulir maupun dalam bentuk.
  • konten teks atau html diizinkan
  • elemen pseudo css diizinkan (seperti: sebelumnya)
  • nama tag biasanya unik untuk satu bentuk

vs.

<input type='button'>
  • tipe harus diatur ke 'kirim' untuk berperilaku sebagai elemen yang mengirimkan
  • hanya bisa digunakan dalam bentuk.
  • hanya konten teks yang diizinkan
  • tidak ada elemen pseudo css
  • nama tag yang sama dengan sebagian besar elemen bentuk (input)

-
di browser modern, kedua elemen mudah ditata dengan css tetapi dalam kebanyakan kasus, buttonelemen lebih disukai karena Anda dapat lebih banyak gaya dengan html dalam dan elemen semu

Sergey Sklyar
sumber
9

Sejauh styling CSS yang bersangkutan <button type="submit" class="Btn">Example</button>lebih baik karena memberikan Anda kemampuan untuk menggunakan CSS :beforedan :after kelas semu yang dapat membantu.

Karena <input type="button">render visual yang berbeda dengan <a>atau <span>ketika ditata dengan kelas-kelas dalam situasi tertentu saya menghindarinya.

Sangat berharga untuk mencatat jawaban teratas saat ini ditulis pada tahun 2009. IE6 tidak menjadi perhatian sekarang, jadi <button type="submit">Wins</button>konsistensi gaya di mata saya keluar di atas.

jlandland
sumber
9

Ada perbedaan besar jika Anda menggunakan jQuery. jQuery menyadari lebih banyak peristiwa pada input daripada pada tombol. Pada tombol, jQuery hanya mengetahui acara 'klik'. Pada input, jQuery mengetahui peristiwa 'klik', 'fokus', dan 'blur'.

Anda selalu dapat mengikat acara ke tombol sesuai kebutuhan, tetapi perlu diketahui bahwa peristiwa yang diketahui secara otomatis oleh jQuery berbeda. Misalnya, jika Anda membuat fungsi yang dieksekusi setiap kali ada acara 'focusin' di halaman Anda, input akan memicu fungsi tetapi tombol tidak.

MattC
sumber
re: KjetilNordin - Kami memiliki aplikasi yang mengetahui adanya fokus pada acara pada halaman, dan satu terjadi, suatu tindakan terjadi. Jadi, jika menggunakan input, Anda dapat menonton semua elemen untuk satu peristiwa. Bukan mengatakan Anda harus, tetapi Anda bisa. Risikonya adalah seseorang mengubah input ke tombol, dan kemudian fokus pada tidak terjadi, dan kemudian tindakan Anda tidak terjadi, dan kemudian aplikasi Anda menjadi booming. Itulah yang terjadi pada kita. :)
MattC
1
gunakan acara fokus ketika suatu elemen saat ini ditargetkan melalui mouse / keyboard. mereka menunjukkan kepada pengguna di mana mereka berada dalam dokumen.
albert
7

<button>fleksibel karena dapat berisi HTML. Selain itu, jauh lebih mudah untuk menata menggunakan CSS, dan styling sebenarnya diterapkan di semua browser. Namun, ada beberapa kelemahan tentang Internet Explorer (Eww! IE!). Internet Explorer tidak mendeteksi atribut nilai dengan benar, menggunakan konten tag sebagai nilainya. Semua nilai dalam formulir dikirim ke sisi server, terlepas dari apakah tombol diklik atau tidak. Ini menjadikannya sebagai sesuatu yang <button type="submit">rumit dan menyakitkan.

<input type="submit">di sisi lain tidak memiliki masalah nilai atau deteksi, tetapi Anda tidak dapat, menambahkan HTML seperti yang Anda bisa lakukan <button>. Ini juga lebih sulit untuk ditata, dan penataannya tidak selalu merespons dengan baik di semua peramban. Semoga ini bisa membantu.

Moh S.
sumber
7

Saya hanya ingin menambahkan sesuatu ke seluruh jawaban di sini. Elemen input dianggap elemen kosong atau batal (elemen kosong lainnya adalah area, basis, br, col, jam, img, input, tautan, meta, dan param. Anda juga dapat memeriksa di sini ), yang berarti mereka tidak dapat memiliki konten apa pun. Selain tidak memiliki konten apa pun, elemen kosong tidak dapat memiliki elemen semu seperti :: after dan :: before , yang saya anggap sebagai kelemahan utama.

Roumelis George
sumber
4

selain itu, salah satu perbedaan dapat berasal dari penyedia perpustakaan, dan apa kode mereka. misalnya di sini saya menggunakan platform cordova yang dikombinasikan dengan mobile angular ui, dan sementara tag input / div / etc bekerja dengan baik dengan ng-klik, tombolnya dapat menyebabkan Visual Studio debugger macet, tentunya karena perbedaan, yang disebabkan oleh programmer; perhatikan bahwa jawaban MattC menunjuk ke masalah yang sama, jQuery hanya sebuah lib, dan penyedia tidak memikirkan beberapa fungsi pada satu elemen, yang ia sediakan pada elemen lainnya. jadi ketika Anda menggunakan perpustakaan, Anda mungkin menghadapi masalah dengan satu elemen, yang Anda tidak akan hadapi dengan yang lain. dan hanya yang populer seperti input, sebagian besar akan tetap, hanya karena lebih populer.

deadManN
sumber
4

Meskipun ini adalah pertanyaan yang sangat lama dan mungkin tidak relevan lagi, harap diingat bahwa sebagian besar masalah yang <button>digunakan oleh tag tidak ada lagi dan oleh karena itu sangat disarankan untuk menggunakannya.

Jika Anda tidak dapat melakukannya karena berbagai alasan, perlu diingat untuk menambahkan atribut role = ”tombol” di tag Anda sebagai aksesibilitas. Artikel ini cukup informatif: https://www.deque.com/blog/accessible-aria-buttons/

Nasia Makrygianni
sumber