CSS ile Erişilebilir Formlar Yapmak – I
Kullanıcı ile irtibatımızı sağlayan, sayfalarımıza interaktiflik kazandıran html elementleridir formlar. Bu makalede hep beraber Formların nasıl CSS ile tablo kullanılmadan oluşturulduğunu göreceğiz.
CSS ile daha erişilebilir ve esnek yapılı form kodlamayı iki kısma ayırabiliriz. Formların etiketlerinin yerlerini planlamak(konumlandırmak) ve form elementlerini güzelleştirerek daha göze hoş gelen ve işlevsel bir hala getirmek.
Basit Form yapılarının CSS ile kodlamak
Basit bir form yapısını planlayarak başlayalım. Web sitelerinde en çok kullanılan formlar kullanıcı giriş formlarıdır. Beraberce CSS ile planlanmış bir kullanıcı girişi formu yapalım. Xhtml kodunu yazalım.
<form action="/gonder/login" id="kullaniciGiris" method="post">
<dl>
<dt><label for="ad">Kullanıcı Adı :</label></dt>
<dd><input type="text" id"ad" name="ad" /></dd>
<dt><label for="eposta">Eposta:</label></dt>
<dd><input type="text" id="eposta" name="eposta" /></dd>
<dt><label for="hatirla">Beni hatırla</label></dt>
<dd><input type="checkbox" id="hatirla" name="hatirla" /></dd>
<dt><input type="submit" value="Gönder" /></dt>
</dl>
</form>
Bu tip küçük form sayfalarında tanım listelerinin(dl, dd ve dt) kullanılması düzen ve kullanım kolaylığı açısından çok önemlidir.
Şimdi CSS ile form elemanlarını yerlerine koyalım.
Bu formu tablo ile yaptığımız gibi yanyana koymak için genişlik ve float tanımı yapıyoruz.
form dt
{
width: 8em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
Sağdaki form elemanları ile soldakiler arasına boşluk bırakmak için genişlik değeri veriyoruz.
form dd {
margin-left: 4.5em;
}
Bir çok sitede kullanılan kullanıcı giriş(login) formlarını CSS yardımı ile kodladık. Şimdi görünüşünü düzeltelim.
Metinlerimizi font tanımı yapalım:
form dt {
width: 8em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
font:12px Arial, Helvetica, sans-serif;
}
Metin giriş alanlarını standart görünümünden çıkarıp kendi istediğimiz renklere büründürelim.
<dd><input name="ad" type="text" class="metinAlani" id"ad" /></dd>
input.metinAlani
{
color: #781351;
background-color: #b5c9e2;
border: 1px solid #31557f;
font:10px Arial, Helvetica, sans-serif;
}
Gönder düğmesinin şeklini değiştirelim. Burada renk uyumu form alanlarımızın daha hoş görünmesi için önemlidir. Renk seçimi yaparken genelde site bütünlüğünü bozmamak için site genel renk değerleri seçilir. Ama bu bir kural değildir.
<dt><input type="submit" class="gonder" value="Gönder" /></dt>
input.gonder
{
color: #224059;
background-color: #b5c9e2;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
font:bold 12px Arial, Helvetica, sans-serif;
}
Yukarıda gönder düğmesinin kenarlık renk seçimini yaparken sağ ve alt kısma daha koyu, sol ve üst kısma daha açık renk vererek düğmemize 3 boyutlu bir görünüm kazandırdık.
Şimdide form alanını bir bütün haline getirelim ve forma bir başlık yazalım. Bu işlemler için Html’in
Ben içine yazılanların kalın olmasını istiyorum font:bold; yazdım frontpage ie6 herşey normal ancak firefox 3.* ince olarak gözüküyor bunu nasıl halledebilirim? hocam..
birde kodlarım bu ben bunu şu şekilde yapmak istiyorum içine tıklayınca inputun içindekiler silinsin oluyor ancak istediğim tıklayınca aynı zamanda rengi değişsin bide bunun kenarları nasıl yuvarlıcam?
<input style="background:#66FF33;border: 1px solid green;color:white;text-align:center;font:bold;" type="text" name="kutu" value="Ara…" onfocus="if(this.value == 'Ara…') { this.value = ''; }" onblur="if(this.value == '') { this.value='Ara…'; }" size="18" />
font:bold yerine font-weight:bold ı deneyebilirmisiniz.
ben denedim oldu hemde çok güzel
fieldset
{
border: 1px solid #31557f;
width: 15em
padding-bottom:0.5em;
}
legend
{
color: #224059;
background-color: #b5c9e2;
border: 1px solid #31557f;
padding: 2px 6px
}
Hocam kodlamada ufacık bi eksik var,
Düzenli hali;
fieldset
{
border: 1px solid #31557f;
width: 15em;
padding-bottom:0.5em;
}
legend
{
color: #224059;
background-color: #b5c9e2;
border: 1px solid #31557f;
padding: 2px 6px
}
width: 15em burda “;” işareti eksik.
düzelttim
hocam bunu normal liste ile yapsak uygun olurmu sizce.ul li ler ile.
Evet olabilir o da başka bir yöntem.
Resimler görünmüyor, ilgilenirseniz sevinirim.
Uyarı için teşekkürler. Düzeltiyorum
paylaşım için teşekkürler
o kodda
onFocus yerine onMouseOver
onBlur yerine de onMouseOut
koyarak yapabilirsiniz demiştim
Hocam istediğim bu değil farkındasınız değilmi;
value=”E-posta adresiniz”onblur=”if(this.value==”) this.value=’E-posta Adresiniz:’;” onfocus=”if(this.value==’E-posta Adresiniz:’) this.value=”;”
bu kod üzerine gelince değil tıklayınca yazı kayboluyor. bunu biliyorum istediğim üzerine gelince kaybolması hocam.
yardımlarınızı bekliyorum Teşekkürler.
Merhaba arkadaşlar ve sevgili fatih hocam;
input ile ilgili birşey isteyecektim sizden; bu aşağıdaki adreste üst bölümünde üye giriş inputları var ve inputlarda title”" özelliği mevcut ama bu title özelliğini javacriptle yapmışlar mause over olduğu vakit karakter kayboluyo sonra tekrar geliyor.
ben oradaki input text özelliğini kendi siteme uyguladım ve maalesef üzülerek belirtmeliyimki birazda sinirliyim bu internet explorler 6 denen mahlukat şey hata var diyor ve js dosyasında hatalar buluyor ama bir türlü ayıklayamadım.
rica etsem inputta gördüğünüz title özelliği mause üzerine gelince kaybolan ve yeniden geri gelen şeyi başka nasıl yapılabilir.
ben o sitedeki input özelliği yerine başka hangi türlü yapabilirim.
mesela adobe.com sayfasının üst kısmanda searc bölümü var ama orada üzerine gelince değil tıklayınca kayboluyo benim istediğim üzerine gelince kaybolsun.
bu anlattığım örneği bilen, yada başka bir sitede görmüş olan arkadaşlar lütfen yazın.
şimdiden teşekkürler!
http://www.godaddy.com/
http://www.fatihhayrioglu.com/form-alanlarina-odaklanma/
Burdaki yöntemi kullanın sadece onFocus onBlur yerine onMouseOver onMouseOut kullanarak yapabilirsin
eline emeğine sağlık ta bu kodlarını hangi kısmını nereye yazacağız onuda anlatırmısın