HTML Siteye Arama Butonu

HTML, web sitelerinin temel yapısını oluşturan bir işaretleme dilidir. Bu dil sayesinde web siteleri oluşturulur ve içerikler düzenlenir. HTML’in güçlü ve esnek yapısı, çeşitli öğelerin eklenmesini ve düzenlenmesini sağlar. Bir web sitesinin kullanıcı deneyimini artırmak için önemli bir öğe olan arama butonu da HTML ile kolayca oluşturulabilir.

Arama Butonu Oluşturma

HTML’de bir arama butonu oluşturmak için <input> etiketi kullanılır. Bu etiketin type özelliği “search” olarak ayarlanır ve kullanıcıya bir metin kutusu ve bir arama düğmesi sağlar.

Örnek bir arama butonu oluşturmak için aşağıdaki kodu kullanabilirsiniz:


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


Yukarıdaki kod, bir HTML formu oluşturur. <form> etiketi, kullanıcının arama sorgusunu göndermek için bir alan sağlar. action özelliği, arama sonuçlarını nereye yönlendireceğini belirtir. method özelliği ise verilerin nasıl gönderileceğini belirler. Bu örnekte, “get” kullanılarak veriler URL’ye eklenir.

<input type="text" name="q" placeholder="Arama yap..."> satırı kullanıcıya bir metin kutusu sunar. Bu metin kutusunda kullanıcı arama terimini girebilir. name özelliği, bu metin kutusunun adını belirtir. Bu örnekte, “q” olarak ayarlanır. placeholder özelliği ise metin kutusuna varsayılan olarak gösterilecek bir ipucu metni sağlar.

<input type="submit" value="Ara"> satırı ise bir arama düğmesi oluşturur. Bu düğmeye tıklandığında, formdaki veriler arama işlemi için gönderilir. value özelliği, düğmenin üzerinde görünen metni belirtir.

Bu şekilde HTML kullanarak bir web sitesine arama butonu ekleyebilirsiniz. Arama butonu, kullanıcıların sitenizdeki içerikleri kolayca aramalarını sağlar ve kullanıcı deneyimini geliştirir.

İkinci parçada, arama butonunun tasarımı ve CSS ile özelleştirilmesi hakkında daha fazla bilgi paylaşacağım.

Arama Butonunun Tasarımı ve CSS İle Özelleştirilmesi

HTML ile oluşturulan arama butonları, CSS (Cascading Style Sheets) kullanılarak tasarlanabilir ve özelleştirilebilir. CSS, web sitelerine stil ve görünüm kazandıran bir stil yapısıdır. Arama butonunun tasarımını değiştirerek, kullanıcı deneyimini daha çekici hale getirebilirsiniz.

Arama butonunu tasarlamak için öncelikle bir CSS stili oluşturmanız gerekmektedir. Bu stil, arama butonunun görünümünü ve davranışını belirleyecektir. Aşağıdaki örnekte, basit bir CSS stilini gösterelim:


.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}


Yukarıdaki CSS stilinde, .button sınıfı kullanılarak bir arama butonu stili tanımlanmıştır. background-color özelliği, butonun arka plan rengini belirler. border özelliği, butonun çerçeve stilini belirler. color özelliği, butonun metin rengini belirler. padding özelliği, butonun iç boşluğunu belirler. text-align özelliği, buton içindeki metnin hizalamasını belirler. text-decoration özelliği, metnin altını çizmek veya üstünü çizmek gibi stil özelliklerini belirler. display özelliği, butonun nasıl görüneceğini belirler. font-size özelliği, metin boyutunu belirler. margin özelliği, butonun dış boşluğunu belirler. cursor özelliği, fare imlecini değiştirerek kullanıcıya buton üzerine geldiğinde bir geri bildirim sağlar.

Arama butonunu bu CSS stiliyle özelleştirmek için HTML kodunu aşağıdaki gibi güncelleyebilirsiniz:


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


class="button" özelliği, arama butonuna daha önce tanımlanan CSS stili olan .button sınıfını atar. Bu sayede buton, belirtilen stil özelliklerine sahip olur.

Bu şekilde CSS kullanarak arama butonunu tasarlayabilir ve özelleştirebilirsiniz. CSS, arama butonunun görünümünü tamamen değiştirebilmenizi sağlar. Arka plan rengi, yazı tipi, boyut, kenarlık ve diğer stil özelliklerini istediğiniz gibi ayarlayabilirsiniz.

HTML ile arama butonu oluşturmak ve CSS ile tasarlamak, web sitelerinin kullanıcı dostu olmasını sağlar ve kullanıcıların istedikleri içeriği kolayca bulmalarına yardımcı olur.