Form alanlarına odaklanma

Form alanları genelde kullanıcıların en çok sıkıldıkları alanlardır. Bu sıkıntıyı gidermek için kod yazarları çeşitli yöntemler geliştirmektedir. CSS ve ajax tabanlı çözümlerle gayet güzel sonuçlar çıkmaktadır. Biz burada fazla derine inmeden kullanıcının form alanlarına odaklandığında form alanına farklılıklar vererek daha belirgin hale getirmeyi göreceğiz.

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

1. <p>
2. Ad Soyad<br />
3. <input type=”text” id=”ara” name=”ara” value=”Ara” onfocus=”if(this.value==’Ara’){this.value=”};” onblur=”if(this.value==”){this.value=’Ara’};” />
4. </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.

1. <p>Ad Soyad<br />
2. <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’};” />
3. </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.

1. .odaklan{
2. background-color: #FFFFE0;
3. padding:10px 5px;
4. border:1px solid #CCCCCC;
5. }
6. .normal{
7. background-color:#FFFFFF;
8. padding:10px 5px;
9. }
10. …..
11. <p class=”normal”>Ad Soyad<br />
12. <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’};” />
13. </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.

1. input:focus
2. {
3. background-color: #FFFFE0;
4. color: white;
5. }

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

1. sfFocus = function() {
2. var sfEls = document.getElementsByTagName(”INPUT”);
3. for (var i=0; i<sfEls.length; i++) {
4. sfEls[i].onfocus=function() {
5. this.className+=” sffocus”;
6. }
7. sfEls[i].onblur=function() {
8. this.className=this.className.replace(new RegExp(” sffocus\\b”), “”);
9. }
10. }
11. }
12. if (window.attachEvent) window.attachEvent(”onload”, sfFocus);             

kaynak: www.fatihhayrioglu.com