Hemen Ara Butonu HTML: Web Sitenize Kolayca Arama İşlevi Ekleme

Hemen ara butonu, web sitenizin ziyaretçilerinin belirli bir kelime veya ifadeyi kolayca aramasını sağlayan kullanışlı bir özelliktir. Bu buton, genellikle web sitenizin üst kısmında veya yan tarafında bulunur ve ziyaretçiler arama yapmak istediklerinde üzerine tıklayabilirler.

Hemen ara butonu eklemek, web sitenizin kullanıcı deneyimini iyileştirmenin harika bir yoludur. Ziyaretçilerinizin aradıkları bilgileri daha kolay bulmalarını sağlayarak, web sitenizde daha uzun süre kalmalarını ve daha fazla sayfayı ziyaret etmelerini sağlayabilirsiniz.

Hemen Ara Butonu HTML Nasıl Eklenir?

Hemen ara butonu eklemek için, web sitenizin HTML koduna aşağıdaki kodu eklemeniz gerekir:

“`html

“`

Bu kod, arama formunu oluşturur. Arama formunun action özniteliği, arama sonuçlarının gösterileceği sayfayı belirtir. Arama formunun method özniteliği, arama sorgusunun sunucuya nasıl gönderileceğini belirtir. Arama formunun input özniteliği, arama alanını oluşturur. Arama alanının name özniteliği, arama sorgusunun sunucuya gönderilirken kullanılacak adı belirtir. Arama alanının placeholder özniteliği, arama alanına yazılacak varsayılan metni belirtir. Arama formunun submit özniteliği, arama düğmesini oluşturur. Arama düğmesinin value özniteliği, arama düğmesinin üzerinde yazacak metni belirtir.

Hemen Ara Butonu CSS Nasıl Özelleştirilir?

Hemen ara butonunu özelleştirmek için, web sitenizin CSS koduna aşağıdaki kodu ekleyebilirsiniz:

“`css

arama-formu {

width: 200px;
margin: 0 auto;
}

arama-formu input[type=”text”] {

width: 100%;
padding: 5px;
border: 1px solid #ccc;
}

arama-formu input[type=”submit”] {

width: 100%;
padding: 5px;
background-color: #007bff;
color: #fff;
border: 1px solid #007bff;
}
“`

Bu kod, arama formunun genişliğini 200 piksele ayarlar ve onu web sitenizin ortasına hizalar. Arama formunun arama alanının genişliğini %100’e ayarlar, ona 5 piksellik bir kenar boşluğu ekler ve ona 1 piksellik gri bir kenarlık verir. Arama formunun arama düğmesinin genişliğini %100’e ayarlar, ona 5 piksellik bir kenar boşluğu ekler, arka plan rengini maviye ayarlar, yazı rengini beyaza ayarlar ve ona 1 piksellik mavi bir kenarlık verir.

Hemen Ara Butonu JavaScript Nasıl Kullanılır?

Hemen ara butonunu JavaScript kullanarak daha da özelleştirebilirsiniz. Örneğin, arama sorgusunun sunucuya gönderilmeden önce doğrulanmasını sağlayabilirsiniz. Bunu yapmak için, aşağıdaki kodu web sitenizin JavaScript koduna ekleyebilirsiniz:

“`javascript
document.getElementById(“arama-formu”).addEventListener(“submit”, function(e) {
e.preventDefault();

var aramaSorgusu = document.getElementById(“arama-alanı”).value;

if (aramaSorgusu.length < 3) {
alert(“Lütfen en az 3 karakter girin.”);
return;
}

// Arama sorgusunu sunucuya gönderin.
});
“`

Bu kod, arama formunun submit olayını dinler. Arama formunun submit olayı, arama düğmesine tıklandığında tetiklenir. Arama formunun submit olayı tetiklendiğinde, e.preventDefault() metodu çağrılır. Bu metod, arama sorgusunun sunucuya gönderilmesini önler.

Daha sonra, aramaSorgusu değişkenine arama alanının değeri atanır. AramaSorgusu değişkeninin uzunluğu 3’ten azsa, alert() metodu çağrılır ve “Lütfen en az 3 karakter girin.” mesajı görüntülenir. AramaSorgusu değişkeninin uzunluğu 3’ten fazlaysa, arama sorgusu sunucuya gönderilir.

Faydalı Siteler ve İlgili Dosyalar

• Hemen Ara Butonu Oluşturma
• Hemen Ara Butonunu Özelleştirme
• Hemen Ara Butonunu JavaScript Kullanarak Özelleştirme