CSS ve JavaScript ile Arama Formu Oluşturma

Herkese merhaba,

Photo by Hans-Jurgen Mager on Unsplash

Bir arama formu oluşturmak çok basit bir iş olsa da onu düzenlemek özellikle yeni başlamış insanların kafasını bir hayli karıştırabiliyor. Ben de bu yazımda bunun nasıl olduğunun JavaScript’in nimetlerinden faydalanarak anlatacağım.

Öncelikle bir form oluşturarak başlayalım.

<div class=”s-form”>
    <form action=””>
        <div class=”form-group search-form”>
            <input autocomplete=”off” spellcheck=”false” type=”text” name=”s” id=”search” placeholder=”Search…”>
        </div>
   </form>
</div>

Tabi formu oluştururken eğer bootstrap 4 kullandığımız için "form-control" ve "form-group" class isimleri aklınızı karıştırmasın. Formumuzu HTML olarak oluşturduktan sonra sıra CSS ile formumuzun varsayılan yani default özelliklerini sıfırlamamız ve yeni özelliklerini eklememiz gerekiyor.

.search-form{
    border: 1px solid #dee2e6;
    padding: 5px;
    border-radius: 20px;
}
.search-form input{
    border: none;
    outline: none;
    height: 100%;
    margin-left: 5px;
    padding-left: 30px;
    background-image: url(".......URL....");
    background-size: contain;
    background-repeat: no-repeat;
}

Gerekli HTML ve CSS kodlarını yazarak aşağıdaki resimdeki gibi bir arama formu ortaya çıkardık. Şimdi input eventlerinden "focus" ve "blur" kullanarak arama formumuzun çerçevesini (border) renklendireceğiz.

const search = document.querySelector("#search");
const s_form = document.querySelector(".search-form");
search.addEventListener("focus",s);
search.addEventListener("blur",a);
function s(e){
    console.log(s_form.style);
    s_form.style.border = "1px solid black";
}
function a(e){
    console.log(s_form.style);
    s_form.style.border = "1px solid #dee2e6";
}

JavaScript kodumuz sayesinde arama formumuza yaptığımız çerçevenin rengini forma tıkladığımızda siyah, normalde ise grimsi bir renk yaptık. Siz buradaki renkler ile oynayarak sitenize uygun bir şekilde özelleştirebilirsiniz ya da HTML, CSS ve JavaScript hakkında daha fazla bilgi alarak daha gelişmiş bir arama formu oluşturabilirsiniz.

Bugsız günlerde görüşmek üzere. Hoşça kalın.