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?
html
button
compatibility
html-input
Aron Rotteveel
sumber
sumber
<button>
sekarang?<button />
juga memilikiform
atribut (dan atribut terkait) sehingga dapat ditautkan ke formulir di bagian lain dari badan dokumen.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,
button
secara 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
sumber
submit
sebagai default ketika 99,9% dari bentuk memiliki banyakbutton
dengan satusubmit
?!Artikel ini tampaknya menawarkan ikhtisar perbedaan yang cukup bagus.
Dari halaman:
sumber
Di dalam
<button>
elemen Anda dapat meletakkan konten, seperti teks atau gambar.Ini adalah perbedaan antara elemen ini dan tombol yang dibuat dengan
<input>
elemen.sumber
<input />
memang elemen batal, sementara<button>
tidakMengutip
Dari: http://www.w3schools.com/tags/tag_button.asp
Jika saya mengerti dengan benar, jawabannya adalah kompatibilitas dan konsistensi input dari browser ke browser
sumber
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:::before
dan::after
elemen semu;disabled
atribut. Ini membuatnya mudah untuk menghidupkan dan mematikannya.Sekali lagi, periksa referensi W3 untuk
<button>
tag di MDN atau W3Schools .sumber
Mengutip Halaman Formulir di manual HTML:
sumber
Gunakan tombol dari elemen input jika Anda ingin membuat tombol dalam formulir. Dan gunakan tag tombol jika Anda ingin membuat tombol untuk suatu tindakan.
sumber
vs.
-
di browser modern, kedua elemen mudah ditata dengan css tetapi dalam kebanyakan kasus,
button
elemen lebih disukai karena Anda dapat lebih banyak gaya dengan html dalam dan elemen semusumber
Sejauh styling CSS yang bersangkutan
<button type="submit" class="Btn">Example</button>
lebih baik karena memberikan Anda kemampuan untuk menggunakan CSS:before
dan: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.sumber
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.
sumber
<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.sumber
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.
sumber
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.sumber
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/
sumber