Html Css Arama Butonu Ekleme

HTML ve CSS ile Arama Butonu Ekleme: Kapsamlı Bir Kılavuz

Bir web sitesine arama butonu eklemek, kullanıcıların belirli bilgileri veya içerikleri kolayca bulmalarına yardımcı olan önemli bir özelliktir. HTML ve CSS kullanarak, web sitenize estetik açıdan hoş ve işlevsel bir arama butonu ekleyebilirsiniz. Bu kapsamlı kılavuz, HTML ve CSS ile arama butonu ekleme sürecini adım adım açıklayacaktır.

HTML ile Arama Butonu Oluşturma

Bir arama butonu oluşturmak için HTML’de <form> ve <input> öğelerini kullanmalısınız. <form> öğesi, kullanıcının girdiği verileri sunucuya göndermek için kullanılırken, <input> öğesi arama alanını oluşturur.

“`html



“`

Bu kod, “q” adında bir arama alanı ve “Ara” adında bir gönder düğmesi içeren bir arama formu oluşturur. “action” özniteliği, formun gönderildiğinde gönderileceği PHP dosyasını belirtir. “method” özniteliği, verilerin sunucuya nasıl gönderileceğini belirtir (bu durumda “get” yöntemi kullanılır).

CSS ile Arama Butonunu Şekillendirme

HTML ile arama butonunu oluşturduktan sonra, CSS kullanarak görünümünü ve stilini özelleştirebilirsiniz. Aşağıdaki CSS kuralları, arama butonuna stil vermek için kullanılabilir:

“`css
form {
display: flex;
align-items: center;
}

input[type=”text”] {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}

input[type=”submit”] {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
“`

Bu CSS kuralları, arama formunu yatay olarak hizalar, arama alanına stil verir ve gönder düğmesine mavi bir arka plan rengi ve beyaz bir metin rengi verir.

Arama Butonunun İşlevselliğini Ekleme

Arama butonunu oluşturduktan ve şekillendirdikten sonra, işlevselliğini eklemeniz gerekir. Bu, kullanıcının arama alanına bir terim girdiğinde ve gönder düğmesine tıkladığında ne olacağını belirlemeyi içerir.

Arama butonunun işlevselliğini eklemek için JavaScript kullanabilirsiniz. Aşağıdaki JavaScript kodu, kullanıcının arama alanına bir terim girdiğinde ve gönder düğmesine tıkladığında bir arama sorgusu gönderir:

“`javascript
const form = document.querySelector(‘form’);

form.addEventListener(‘submit’, (event) => {
event.preventDefault();

const query = event.target.querySelector(‘input[name=”q”]’).value;

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

Bu JavaScript kodu, arama formunu seçer ve “submit” olayını dinler. Kullanıcı formu gönderdiğinde, olay önlenir ve arama alanı değerindeki arama sorgusu alınır. Ardından arama sorgusu sunucuya gönderilir.

Faydalı Kaynaklar

Yayımlandı

kategorisi