Konumuz, Sitenizde kulanıdığınız, <input/> elementlerini type’larına göre  şekillendirmek.

Durumumuz söyle olsun ; Siteniz genelindeki textbox’larınızın 250px’lik genişliğe sahip olmasını zeminin açık sarı olmasını istiyorsunuz. Fakat bu etkinin butonlar gibi diğer input elemanları üzerinde gerçekleşmesini istemiyorsunuz.

Bunun için uygulayabileceğimiz 3 yöntem var.

1. yol : ( ÖNERİLİR ) (Form elemanlarına class adı vermek ve stillerini düzenlemek… )

form elemanlarınız :

<input type="text" class="text" value="" />
<input type="button" class="button" value="Buton" />
<input type="submit" class="button" value="Gönder" />

css tanımlamalarınız :

input.text { width:250px; background:#FF9; }
input.button { /* buton içinde style yazabilirsiniz... */ }

2. yol : Bu özellikle siteyi yapmış fakat sonradan değişiklik peşinde olanlar için daha pratik bir çözüm. Tüm input elemanlarına class vermeniz gerekmiyor…

form elemanlarınız :

<input type="text" value="" />
<input type="button" value="Buton" />
<input type="submit" value="Gönder" />

css tanımlamalarınız :

input[type="text"] { width:250px; background:#FF9; }
input[type="button"], input[type="submit"] {
    /* buton ve submit içinde style yazabilirsiniz... */
}

3. yol : java script kullanmak…

JS kodu : ( Bu kod  form elemanlarımızı bularak onlara tiplerine göre class adı veriyor.)

function changeInputs()
{
  var els = document.getElementsByTagName('input');
  var elsLen = els.length;
  var i = 0;
  for ( i=0;i<elsLen;i++ )
  {
    if ( els[i].getAttribute('type') )
    {
      if ( els[i].getAttribute('type') == "text" )
        els[i].className = 'text';
      else
        els[i].className = 'button';
    }
  }
}

window.onload = function() { changeInputs(); }

Bu kodu kullandığımızda, yine css olarak;

input.text { /* sitiller */ }
input.button { /* sitiller */ }

tanımlamalarını yapmamız gerekiyor…