Kadir GÜNAY' ın Css, Xhtml, jQuery ve Arayüz Geliştirme Güncesi

input[type=text] Kullanımı

Yazının başlığını görünce muhtemelen neyi anlatacağımı az çok anlamışsınızdır değil mi? Evet, hemen hemen her gün ziyaret ettiğimiz web sitelerinin ister iletişim ister üye kayıt veya ister üye giriş bölümlerinde sıkça karşılaştığımız formların bir elemanı olan “input” ile ilgili çok az bilinen bir css anlatımı yapacağım.
Hepimizin bildiği gibi input elemanı form elemanının altında yer alır. Kendi içinde bazı id ve değişkeler alır. Peki nedir bu değişkenler;

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

Bu değişkenleri görmek için otomatik tamamlayıcısı olan bir kod yazma programına <input type=”" /> demeniz yeterli olacaktır. Siz zaten yazmaya başlayınca kendisi gerisini tamamlayacaktır.

İşte biz bugün bu değerlerin sadece içine metin alabilen ve css ile güçlendirebilen iki öğesini işleyeceğiz. text – password. Diğer öğeler de aynı özellikler doğrultusunda değerler almaktadırlar fakat text ve password gibi tüm değerleri kabul etmezler.

Adım 1 – Form Oluşturma

İçinde sadece Ad Soyad ve Şifre alanları bulunan bir form oluşturalım;

<form>
<table border="0" width="230">
<tbody>
<tr>
<td>Ad Soyad</td>
<td><input id="Text1" type="text" /></td>
</tr>
<tr>
<td>Şifre</td>
<td><input id="Password1" type="password" /></td>
</tr>
</tbody></table>
</form>

basit olması açısından tablo ile yaptım. Siz div ler aracılığı ile de yapabilirsiniz

Adım 2 – Css Kodumuz

Burada dikkat etmenizi istediğim bir yer var, eklediğimiz input elemanlarının kendilerine ait id leri bulunmaktalar fakat bizim o id ler ile işimiz olmayacak

input[type=text] { background-color:#ff0000; font-size:12px; color:#fff; border:4px solid #000; padding-left:10px;}
input[type=password] { background-color:#ff0000; font-size:12px; color:#fff; border:4px solid #000; padding-left:10px;}

gördüğünüz gibi inputların id leri ile değil input[type=] komutu ile css değerlerini atadım. Bu şekilde formlarınız içinde bulunan input elemanına ait tipi text ve password olan veya metin alabilen tüm değerleri tek bir şekilde kontrol edebilirsiniz.