SORU
25 Mayıs 2010, Salı


Nasıl bir bağlantı gibi davranan bir HTML düğme oluşturmak için?

Bir bağlantı gibi davranan bir HTML buton oluşturmak istiyorum. Düğmeye tıkladığınızda bir sayfaya yönlendirir. Mümkün olduğunca erişilebilir olmasını istiyorum.

Ayrıca URL, herhangi bir ekstra karakter, ya da parametre yok bu yüzden istiyorum.

Bunu nasıl başarabilir?

Şu anda bunu yapıyorum:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

ama bu sorunu Safari Internet Explorer, URL sonuna soru işareti bir karakter ekler. URL sonuna herhangi bir karakter eklemek etmeyen bir çözüm bulmam gerekiyor.

Bu iki çözüm vardır: JavaScript kullanarak veya bir düğme gibi. bir bağlantı şekillendirme

JavaScript Kullanarak:

<button onclick="window.location.href='/page2'">Continue</button>

Ama bu tabii ki JavaScript gerektirir ve bu nedenle ekran okuyucular için daha az erişilebilir. Bir bağlantı noktası başka bir sayfaya gitmek için. Yani bir düğme bir bağlantı gibi hareket etmeye çalışıyor yanlış bir çözüm. Benim önerim bir bağlantı kullanmanız gereken ve style it to look like a button.

<a href="/page2>Continue</a>

CEVAP
25 Mayıs 2010, Salı


HTML

Düz HTML yolu action istenen hedef URL belirtin özniteliği <form> neyin koymak için.

<form action="http://google.com">
    <input type="submit" value="Go to Google">
</form>

Gerekirse ayarlayın formu display: inline; çevreleyen metin akışını tutmak için CSS.

CSS

Eğer CSS izin verilirse, sadece sen <a> tarzı bir düğme diğerleri arasında appearance özelliği (only IE support is currently (July 2015) still poor) kullanarak gibi görünmek için kullanın.

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Ya da Bootstrap gibi bir çok CSS kütüphaneleri birini seçin.

JS

Eğer JavaScript izin verilirse, window.location.href ayarlayın.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • CNET

    CNET

    5 Mayıs 2006
  • finalcall07

    finalcall07

    11 NİSAN 2008
  • Miles Fisher

    Miles Fisher

    8 NİSAN 2009