Pertanyaan


Ketika melihat sebagian besar situs (termasuk SO), sebagian besar dari mereka menggunakan:

<input type="button" />

dari pada:

<button></button>
  • Apa perbedaan utama antara keduanya, jika ada?
  • Adakah alasan yang sah untuk menggunakan yang satu selain yang lain?
  • Adakah alasan sah untuk menggunakan menggabungkannya?
  • Apakah menggunakan <button> datang dengan masalah kompatibilitas, melihat itu tidak terlalu banyak digunakan?

1431
2018-01-22 13:14


asal


Jawaban:


  • Ini ada halaman menggambarkan perbedaan (pada dasarnya Anda dapat memasukkan html ke dalam <button></button>)
  • Dan halaman lain menggambarkan mengapa orang menghindari <button></button> (Petunjuk: IE6)

Masalah IE lain saat menggunakan <button />:

Dan sementara kita berbicara tentang IE, itu   punya beberapa bug yang terkait dengan   lebar tombol. Itu akan secara misterius   tambahkan pengisi tambahan saat Anda mencoba   untuk menambahkan gaya, yang berarti Anda harus menambahkan   peretasan kecil untuk menyelesaikan masalah   kontrol.


588
2018-01-22 13:20



Sama seperti catatan samping, <button> secara implisit akan mengirimkan, yang dapat menyebabkan masalah jika Anda ingin menggunakan tombol dalam bentuk tanpa itu mengirimkan. Dengan demikian, alasan lain untuk digunakan <input type="button"> (atau <button type="button">)

Edit - keterangan lebih lanjut

Tanpa tipe, button secara implisit menerima jenis submit. Tidak masalah berapa banyak tombol atau masukan yang dikirimkan dalam bentuk, salah satu dari mereka yang secara eksplisit atau implisit diketik sebagai menyerahkan, ketika diklik, akan menyerahkan formulir.

Ada 3 tipe 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"

270
2018-04-09 20:13



Artikel ini tampaknya menawarkan gambaran yang cukup bagus tentang perbedaannya.

Dari halaman:

Tombol dibuat dengan fungsi elemen TOMBOL sama seperti tombol   dibuat dengan elemen INPUT, tapi   mereka menawarkan rendering lebih kaya   kemungkinan: elemen TOMBOL mungkin   memiliki konten. Misalnya, TOMBOL   elemen yang berisi gambar   berfungsi seperti dan mungkin menyerupai   Elemen INPUT yang jenisnya diatur ke   "Gambar", tetapi jenis elemen TOMBOL   memungkinkan konten.

Elemen Tombol - W3C


159
2018-01-22 13:19



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

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

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


38
2018-03-28 04:27



Kutipan

Penting: Jika Anda menggunakan elemen tombol dalam bentuk HTML, browser yang berbeda akan mengirimkan nilai yang berbeda. Internet Explorer akan mengirimkan teks antara <button> dan </button> tag, sementara peramban lain akan mengirimkan konten 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 masukan dari browser ke browser


36
2018-01-22 13:18



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


16
2018-03-01 08:17



Saya akan mengutip artikel itu Perbedaan Antara Jangkar, Masukan dan Tombol:

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

Sebuah memasukkan (<input>) mewakili bidang data: jadi beberapa data pengguna yang Anda maksud untuk dikirim ke server. Ada beberapa jenis masukan yang terkait dengan tombol: <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
Masing-masing memiliki arti, misalnya "mengajukan"digunakan untuk mengunggah file,"ulang"membersihkan formulir, dan"menyerahkan"mengirim data ke server. Periksa referensi W3 di MDN atau di W3Schools.

Itu tombol (<button>) elemen cukup serbaguna:

  • Anda dapat menumpuk elemen di dalam tombol, seperti gambar, paragraf, atau header;
  • tombol juga bisa mengandung ::before dan ::after unsur-unsur pseudo;
  • tombol mendukung disabled atribut. Ini membuatnya mudah untuk diputar mereka hidup dan mati.

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


16
2017-11-08 14:31



Mengutip Halaman Formulir di manual HTML:

Tombol dibuat dengan fungsi elemen TOMBOL seperti tombol yang dibuat dengan elemen INPUT, tetapi mereka menawarkan kemungkinan render lebih kaya: elemen TOMBANG mungkin memiliki konten. Misalnya, elemen TOMBOL yang berisi fungsi gambar seperti dan mungkin menyerupai elemen INPUT yang jenisnya diatur ke "gambar", tetapi jenis elemen TOMBOL memungkinkan konten.


15
2018-01-22 13:19



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

Anda selalu dapat mengikat acara ke tombol Anda sesuai kebutuhan, tetapi cukup disadari bahwa peristiwa yang secara otomatis disadari oleh jQuery berbeda. Misalnya, jika Anda membuat fungsi yang dijalankan setiap kali ada acara 'fokusin' di halaman Anda, masukan akan memicu fungsi tetapi tombol tidak.


8
2017-12-21 17:12