İlk örneğimiz. Bir arama metin kutusuna başlangıç değeri olarak açıklayaıcı bir bilgi gireceğiz ve kullanıcı bu alana odaklandığında(onfocus) metni sileceğiz.

<p> Ad Soyad<br />
<input type="text" id="ara" name="ara" value="Ara" onfocus="if(this.value=='Ara'){this.value=''};" onblur="if(this.value==''){this.value='Ara'};" />
</p>

Örneği görmek için tıklayınız.

metin kutusunun onfocus olayına eğer değer bizim girdiğimiz değer ise boşaltmasını söylüyoruz. Tabi birde kullanıcının bu metin kutusu dışına çıktığında bu alanı eski hali getirmek içinde onblur olayını kullanıyoruz. Burada dikkat edilmesi gereken nokta metin kutusuna atadğımız bağlangıç değeri(value="Ara") ile sorgudaki alanın(if(this.value==”)) bir biri ile aynı olmasıdır.

İkinci örneğimizde bu efekte zemin rengi özelliğinide katarak daha güzel bir etki vereceğiz.

<p>Ad Soyad<br />
<input type="text" id="ara" name="ara" value="Ara" onfocus="if(this.value=='Ara'){this.value=''; this.style.backgroundColor='#efefef'};" onblur="if(this.value==''){this.value='Ara'; this.style.backgroundColor='#ffffff'};" />
</p>

Örneği görmek için tıklayınız.

Burada dikkat edilecek konu onblur durumunda zemin rengini ilk haline döndürmektir.

Form alanları genelde örnekte verdiğimiz gibi tek metin kutusundan oluşmaz. Genelde bir çok metin kutusu, işaret kutusu, açılır menü gibi elemanların alt alta sıralanmasından oluşur. son örneğimizde bu elementler arasında kullanıcının odaklandığı elementini kapsayan alanın zemin rengini değiştirerek dikkati bu alana çekeceğiz.

<style type="text/css">
.odaklan{
background-color: #FFFFE0;
padding:10px 5px;
border:1px solid #CCCCCC;
}
.normal{
background-color:#FFFFFF;
padding:10px 5px;
}
</style>
<p class="normal">Ad Soyad<br />
<input type="text" id="ara" name="ara" value="Ara" onfocus="if(this.value=='Ara'){this.value=''; this.style.backgroundColor='#efefef'; this.parentNode.className='odaklan'};" onblur="if(this.value==''){this.value='Ara'; this.style.backgroundColor='#ffffff'; this.parentNode.className='normal'};" /> </p>

Örneği görmek için tıklayınız.

Burada form alanına ve kapsayan paragrafa farklı renk atayarak daha fazla dikkat cekici lanlar oluşturduk.

Not: Bu örnekler FF1, IE5, Opera7.5 ve Safari3.0/Win çalışmaktadır.

Bu işlemleri aslında biz CSS ilede yapabiliriz. :focus özelliği bu işlevi görür, ancak bu özellikleri IE desteklemediği için bu özelliği kullanamıyoruz.

input:focus
{
    background-color: #FFFFE0;
    color: white;
}

Bu kodu IE’nin desteklemesi için bir javascript kodu eklememiz gerekiyor.

sfFocus = function() {
var sfEls = document.getElementsByTagName("INPUT");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

Örneği görmek için tıklayınız.

• İlk haber kendi not defterimdeki bir düzenlemeden. Sitemde okuduğum kitapların listesini ve bir kaç satır özetini yayınlıyorum. CSS kısmına ağırlık verdiğim için kitapları anasayfada yayınlamama kararı aldım. Listelerde ve RSS’de olacak ancak anasayfada çıkmayacak bilginize
• AltıÜstü Tasarım sitesinde “Form Tasarımı Hakkında Birkaç Tavsiye” adlı güzel bir makale var okumanız tavsiye olunur. Link
• 53 CSS Tekniği diye yayımlanan yazıda bir çok CSS ipuçlarını bulabilirsiniz. Link
• Güzel kodlama yapmak için 21 öneri. Link
• 10 güzel CSS ipucu Link
• Her ne kadar şu an HTML’in son sürümü HTML4′de olsa HTML 5 üzerinde bazı çalışmalar başlanmış durumda. Opera “HTML5 kullanarak formlarımızı geliştirmek” adlı bir yazı yayınlamış. Link
• Firefox’un gizli sayfalarına ulaşmaya ne dersiniz ? Link
• 12 Temel CSS web sayfası planı Link

• CSS hakkında güzel ayrıntılar sunan güzel bir makale Link
• Web sitelerinin %97′sinin erişilemez düzeyde olduğu ve neler olması gerektiğini üzerine bir makale Link
• Html sayfalar html içerik eklememizi sağlayan güzel bir makale, iframe kullanımına son verebilirsiniz. Link
• CSS ile standart fontların dışında font kullanmanın yollarından biri sIFR’ın 3 betası çıkmış incelemeye değer. Link
• IE 7′nin gelecekte destekleyeceği yeni özellikler Link
• CSS ile font kullanımı hakkında ilginç bir makale Link
• Ajax hakkında ipuçları veren güzel bir site Link
• YUI javascript kütüphanesi kullanarak çok güzel ağaç menüler oluşturmayı anlatan güzel bir makale Link
• CSS ile oluşturulmuş güzel bir form sayfası örneği Link
• Opasite hatalarını yeni web tarayıcılarındaki durumunu anlatan güzel bir makale Link
• 2006′da Web’in en iyileri. İlham kaynakları, Grafik Dizayn en iyileri, Web Dizayn Araç en iyileri, Bedava Free ikonları, En iyi blog siteleri kategorilerinde Link

• CSS ile üst üste binmiş tab menü oluşturma hakkında bir makale Link
• Zamanla Google’un işletim sistemi hazırladığını belirtmiştik. Ama bunlar daha hızlı javascript ile web üzerinden işletim sistemi http://www.craythur.com
• Javascript örneklerinin kategorilerine ayrılıp listelendiği güzel bir site Link
• 2006′da yükselen web konuları hakkında bir makale ana başlıkları Link
  a. RSS güçlenerek büyüdü
  b.Web 2.0 bir çıkış yaptı
  c. Büyük şirketlerin kapışma yılı olgu: Google bir çok yeni ürün çıkardı. Microsoft, Yahoo ve Adobe’da bir çok gelişmeler oldu
  d.Widgate(küçük web programları) kendi göstermeye başladı
  e.Online video altın yılını yaşıyor: Youtube ile başlayan çılgınlık devam ediyor.
  f. Web/Masaüstü birleşimi programların üretimi hızlandı
  g. Web tarayıcı savaşları kızıştı
  h. Ajax büyümeye devam ediyor
  i. Web dünyası bu yıl %16 büyüdü
• Güzel görünümlü form yapı için güzel bir makale Link
• Google Yahoo’dan içerik çaldığı iddia ediliyor. Google ve Yahoo IE7 versiyonunun duyurmak için özel sayfalar hazırladılar. şžöyle bir şey var ki bu iki sayfa nerdeyse anı denecek kadar birbirine benziyor. Resimde Google Yahoo tollbarındaki Y! Kısmını blur efekti uyguladığı görülüyor. Sonrada Google sayfasını düzeltiyor. Ayrıntılar için Link