Arşiv sayfasından bütün yazılarıma ulaşabilirsiniz

Css ile zarif arama formları hazırlamak

Zarif bir arama formuÖ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:

PLAIN TEXT
HTML:
  1. <div id="aramaFormu">
  2.     <form action="" method="get">
  3.         <input type="text" name="aranan" />
  4.         <button type="submit">Ara</button>
  5.     </form>
  6. </div>

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
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ı
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 (:

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2.     /* = 1. bölüm
  3.     ------------------------------------------------- */
  4.     #aramaFormu {
  5.         width: 210px;
  6.         height: 39px;
  7.         overflow: hidden;
  8.         background: #fff url(arkaForm.png) no-repeat
  9.     }
  10.    
  11.     /* = 2. bölüm
  12.     ------------------------------------------------- */
  13.     #aramaFormu input {
  14.         width: 148px;
  15.         height: 21px;
  16.         padding: 0;
  17.         margin: 8px 0 0 8px;
  18.         float: left;       
  19.         border: none;
  20.         background: #fff;
  21.         font: normal 13px Verdana
  22.     }
  23.    
  24.     /* = 3. bölüm
  25.     ------------------------------------------------- */   
  26.     #aramaFormu button {
  27.         width: 40px;
  28.         height: 29px;
  29.         margin: 3px 9px 0 0;
  30.         float: right;
  31.         text-indent: -9999px;
  32.         border: none;
  33.         background: #fff url(arkaButon.png) no-repeat;
  34.         cursor: pointer
  35.     }
  36. </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

EkleBunu Sosyal Paylaşım Butonu

Yorum takibi   
Geri izleme   
Yazıyı Paylaş   
 20 Ağustos 2007, 08:09
 Programlama
 Bugün 4 kez, toplam 3,916 kez okundu.
 , , , , , ,

31 yorum var

  1. javam
    20 Ağustos 2007, 08:55

    +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.

  2. Erhan
    20 Ağustos 2007, 09:03

    Teşekkürler.
    Bu ipuçlarını da bir araya toplamayı düşünüyorum artık.

  3. Vehbi Öztürk
    20 Ağustos 2007, 12:10

    Çok faydalı bir yazı daha, teşekkürler Erhan :)

  4. Sırrı
    20 Ağustos 2007, 13:19

    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 :)

  5. Strefrextor
    20 Ağustos 2007, 13:42

    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 ;)

  6. Erhan
    20 Ağustos 2007, 14:06

    @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 ;)

  7. Sırrı
    20 Ağustos 2007, 14:09

    Teşekkürler Abi :) Benim de hoşuma gitti.
    Demo sayfasından kaynak kod alana kadar sen bir çare bulsan :(

  8. Erhan
    20 Ağustos 2007, 14:12

    Ben de Firefox 2.0.0.6 kullanıyorum ama bende öyle bir sorun yok. Yani kopyalarken rakamlar gelmiyor. Ama yine de bakacağım.

  9. nucrotion
    20 Ağustos 2007, 14:46

    Güzel olmuş tebrikler burda da bir şeyler var

  10. Erhan
    20 Ağustos 2007, 15:21

    @nucrotion
    Verdiğin link yazının sonundaki “Referans” bölümünde mevcut ;)

  11. ismailaltuntas
    20 Ağustos 2007, 15:38

    Teşekkürler çok anlaşılır bir yazı olmuş…

  12. Balkan BULDUK
    20 Ağustos 2007, 19:08

    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

  13. Oval text field - Zoque.Forum
    20 Ağustos 2007, 19:59

    […] Oval text field Erhan arkadaşımız kendi blogunda "Css ile zarif arama formları hazırlamak" adlı bir yazı yazmıştı. Bu belki işini görebilir. […]

  14. Mustafa Şapçılı
    20 Ağustos 2007, 20:30

    Süper anlatmışsın yine Erhan, şema çok güzel olmuş ;)

  15. H-Yaman » Haftalık Haber Turu-17
    21 Ağustos 2007, 08:55

    […] Eburhan’dan yine çok faydalı bir makale… Bu sefer CSS ile arama formu hazırlamaya dayalı kaynak mahiyetinde bir yazı hazırlamış. […]

  16. Ahmet Küçükoğlu
    21 Ağustos 2007, 16:23

    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…

  17. Ahmet Eyüp
    21 Ağustos 2007, 17:13

    Cidden böyle ufak, anlaşılır ve işe yarar yazılara ihtiyaç var. Çok teşekkürler…

    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.

    @javam bunu bilmiyordum ve öğrenmem çok işime yarayacak , teşekkürler…

  18. Erhan
    21 Ağustos 2007, 21:15

    @Ahmet Küçükoğlu
    Neden bana sitem ettin anlam veremedim.

  19. eda suner
    21 Ağustos 2007, 23:21

    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 :)

  20. Erhan
    21 Ağustos 2007, 23:35

    plugin derken?
    wordpress eklentileri mi?

  21. eda suner
    22 Ağustos 2007, 01:08

    Evet canım wp eklentileri.
    Ama bunlardan başka desem :) http://www.wordpress-tr.com/indir/eklentiler
    armut piş demezsin umarım

  22. sesebian
    22 Ağustos 2007, 03:00

    Güzel anlatım olmuş, peki bunu arama için adsense’ye uyarlıyabilir miyiz?

  23. Erhan
    22 Ağustos 2007, 08:46

    @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.

  24. Fatih Hayrioğlu’nun not defteri » 22 Ağustos 2007 Web’den Seçme Haberler
    22 Ağustos 2007, 13:58

    […] eburhan’dan CSS ile zarif arama formları hazırlama adlı güzel bir makale. Link […]

  25. Ahmet Küçükoğlu
    23 Ağustos 2007, 12:31

    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.

  26. Burcu
    25 Ağustos 2007, 13:41

    çok şık olmuş tutorialdaki örnek eburhan. ben de kendime göre bir uygulama yapmalıyım klasik formlar çok can sıkıcı :D

  27. faideli blog
    3 Eylül 2007, 15:44

    Teşekkürler, çok faydalı bilgiler….

  28. bisgen
    30 Ocak 2008, 10:56

    @eburhan’ı kıskanmamda bir anormallik yok sanırım :)
    teşekkürler paylaşım için…

  29. Ahmed
    4 Şubat 2008, 01:20

    Teşekkürler, güzel anlatım olmuş.

  30. brsyuksel
    4 Şubat 2008, 04:01

    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.

  31. Artvinli
    3 Nisan 2008, 16:24

    Hep merak etmişimdir bu olayı çok güzel bir bilgi teşekkürler.

İçinizde kalmasın, siz de yorum yazın.

My µStats: Web siteniz için istatistik widget’ı »

sayfa sayacı

SiteBilgi.net