28 Haziran 2009 tarihinde, CSS kategorisinde yazıldı. Yazı, 3.606 kez okundu ve 6 kez yorumlandı.
CSS’de form elemanlarını type’ına göre şekillendirme
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 :
|
1 2 3 |
<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 :
|
1 2 |
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 :
|
1 2 3 |
<input type="text" value="" /> <input type="button" value="Buton" /> <input type="submit" value="Gönder" /> |
css tanımlamalarınız :
|
1 2 3 4 |
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.)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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'; } } } |
|
1 |
window.onload = function() { changeInputs(); } |
Bu kodu kullandığımızda, yine css olarak;
|
1 2 |
input.text { /* sitiller */ } input.button { /* sitiller */ } |
tanımlamalarını yapmamız gerekiyor…
Ellerinize Saglık Cok yararlı olmus Basarılı yazılarınızın devamını Dilerim
Gerçekten Güzel Paylaşım Kardeşim Başarılarının Ve Derslerinin Devamını Dilerim…
çok teşekkür ederim …
hiç bir şey anlamadım benim istediğim form elemanları mesela textbox, textarea, checkbox ı nasıl biçimlendiririz ben bunları css olarak yazınca hiç bir fayda etmiyor yardımcı olursanız sevinirim
Aslında işe yaraması lazım. Eğer bu üç yöntemde form elemanlarınızı ayrı ayrı düzenlemeniz konusunda size yardımcı olmuyorsa, mutlaka farklı bir problem vardır.
Aklıma gelen şeyler;
– Tarayıcının desteklemediği bir özelliği değiştirmeye çalışıyor olabilirsiniz,
– CSS kodlarında son yazılan tanımlama geçerlidir. Sizin tanımlamalarınızdan sonra başka o elemanları etkileyen başka CSS tanımlamaları olabilir. Bunun için !important’ı kullanabilirsiniz.
örn: input[type=”text”] { width:250px !important; background:#FF9 !important; } şeklinde.
– Yazım hatası yapmış olabilirsiniz,
Kodlarınzı bunlara dikkat ederek tekrar bi gözden geçirin.
iyi günler. bir sorum olacaktı. iki text kutusunu birleştirmek istiyorum. şu şekilde : iki veya daha fazlatextarea ya da text formatlı başka bir şey varsasitede kullanıcıya sunulacak kullanıcı bu alanları doldurup bir butona basarak bunların tek text şeklinde karşısına gelmiş şekilde bulacak. bunu nasıl yapabilirim?html de yapmak istiyorum javada nasıl bir kod Kullanacağım