Bağlantı gibi davranan bir HTML düğmesi oluşturmak istiyorum. Yani, düğmeye tıkladığınızda, bir sayfaya yönlendirir. Mümkün olduğunca erişilebilir olmasını istiyorum.
Ayrıca URL'de fazladan karakter veya parametre olmamasını da istiyorum.
Bunu nasıl başarabilirim?
Şimdiye kadar gönderilen cevaplara dayanarak, şu anda bunu yapıyorum:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
Ancak bununla ilgili sorun, Safari ve Internet Explorer'de URL'nin sonuna bir soru işareti karakteri eklemesidir. URL'nin sonuna herhangi bir karakter eklemeyen bir çözüm bulmam gerekiyor.
Bunu yapmak için başka iki çözüm daha vardır: JavaScript kullanmak veya bir bağlantıyı düğme gibi görünecek şekilde şekillendirmek.
JavaScript Kullanımı:
<button onclick="window.location.href='/page2'">Continue</button>
Ancak bu açıkça JavaScript gerektirir ve bu nedenle ekran okuyucular için daha az erişilebilirdir. Bir bağlantının amacı başka bir sayfaya gitmektir. Dolayısıyla, bir düğmenin bağlantı gibi davranmasını sağlamaya çalışmak yanlış bir çözümdür. Benim önerim bir bağlantı kullanmanız ve düğme gibi görünecek şekilde biçimlendirmeniz.
<a href="/link/to/page2">Continue</a>
Düz HTML yolu, bunu bir <form>
içine koymaktır; burada action
niteliğinde istenen hedef URL'yi belirtirsiniz.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
Gerekirse, formun çevresindeki metinle akış içinde kalmasını sağlamak için CSS display: inline;
ayarını yapın. Yukarıdaki örnekte <input type="submit">
yerine <button type="submit">
da kullanabilirsiniz. Tek fark, <button>
elemanının çocuklara izin vermesidir.
Sezgisel olarak <button href="http://google.com">
öğesini <a>
öğesine benzer şekilde kullanabilmeyi beklersiniz, ancak ne yazık ki hayır, bu nitelik HTML spesifikasyonu'e göre mevcut değildir.
CSS'ye izin veriliyorsa, diğerlerinin yanı sıra appearance
özelliğini kullanarak bir düğme gibi görünecek şekilde biçimlendirdiğiniz bir <a>
kullanın (yalnızca Internet Explorer desteği şu anda (Temmuz 2015) hala zayıf).
<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üphanesinden birini seçin.
<a href="http://google.com" class="btn btn-default">Go to Google</a>
JavaScript'e izin veriliyorsa, window.location.href
değerini ayarlayın.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
Bunu yapmanın tek yolu (BalusC'nin dahiyane form fikri hariç!) düğmeye bir JavaScript `onclick' olayı eklemektir ki bu da erişilebilirlik için iyi değildir.
Normal bir bağlantıyı düğme gibi şekillendirmeyi düşündünüz mü? İşletim sistemine özel düğmeleri bu şekilde elde edemezsiniz, ancak yine de IMO'nun en iyi yolu budur.