Yarısma Kent

OkumadanGitme.Tr.Gg | Eğlence | Siten İçin | Servisler |TeknoBilgi | İzle Ögren | Webmaster | Tr.Gg |

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:

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

  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.

 
Bilgi Güçtür, Paylaştıkça Büyür!