Perbedaan antara tombol dan tipe input = tombol dan tindakan pencegahan

Tag <buton>

Definisi dan penggunaan

Tag <button> mendefinisikan tombol.

Di dalam elemen tombol, Anda dapat menempatkan konten, seperti teks atau gambar. Ini adalah perbedaan antara elemen ini dan tombol yang dibuat dengan elemen input.

Kontrol <button> memberikan fitur yang lebih kuat dan konten yang lebih kaya daripada <inputType = tombol>. Semua konten antara tag <button> dan </button> adalah konten tombol, yang mencakup konten tubuh yang dapat diterima, seperti teks atau konten multimedia. Misalnya, kita dapat menyertakan gambar dan teks terkait dalam tombol, dan menggunakannya untuk membuat gambar markup yang menarik di tombol.

Satu-satunya elemen yang dilarang adalah pemetaan gambar, karena tindakan yang sensitif terhadap mouse dan keyboard dapat mengganggu perilaku tombol bentuk.

Harap selalu tentukan jenis atribut untuk tombol. Jenis default dari InternetExplorer adalah tombol, sedangkan nilai default di browser lain (termasuk spesifikasi W3C) dikirimkan.

Dukungan Browser

Semua browser arus utama mendukung tag <button>.

Penting : Jika Anda menggunakan elemen tombol dalam formulir HTML, browser yang berbeda akan mengirimkan nilai yang berbeda. InternetExplorer akan mengirimkan teks antara <button> dan <button/>, sementara browser lain akan mengirimkan konten atribut nilai. Silakan gunakan elemen input dalam formulir HTML untuk membuat tombol.

Hal -hal yang perlu diperhatikan

Saat menggunakan tag <button>, mudah untuk menerima begitu saja sebagai <inputType = tombol>, yang dapat dengan mudah menyebabkan penggunaan kesalahan berikut:

1. Dapatkan nilai <ButtonId = CustomBtNValue = Test> Tombol </button> Nilai melalui $ ('#CustomBtn'). Val ()

Dalam IE (IE kernel), nilainya adalah tombol, bukan tes, dan tes diperoleh di non-IE. Berpartisipasi dalam kalimat pertama yang ditandai di atas.

Ini harus dibedakan dari <inputType = tombol>.

Dalam dua cara ini $ ('#CustomBtn'). Val (), $ ('#CustomBtn'). Attr ('Value') mendapatkan nilai -nilai di browser yang berbeda, sebagai berikut:

Browser/Nilai	$ ('#custombtn'). val ()	$ ('#custombtn'). attr ('value')
Firefox13.0	tes	tes
Chrome 15.0	tes	tes
Opera11.61	tes	tes
Safari5.1.4	tes	tes
Yaitu.0	Tombol	Tombol

Pastikan ini dalam kode uji di bawah ini

Salin kode