Css ile zarif arama formları hazırlamak
Özellikle içerik bakımından daha zengin olan web sitelerinde, ziyaretçilerin içeriğe daha kolay ulaşma yollarından birisi de arama yapmaktır. Arama işlemini yapan arama formları ise pek çok web sitesinde özensiz bir şekilde hazırlanmış veya biçimlendirilmemiş oluyor. Oysaki birazcık CSS ve resim desteğiyle çok şık arama formları oluşturabiliriz 
1. Arama formunun hazırlanması
İlk önce klasik bir arama formu oluşturalım. Bu arama formu için 4 adet HTML etiketi kullanacağız. Bunlar div, form, input ve button etiketleri... Burada önemli olan, arama formunu oluşturan bütün nesneleri div etiketi içerisine almak. Sonuç olarak arama formunu alttaki kodlar yardımıyla oluşturuyoruz:
Böylece "en sade" haliyle klasik bir arama formu oluşturmuş oluyoruz. Bu kodların ekran görüntüsü alttaki gibi olacaktır. Fazla bir albenisi yok değil mi 
Klasik bir arama formu
2. Arama formu için görsellerin hazırlanması
Arama formunu biçimlendirmeden önce 2 adet "görsel" hazırlamamız gerekmektedir. Hazırlanan bu görsellerin birincisi arama formumuzun arka planını, ikincisi ise arama butonumuzun arka planını oluşturacak. Alttaki şemada bu iki görseli ve bu iki görsel kullanılarak hazırlanmış arama formunun son halini görebilirsiniz. Şemadaki "pembe" bölümü ise, arama kutusunun yerleştirileceği alanı işaretlemek için kullandım. Arama formumuzun son halinde bu pembe alanın yerini arama kutusu yer alacak.
Arama formunun şeması
Yukarıdaki şemada dikkatinizi çekmek istediğim asıl nokta, görsellerin genişlik (W) ve yükseklik (H) değerleridir. Çünkü bu değerleri, CSS kodlarımız içerisinde kullanacağız. CSS kodlarından bahsetmişken artık CSS kodlamaya geçebiliriz
3. Arama formu için CSS kodlarının hazırlanması
Yukarıda yazmış olduğumuz kodlara tekrar baktığımızda, div etiketinin ID özniteliğine "aramaFormu" ismini verdiğimizi görüyoruz. Çünkü bütün CSS biçimlendirmesini bu ismi referans alarak yapmamız gerekiyor. Öncelikle bu biçimlendirmeyi yapan CSS kodlarına bakalım; kodların incelemesini daha sonra yaparız (:
-
<style type="text/css">
-
/* = 1. bölüm
-
------------------------------------------------- */
-
#aramaFormu {
-
width: 210px;
-
height: 39px;
-
overflow: hidden;
-
background: #fff url(arkaForm.png) no-repeat
-
}
-
-
/* = 2. bölüm
-
------------------------------------------------- */
-
#aramaFormu input {
-
width: 148px;
-
height: 21px;
-
padding: 0;
-
margin: 8px 0 0 8px;
-
float: left;
-
border: none;
-
background: #fff;
-
font: normal 13px Verdana
-
}
-
-
/* = 3. bölüm
-
------------------------------------------------- */
-
#aramaFormu button {
-
width: 40px;
-
height: 29px;
-
margin: 3px 9px 0 0;
-
float: right;
-
text-indent: -9999px;
-
border: none;
-
background: #fff url(arkaButon.png) no-repeat;
-
cursor: pointer
-
}
-
</style>
1. bölümde arama formundaki bütün nesneleri kapsayan div etikeni biçimlendirdik. Genişlik ve yükseklik değerlerini girip, hazırladığımız görseli arkaplan olarak atadık. Taşma problemi olmasın diye de overflow:hidden kodunu kullandık.
2. bölümde arama sözcüğünün yazıldığı kutuyu biçimlendirdik. Genişlik ve yükseklik değerlerini girip, margin ile kenarlardan uzaklıklarını belirledik. Ayrıca float:left ile sola yaslanmasını sağladık. Arkaplan rengini beyaz olarak atadıktan sonra, border ile kenar çizgilerinin görünmemesini belirttik. Son satırda ise kutu içerisine yazılacak yazının tipini ve büyüklüğünü ayarladık.
3. bölümde formun gönderilmesini sağlayan butonu biçimlendirdik. Yine genişlik ve yükseklik değerlerini girdik, kenar uzaklıklarını belirledik. Daha sonra float:right ile sağa yaslanmasını sağladık. Buton üzerindeki "Ara" yazısını göstermemek amacıyla text-indent:-9999px kodunu kullandık. Ayrıca kenar çizgilerinin görünmemesini ve hazırladığımız görselin arkaplan olarak atanmasını sağladık. cursor:pointer kodunu ise, imleç butonun üzerine getirildiği zaman imlecin "el işareti" olarak görünmesi için ekledik.
Sonuç...
CSS'nin nimetlerinden faydalanarak kolayca zarif nesneler hazırlanabildiğini gördük. Benim tasarım bilgim zayıf olduğundan dolayı, siz görselleri daha güzel hazırlayıp bu örneği daha iyi bir hale getirebilirsiniz Hazırladığımız bu arama formunun demosuna bu sayfadan erişebilirsiniz.
Referans:
http://blog.reindel.com/...with-css-and-a-background-image
+1 Çok şirin olmuş Erhan
Ufak bir not düşeyim. Belki bilmeyenler vardır.
Explorer ve FF deki farklılaşmalar olursa ve ince ayarlar gerekirse Explorer için değerleri _ ile ayrı olarak belirleyebilirsiniz.
Örneğin:
width: 148px; _width: 143px;
height: 21px; _height: 18px;
_ ifadeleri yalnızca IE de çalışacaktır.
Teşekkürler.
Bu ipuçlarını da bir araya toplamayı düşünüyorum artık.
Çok faydalı bir yazı daha, teşekkürler Erhan
Teşekkürler Erhan Abi
http://teknoloji.srro.net ‘de kullandım.
Sitenden kodları kopyalerken yanındaki rakamlarda kopyalanıyor ve düzeltmesi baya uzun sürüyor
Gerçekten çok şirin gözüküyor . Paylaşımın için teşekkürler . En yakın sürede bunun siyahını bloguma yapabilirim
@Sırrı
Gerçekten web sitene çok yakışmış. Bu arada yazının sonuna bir demo sayfası eklemiştim. Bu sayfanın kaynak bölümünden de alabilirdin kodları…
@Vehbi Öztürk & @Strefrextor
Ben teşekkür ederim
Teşekkürler Abi
Benim de hoşuma gitti.
Demo sayfasından kaynak kod alana kadar sen bir çare bulsan
Ben de Firefox 2.0.0.6 kullanıyorum ama bende öyle bir sorun yok. Yani kopyalarken rakamlar gelmiyor. Ama yine de bakacağım.
Güzel olmuş tebrikler burda da bir şeyler var
@nucrotion
Verdiğin link yazının sonundaki “Referans” bölümünde mevcut
Teşekkürler çok anlaşılır bir yazı olmuş…
Ben de diyorum yakın zamanda böyle bir eğitsel görmüştüm falan diye sonunda ki referanstan hatırladım. Emeğine sağlık Eburhan
Süper anlatmışsın yine Erhan, şema çok güzel olmuş
Ben sitemde uzun zaman önce bununla ilgili bir yazı yazmıştım. Ama google sıram iyi bir yerde olmadığı için kimse siteme ulaşamıyor. Neyse belki yakında farkediliriz. Başarılarının devamını diliyorum…
Cidden böyle ufak, anlaşılır ve işe yarar yazılara ihtiyaç var. Çok teşekkürler…
@javam bunu bilmiyordum ve öğrenmem çok işime yarayacak , teşekkürler…
@Ahmet Küçükoğlu
Neden bana sitem ettin anlam veremedim.
Okuya okuya sonunda biraz bilgi sahibi oldum. İyiki bu bilgileri paylaşan siz blogcu beyler varsınız. Erhan bey çok teşekkür ederim. Sizden ricam eğer mümkünse plugin’ler hakkında sıkça yazsanız da işe yarayacak yeni plugin’leri bizler de kullansak. Ancak mümkünse tabii. Çünkü siz resimli örnekli çok güzel anlatıyorsunuz biz bilmeyen bayanlara da yardım oluyor. Saygılar
plugin derken?
wordpress eklentileri mi?
Evet canım wp eklentileri.
http://www.wordpress-tr.com/indir/eklentiler
Ama bunlardan başka desem
armut piş demezsin umarım
Güzel anlatım olmuş, peki bunu arama için adsense’ye uyarlıyabilir miyiz?
@eda suner
Elimden geleni yaparım
@sesebian
Uyarlayabilirsin elbette. Google’ın sana verdiği kodlarda FORM etiketine “id=aramaFormu” ataması yaparsan biçimlendirebilirsin.
Yalnız dikkat etmen gereken birşey, Google’ın arama formunda BUTTON etiketi yok. Bunun yerine INPUT kullanmışlar. Biçimlendirmeyi ona göre yapman gerekiyor.
Ben her zaman senin sitenin ve yazılarının çok iyi olduğunu değişik platformlarda dile getiriyorum ki bunu sitende de belirtmiştim.
Sanırım yanlış anlaşılma oldu. Benim sana sitem etmeye hakkım yok. Her zaman başarılarılarının devamını dilerim.
çok şık olmuş tutorialdaki örnek eburhan. ben de kendime göre bir uygulama yapmalıyım klasik formlar çok can sıkıcı
Teşekkürler, çok faydalı bilgiler….
@eburhan’ı kıskanmamda bir anormallik yok sanırım
teşekkürler paylaşım için…
Teşekkürler, güzel anlatım olmuş.
Eburhan sağol, ilgimi çeken birşeydi, aklımda yapmam gerekenleri oluşturuyordum, deneme fırsatım olmadı, şimdi gerek de kalmadı. Ayrıca javam’ın verdiği bilgi çok hoşuma gitti. tekrar sağolun arkadaşlar.
Hep merak etmişimdir bu olayı çok güzel bir bilgi teşekkürler.
tesekkürler ellerine saglık