CSS form

CSS Dersleri

CSS form : 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.

 

Makalemizin başlığını ?CSS ile Erişilebilir Formlar Yapmak? koyduk peki bu Erişilebilirlik(Accessible) nedir? Erişilebilirlik kullanıcının bir çok araç(bilgisayar, cep telefonu, pda vb.) ve durumda sayfa ve öğelerine en kolay ve düzgün bir şekilde erişebilmesidir. Web standartlarına uygun kodlamanın en önemli amaçlarından biridir Erişilebilirlik.
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.

01 <form action="/gonder/login" id="kullaniciGiris" method="post">
02 <dl>
03 <dt><label for="ad">Kullanıcı Adı :</label></dt>
04 <dd><input type="text" id"ad" name="ad" /></dd>
05 <dt><label for="eposta">Eposta:</label></dt>
06 <dd><input type="text" id="eposta" name="eposta" /></dd>
07 <dt><label for="hatirla">Beni hatırla</label></dt>
08 <dd><input type="checkbox" id="hatirla" name="hatirla" /></dd>
09 <dt><input type="submit" value="Gönder" /></dt>
10 </dl>
11 </form>

Login Ekranının Firefox Ekran görüntüsü

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.

1 form dt
2 {
3 width: 8em;
4 float: left;
5 text-align: right;
6 margin-right: 0.5em;
7 display: block;
8 }

Sağdaki form elemanları ile soldakiler arasına boşluk bırakmak için genişlik değeri veriyoruz.

1 form dd {
2 margin-left: 4.5em;
3 }

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:

1 form dt {
2 width: 8em;
3 float: left;
4 text-align: right;
5 margin-right: 0.5em;
6 display: block;
7 font:12px Arial, Helvetica, sans-serif;
8 }

Metin giriş alanlarını standart görünümünden çıkarıp kendi istediğimiz renklere büründürelim.

1 <dd><input name="ad" type="text" class="metinAlani" id"ad" /></dd>

1 input.metinAlani
2 {
3 color: #781351;
4 background-color: #b5c9e2;
5 border: 1px solid #31557f;
6 font:10px Arial, Helvetica, sans-serif;
7 }

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.

1 <dt><input type="submit" class="gonder" value="Gönder" /></dt>

01 input.gonder
02 {
03 color: #224059;
04 background-color: #b5c9e2;
05 border-top: 2px #cce3ff solid;
06 border-left: 2px #cce3ff solid;
07 border-bottom: 2px #31557f solid;
08 border-right: 2px #31557f solid;
09 font:bold 12px Arial, Helvetica, sans-serif;
10 }

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

ve

etiketlerini kullanacağız.
01 <form action="/gonder/login" id="kullaniciGiris" method="post">
02 <fieldset>
03 <legend>Kullanıcı Girişi</legend>
04 <dl>
05 <dt><label for="ad">Kullanıcı Adı:</label></dt>
06 <dd><input name="ad" type="text" class="metinAlani" id"ad" /></dd>
07 <dt><label for="eposta">Eposta:</label></dt>
08 <dd><input name="eposta" type="text" class="metinAlani" id="eposta" /></dd>
09 <dt><label for="hatirla">Beni hatırla</label></dt>
10 <dd><input type="checkbox" id="hatirla" name="hatirla" /></dd>
11 <dt><input type="submit" class="gonder" value="Gönder" /></dt>
12 </dl>
13 </fieldset>
14 </form>

CSS ile yeni eklediğimiz alanların görünümünü düzeltelim.

01 fieldset
02 {
03 border: 1px solid #31557f;
04 width: 15em;
05 padding-bottom:0.5em;
06 }
07 legend
08 {
09 color: #224059;
10 background-color: #b5c9e2;
11 border: 1px solid #31557f;
12 padding: 2px 6px
13 }

Sonuç sayfasını görmek için tıklayınız.

Formumuzun son hali yukarıda göründüğü gibi olacaktır. Bir sonraki makalede daha karışık(gelişmiş) formların css ile yapılmasını göreceğiz.

Kaynak : Fatih HAYRİOĞLU, CSS dersleri

Bana Ders Anlat © 2008-2022