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

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?

• Berikut adalah halaman yang menjelaskan perbedaan (pada dasarnya Anda dapat memasukkan html ke dalam <button></button>)
• Dan halaman lain yang menjelaskan mengapa orang menghindari <button></button>(Petunjuk: IE6)

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.

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"

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

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.

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

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 .

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.

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

<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

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.

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.

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

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.

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.

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/