Html Forms Form Submit Submit Button

Sorunun Anlaşılması: HTML Formlarında Birden Fazla Gönder Butonu

Büyüleyici bir HTML formu oluşturmak genellikle “Önceki” ve “Sonraki” gibi birden fazla gönder butonu gerektirir. Ancak, Enter tuşuna basıldığında yaygın bir sorun ortaya çıkar: tarayıcı, işaretleme sırasına göre ilk gönder butonunu otomatik olarak tetikler. Bu, özellikle “Sonraki” butonunun “Önceki” butondan daha fazla etkinleştirilmesini istiyorsanız can sıkıcı olabilir. Zorluk, Enter tuşuna basıldığında formun hangi butonu gönderdiğini kontrol etmenin bir yolunu bulmaktır.

Bu yazıda, kullanıcı deneyimini karmaşık hale getiren JavaScript yöntemlerinden kaçınarak erişilebilirliği koruyarak bu soruna basit bir CSS çözümünü keşfedeceğiz.

Sunulan Çözüm: Butonları Kaydırarak Kullanmak

Enter tuşuna basıldığında hangi gönder butonunun aktif olacağını kontrol etme sorununu çözmek için CSS’nin float özelliğini kullanabiliriz. Butonları sağa kaydırarak, HTML yapısındaki butonların mantıksal sırasını değiştirmeden görsel düzeni manipüle edebiliriz.

Adım Adım Çözüm

  1. CSS Float Özelliği: Butonları konumlandırmak için float özelliğini kullanın. “Sonraki” butonunun HTML işaretlemesinde ilk görünmesine rağmen sağda görüntülenmesini sağlayabilirsiniz.
  2. Clearfix: Bir clearfix tekniği, sonraki öğelerin kaydırmadan etkilenmesini engelleyecektir.

Örnek Kod

Aşağıda, HTML ve CSS kullanarak çözümü nasıl uygulayacağınız gösterilmektedir:

HTML Yapısı

<form action="action" method="get">
    <input type="text" name="abc">
    <div id="buttons">
        <input type="submit" class="f" name="next" value="Sonraki">
        <input type="submit" class="f" name="prev" value="Önceki">
        <div class="clr"></div> <!-- Bu div, sonraki öğelerin butonlarla birlikte kaymasını önler. 'div#buttons' içinde tutar -->
    </div>
</form>

CSS Kodu

.f {
    float: right;
}
.clr {
    clear: both;
}

Bu Yaklaşımın Faydaları

  • JavaScript Gerekmez: Bu çözüm JavaScript’e dayanmaz, kodu basitleştirir ve sayfa performansını artırır.
  • Erişilebilirlik: Her iki gönder butonu da fonksiyonelliğini korur ve yardımcı teknolojilerle kullanılabilir, böylece tüm kullanıcılar için daha iyi bir deneyim sağlar.
  • Buton Türlerinin Korunması: Her iki buton da form gönderimi için önemli olan type="submit" butonları olarak kalır.

Sonuç

float özelliği ile basit bir CSS hilesi kullanarak, HTML formunda birden fazla gönder butonunu yapıyı karmaşıklaştırmadan etkili bir şekilde yönetebilirsiniz. Bu yöntem sadece basit değil, aynı zamanda erişilebilirliği korur ve JavaScript ihtiyacını ortadan kaldırır, bu da yaygın bir sorun için şık bir çözüm sunar.

Bir web sitesi için kullanıcı dostu bir form tasarlıyor veya büyüleyici bir arayüz geliştiriyor olsanız da, butonlarınızın düzeni ve mantıksal akışının kullanıcı deneyimini iyileştirmek için anahtar olduğunu unutmayın.