<düğmesi> ve <giriş türü = “düğme” />. Hangisi kullanılır?

Çoğu siteye (SO dahil) bakarken çoğu kullanılır:

<input type="button" />

onun yerine:

<button></button>

• Varsa ikisi arasındaki temel farklar nelerdir?
• Birini diğerinin yerine kullanmak için geçerli nedenler var mı?
• Bunları birleştirmenin geçerli nedenleri var mı?
• Kullanımı <button>uyumluluk sorunları ile birlikte geliyor mu , çok yaygın olarak kullanılmadığını görüyor musunuz?

• İşte farkları açıklayan bir sayfa (temel olarak html'yi bir<button></button> )
• İnsanların neden kaçındığını açıklayan başka bir sayfa<button></button> (İpucu: IE6)

Kullanırken başka bir IE sorunu <button />:

Ve IE hakkında konuşurken, düğmelerin genişliği ile ilgili birkaç hata var. Stilleri eklemeye çalışırken gizemli bir şekilde ekstra dolgu ekleyecektir, yani işleri kontrol altına almak için küçük bir kesmek eklemeniz gerekir.

Yan not olarak, <button>bir formda göndermeden bir düğmeyi kullanmak istiyorsanız sorunlara neden olabilecek dolaylı olarak gönderilecektir. Bu nedenle, kullanmak için başka bir neden <input type="button">(veya <button type="button">)

Düzenle - daha fazla ayrıntı

Bir tür olmadan, buttondolaylı olaraksubmit . Formda kaç tane gönderme düğmesi veya girdisi olduğu önemli değildir, bunlardan herhangi biri tıklandığında açık veya dolaylı olarak gönderme olarak yazılan form gönderir.

Bir düğme için 3 desteklenen tür vardır

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"

Bu makale , fark hakkında oldukça iyi bir genel bakış sunuyor.

Sayfadan:

BUTTON öğesiyle oluşturulan düğmeler, INPUT öğesiyle oluşturulan düğmeler gibi işlev görür, ancak daha zengin oluşturma olanakları sunar: BUTTON öğesinin içeriği olabilir. Örneğin, bir görüntü işlevi içeren ve türü “görüntü” olarak ayarlanmış ancak BUTON öğesi türü içeriğe izin veren bir INPUT öğesine benzeyen bir BUTTON öğesi içeriğe izin verir.

Düğme Elemanı - W3C

Bir <button>öğenin içine metin veya resim gibi içerik koyabilirsiniz.

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

Bu, bu öğe ile <input>öğe ile oluşturulan düğmeler arasındaki farktır .

Alıntı

Önemli: Düğme öğesini HTML biçiminde kullanırsanız, farklı tarayıcılar farklı değerler gönderir. Internet Explorer <button>ve </button>etiketleri arasındaki metni gönderirken, diğer tarayıcılar değer özelliğinin içeriğini gönderir. HTML formunda düğmeler oluşturmak için giriş öğesini kullanın.

Gönderen: http://www.w3schools.com/tags/tag_button.asp

Doğru anlarsam, yanıt tarayıcıdan tarayıcıya uyumluluk ve giriş tutarlılığıdır

Ben yazını alıntı yapacağım Çapalar, Girişler ve Düğmeler Arasındaki Fark :

Bağlantılar ( <a>öğe) köprüleri, bir kişinin gidebileceği veya tarayıcıda indirebileceği kaynakları temsil eder. Kullanıcının yeni bir sayfaya geçmesine veya bir dosya indirmesine izin vermek istiyorsanız, bir bağlantı kullanın.

Bir giriş ( <input>) Bir veri alanını temsil eder: sunucuya göndermek için ortalama bazı kullanıcı verileri böylece. Düğmelerle ilgili birkaç giriş türü vardır:

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

Her birinin bir anlamı vardır, örneğin bir dosya yüklemek için " dosya " kullanılır, " sıfırla " bir formu temizler ve " gönder " verileri sunucuya gönderir. MDN veya W3Schools'ta W3 referansını kontrol edin .

Düğmesi ( <button>)eleman oldukça çok yönlüdür:

• bir düğmenin içindeki görüntüler, paragraflar veya başlıklar gibi öğeleri iç içe yerleştirebilirsiniz;
• düğmeler aynı zamanda ::beforeve ::aftersözde elemanlar içerebilir ;
• düğmeleri özelliği destekler disabled. Bu, onları açıp kapatmayı kolaylaştırır.

Yine, için W3 referansını kontrol <button>etiketiyle MDN'yi üzerinde veya W3Schools'da üzerinde .

HTML kılavuzunda Formlar Sayfasından alıntı :

BUTTON öğesiyle oluşturulan düğmeler, INPUT öğesiyle oluşturulan düğmeler gibi işlev görür, ancak daha zengin oluşturma olanakları sunar: BUTTON öğesinin içeriği olabilir. Örneğin, bir görüntü işlevlerini içeren ve türü "görüntü" olarak ayarlanmış ancak BUTON öğesi türü içeriğe izin veren bir INPUT öğesine benzeyen bir BUTTON öğesi içeriğe izin verir.

Bir formda düğme oluşturmak istiyorsanız giriş öğesindeki düğmeyi kullanın. Bir eylem için düğme oluşturmak istiyorsanız düğme etiketini kullanın.

<button>

• varsayılan olarak "type =" gönder "özelliğine sahip gibi davranır
• hem form olmadan hem de form olarak kullanılabilir.
• metin veya html içeriğine izin verilir
• css sözde öğelerine izin verilir (gibi: önce)
• etiket adı genellikle tek bir forma özeldir

vs.

<input type='button'>

• tür, gönderen öğe olarak davranacak şekilde "gönder" olarak ayarlanmalıdır
• yalnızca formlarda kullanılabilir.
• yalnızca metin içeriğine izin verilir
• css sözde öğesi yok
• form öğelerinin (girişlerin) çoğu ile aynı etiket adı

-
modern tarayıcılarda, her iki öğe de css ile kolayca şekillendirilebilir, ancak çoğu durumda, buttoniç html ve sözde öğelerle daha fazla stil yapabileceğiniz için öğe tercih edilir

CSS stili söz konusu olduğunda, <button type="submit" class="Btn">Example</button>size yardımcı olabilecek CSS :beforeve :after sözde sınıfları kullanma yeteneği sağladığı için daha iyidir .

<input type="button">Görsel olarak farklı bir işleme nedeniyle <a>veya <span>belirli durumlarda sınıflarla şekillendirildiğinde bunlardan kaçınırım.

Şu anki en iyi cevabın 2009'da yazıldığına dikkat etmek çok önemlidir. IE6 günümüzde bir endişe değil, bu yüzden <button type="submit">Wins</button>gözlerimdeki stil tutarlılığı üste çıkıyor.

JQuery kullanıyorsanız büyük bir fark vardır. jQuery, girişlerdeki düğmelerden daha fazla olayın farkındadır. Düğmelerde jQuery yalnızca 'tıklama' olaylarının farkındadır. Girişlerde, jQuery 'tıklama', 'odaklama' ve 'bulanıklaştırma' olaylarının farkındadır.

Olayları düğmelerinize istediğiniz zaman bağlayabilirsiniz, ancak jQuery'nin otomatik olarak farkında olduğu olayların farklı olduğunu unutmayın. Örneğin, sayfanızda 'odaklama' olayı olduğunda yürütülen bir işlev oluşturduysanız, bir giriş işlevi tetikler, ancak bir düğme olmaz.

<button>HTML içerebilmesi açısından esnektir. Dahası, CSS kullanarak stil oluşturmak çok daha kolaydır ve stil aslında tüm tarayıcılara uygulanır. Ancak, Internet Explorer (Eww! IE!) İle ilgili bazı dezavantajlar vardır. Internet Explorer, etiketin içeriğini değer olarak kullanarak değer niteliğini düzgün algılamıyor. Bir formdaki tüm değerler, düğmenin tıklanıp tıklanmadığına bakılmaksızın sunucu tarafına gönderilir. Bu onu <button type="submit">zor ve acı olarak kullanmayı sağlar.

<input type="submit">Öte yandan herhangi bir değer veya algılama sorunu yoktur, ancak bununla birlikte HTML ekleyemezsiniz <button>. Stil vermek de daha zor ve stil her tarayıcıda her zaman iyi yanıt vermiyor. Umarım bu yardımcı olmuştur.

Sadece cevapların geri kalanına bir şeyler eklemek istiyorum. Giriş öğeleri boş veya geçersiz öğeler olarak kabul edilir (diğer boş öğeler alan, taban, br, sütun, saat, img, giriş, bağlantı, meta ve param'dir. Ayrıca burada kontrol edebilirsiniz ), yani herhangi bir içeriğe sahip olamazlar. Herhangi bir içeriğe sahip olmanın yanı sıra, boş öğelerin :: after ve :: before gibi sözde öğeleri olamaz , bu da büyük bir dezavantaj olarak kabul ediyorum.

ek olarak, farklılıklardan biri kütüphanenin sağlayıcısından ve kodladıklarından gelebilir. örneğin burada mobil açısal kullanıcı arabirimi ile birlikte cordova platformu kullanıyorum ve giriş / div / etc etiketleri ng-tıklama ile iyi çalışırken, düğme Visual Studio hata ayıklayıcı, kesinlikle programcı neden farklılıklar, çökmesine neden olabilir; MattC'nin aynı soruna işaret ettiğine dikkat edin, jQuery sadece bir lib'dir ve sağlayıcı bir öğe üzerinde, diğerinde sağladığı bazı işlevler hakkında düşünmemiştir. kitaplık kullanırken, bir öğeyle ilgili başka bir öğeyle karşılaşmayacağınız bir sorunla karşılaşabilirsiniz. ve sadece popüler olan input, daha popüler olduğu için çoğunlukla sabit olan olacak.

Her ne kadar bu çok eski bir soru olsa da ve artık alakalı olmayabilir, lütfen <button>etiketin sahip olduğu sorunların çoğunun artık mevcut olmadığını ve bu nedenle kullanılması şiddetle tavsiye edildiğini unutmayın.

Bunu çeşitli nedenlerle yapamamanız durumunda, erişilebilirliğe göre etiketinize role = ”button” niteliğini eklemeyi unutmayın. Bu makale oldukça bilgilendirici: https://www.deque.com/blog/accessible-aria-buttons/