HTML’de Arama Kutusu Yapımı

HTML, web sayfalarının yapısını ve içeriğini oluşturmak için kullanılan bir işaret dilidir. Bir web sayfası oluştururken, kullanıcılara daha iyi bir deneyim sunmak için bazı özellikler eklemek önemlidir. Bu özelliklerden biri de arama kutusu olabilir. Arama kutusu, kullanıcıların web sayfasında istedikleri bilgiyi aramalarına ve bulmalarına yardımcı olan önemli bir öğedir.

HTML Form Elemanları

HTML’de bir arama kutusu eklemek için <form> etiketini kullanırız. Bu etiket, kullanıcının bilgi girişi yapabileceği bir alan oluşturur. Arama kutusu oluşturmak için ise <input> etiketini kullanırız. İnput etiketi, farklı tiplerde giriş alanları oluşturmak için çeşitli özellikler sunar. Arama kutusu için en uygun olanı ise type="text" özelliğidir.

Örneğin, aşağıdaki kod parçası, basit bir arama kutusu oluşturmak için kullanılabilir:

<form action="/arama" method="get">
  <input type="text" name="arama" placeholder="Arama yap">
  <input type="submit" value="Ara">
</form>

Yukarıdaki kod parçasında, action özelliği, arama sonuçlarının gönderileceği URL’yi belirtir. method özelliği ise form verilerinin nasıl gönderileceğini belirler. Bu örnekte, veriler GET metoduyla gönderilecektir. name özelliği, arama kutusunun değerini temsil eden bir isim belirler. placeholder özelliği ise kullanıcıya arama yapması için bir ipucu sağlar. Son olarak, submit tipli bir buton kullanarak arama işlemini başlatırız.

Bu basit HTML kodu, web sayfanıza arama yetenekleri eklemenizi sağlar. Arama sonuçlarınızı işlemek için sunucu tarafı kodlama veya JavaScript gibi diğer teknolojileri kullanmanız gerekebilir.

Şimdiye kadar, HTML’de arama kutusu yapımını ele aldık. İkinci parçada, arama kutusunu daha kullanışlı hale getirmek için CSS ve JavaScript kullanımını tartışacağız.

HTML’de Arama Kutusu Yapımı – CSS ve JavaScript ile İyileştirme

CSS ile Tasarım İyileştirmeleri

HTML arama kutusunu daha görsel olarak çekici hale getirmek için CSS kullanabiliriz. CSS, web sayfalarının görünümünü düzenlemek ve stil vermek için kullanılan bir stil yapısıdır. Arama kutusuna bazı tasarım iyileştirmeleri eklemek için aşağıdaki örnek kodu kullanabilirsiniz:

<style>
  .search-box {
    display: flex;
    align-items: center;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
  }
  
  .search-box input[type="text"] {
    flex-grow: 1;
    border: none;
    padding: 5px;
  }
  
  .search-box input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  }
</style>

Yukarıdaki CSS kod parçası, .search-box sınıfı altındaki öğelerin tasarımını düzenler. Arama kutusunun genişliğini, kenarlık rengini, köşe yuvarlatmasını ve içeriğin dış kenarlıklarını belirler. Ayrıca, arama kutusunun içindeki input alanının tasarımını da ayarlar.

HTML kodunuza bu CSS kodunu eklediğinizde, arama kutusu daha şık ve kullanıcı dostu bir görünüme sahip olacaktır.

JavaScript ile Otomatik Tamamlama

Arama kutusunu daha işlevsel hale getirmek için JavaScript kullanabiliriz. JavaScript, web sayfalarına dinamiklik ve etkileşim eklemek için kullanılan bir programlama dilidir. Arama kutusuna otomatik tamamlama özelliği eklemek için aşağıdaki örnek kodu kullanabilirsiniz:

<script>
  var searchInput = document.getElementById('search-input');
  
  searchInput.addEventListener('keyup', function() {
    var searchText = searchInput.value.toLowerCase();
    var items = document.getElementsByClassName('search-item');
    
    Array.from(items).forEach(function(item) {
      var itemName = item.textContent.toLowerCase();
      
      if (itemName.includes(searchText)) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
</script>

Yukarıdaki JavaScript kod parçası, arama kutusuna her bir tuşa basıldığında bir olay dinleyicisi ekler. Bu olay dinleyicisi, arama kutusunun değerini alır ve bu değeri arama sonuçlarındaki öğelerle karşılaştırır. Eğer arama sonucu eşleşiyorsa, öğeyi görünür yapar; eşleşmiyorsa, öğeyi gizler.

JavaScript kodunu sayfanıza eklediğinizde, kullanıcılar arama kutusuna yazdıkça otomatik tamamlama işlevi devreye girecektir. Sonuçlar arama kutusundaki değere göre filtrelenir ve eşleşen öğeleri gösterir.

Bu şekilde, HTML arama kutusunu daha kullanışlı ve etkili hale getirmiş olursunuz. CSS ile tasarım iyileştirmeleri yaparak kullanıcı deneyimini artırabilir ve JavaScript ile otomatik tamamlama özelliği ekleyerek arama sürecini kolaylaştırabilirsiniz.

Bu ikinci kısım, HTML’de arama kutusu yapımını CSS ve JavaScript ile iyileştirmeyi ele aldı. Artık web sayfanız için daha gelişmiş bir arama kutusu oluşturabilirsiniz.