- Konu sahibi
- #1
Button ile bağlantı etiketi ne zaman kullanılmalıdır?
Bir kullanıcıyı başka bir adrese, sayfaya veya belgeye götürüyorsanız
<a> bağlantı etiketini kullanın. Sayfa üzerinde bir işlem başlatıyor, veriyi gönderiyor, bir alanı açıp kapatıyor veya JavaScript ile mevcut içeriğin durumunu değiştiriyorsanız <button> kullanın. Kısaca: navigasyon için bağlantı, eylem için button.Temel fark nasıl çalışır?
<a href="..."> tarayıcıya gidilecek hedefi bildirir. Kullanıcı bağlantıyı yeni sekmede açabilir, adresini kopyalayabilir veya tarayıcının geri düğmesini kullanabilir. Bu nedenle başka bir sayfaya ya da indirilecek bir kaynağa yönlendirme, bağlantının doğal görevidir.<button> ise tek başına bir hedef adres taşımaz; bir eylem için kullanılır. Bir formu gönderebilir, formu temizleyebilir veya bir JavaScript işleyicisini çalıştırabilir. JavaScript devre dışı bırakıldığında çalışması gereken bir sayfa geçişini button ile taklit etmek doğru değildir.Kısa ve çalıştırılabilir örnek
Aşağıdaki HTML parçası örnektir. Görünümü bir HTML dosyasında inceleyebilirsiniz; formun gerçek HTTP isteği göndermesi için çalışan bir test sunucusu ve
/arama rotası gerekir:
Kod:
<style>
input, button, summary { border-radius: 4px; }
input { max-width: 100%; box-sizing: border-box; }
</style>
<form action="/arama" method="get">
<label for="q">Arama</label>
<input id="q" name="q" type="search">
<button type="submit">Ara</button>
<button type="reset">Temizle</button>
</form>
<p>
<a href="/iletisim">İletişim sayfasına git</a>
</p>
<details>
<summary>Teknik ayrıntıyı göster</summary>
<p>Bu içerik mevcut sayfada açılıp kapanır.</p>
</details>Arama alanına metin yazıp
Ara düğmesine bastığınızda tarayıcı /arama?q=... biçiminde bir GET isteği hazırlar. Temizle alanları başlangıç değerlerine döndürür; bu örnekte başlangıç değeri boş olduğundan alan boşalır. İletişim sayfasına git başka bir konuma yönlendirir. <details> ise mevcut sayfadaki içeriğin durumunu değiştirir; bu örnekte ayrıca JavaScript gerekmez.Gerçek uygulamanızda
/arama adresi sunucuda yoksa form gönderiminden sonra hata veya bulunamayan sayfa görebilirsiniz. Bu durumda button türü yanlış değildir; formun action hedefinin çalışan bir sunucu rotası olması gerekir. Yalnızca görsel bir tasarım elde etmek için bağlantıyı button, button'ı da bağlantı gibi kullanmak bu sorunu çözmez.Karar vermek için pratik ölçüt
Aşağıdaki ayrım, HTML elemanını seçerken yeterlidir:
| İhtiyaç | Kullanılacak eleman | Örnek |
|---|---|---|
| Başka sayfaya veya bölüme gitmek | <a> | Ürün ayrıntılarına git |
| Form verisini göndermek | <button type="submit"> | Kaydol |
| Mevcut içeriği açıp kapatmak | <button type="button"> veya uygun yerleşik eleman | Filtreleri göster |
| Form alanlarını sıfırlamak | <button type="reset"> | Temizle |
| Dosya veya harici kaynağa yönlendirmek | <a> | Belgeyi indir |
Uygulama adımları
- Kullanıcı tıkladığında yeni bir adres açılacaksa
<a href="...">yazın ve anlaşılır bağlantı metni kullanın. - Tıklama mevcut sayfanın durumunu değiştirecekse
<button type="button">kullanın ve gereken davranışı JavaScript ile bağlayın. - Bir
<form>içindeki düğmenin amacını açıkça belirtin. Gönderme düğmesinetype="submit", alanları sıfırlayanatype="reset", başka bir işlem yapanatype="button"verin. - Erişilebilirlik denetimi yapın: klavyeyle Tab tuşuna ulaşabilmeli, Enter bağlantıyı çalıştırmalı, düğme de odaklandığında Space veya Enter ile etkinleşebilmelidir. Görünüşü değiştirmek için semantik etiketi değiştirmeyin.
- Tıklama davranışını test edin. Bağlantı yeni hedefe gitmiyorsa href değerini ve sunucu rotasını; button beklenen işlemi yapmıyorsa form olayını veya JavaScript bağlantısını inceleyin.
Sık sorulan sorular
Bağlantı için href yerine button kullanmak sorun yaratır mı?
Evet. JavaScript çalışmadığında sayfa geçişi gerçekleşmeyebilir; ayrıca kullanıcı bağlantıyı yeni sekmede açma veya adresini kopyalama gibi tarayıcı özelliklerini beklediği şekilde kullanamaz. Gerçek hedef bir adresse doğrudan<a> kullanın.Bir button neden formu istemeden gönderiyor?
Form içindeki türü belirtilmeyen button, tarayıcı tarafından gönderme düğmesi olarak yorumlanabilir. Form göndermeyen düğmelere açıkçatype="button" yazın.Bağlantıyı CSS ile button görünümüne çevirmek doğru mu?
Evet. Görsel tasarım ile HTML anlamı ayrı konulardır. Bir<a> elemanını CSS ile düğme gibi gösterebilirsiniz; ancak işlevi hâlâ bağlantı olarak kalmalı ve href içermelidir.