CSS ile form tasarım mantığı
< div>ler ile < table> etiketlerinin kapışması uzun süredir devam etmekte ve her geçen gün < div> etiketinin üstünlüğü artmakta. Tüm siteyi div etiketleri ile tasarlama ve geliştirmenin avantajları üzerine de konuşulabilir ancak biz bugün burada css divleri ile form tasarlamanın temel mantığına göz atalım.

Css ile tasarlayacağımız basit form örneğine buradan göz atabilirsiniz veya dosyayı buradan indirip kodları inceleyebilirsiniz.
Adım 1: HTML Kodları
Formumuzu oluşturmak için < fieldset> etiketini kullanacağız:
<fieldset> <legend>İletişim Formu</legend> <ul> <form> <li><label for="isim">İsminiz</label><input type="text" name="isim" id="isim" /></li> <li><label for="soyisim">Soyisminiz:</label><input type="text" name="soyisim" id="soyisim" /></li> <li><label for="konu">Mesajınızın Konusu:</label><input type="text" name="konu" id="konu" /></li> <li><label for="site">Web Siteniz:</label><input type="text" name="site" id="site" /></li> <li><label for="mesaj">Mesajınız:</label><textarea id="mesaj" name="mesaj" rows="5" cols="20"></textarea></li> <li><input type="button" style="margin-left:150px;" value="Mesajımı Gönder" /></li> </form> </ul> </fieldset>
HTML kodlarında asıl önemli olan yer, her satırı < li> etiketi içerisine koyuyoruz ve form girdi alanlarının tanımlarını da < label> etiketi içerisine yazıyoruz. Düşeyde hizalamak için li etiketini, yatayda hizalamak için label etiketini kullanacağız.
Adım 2: CSS
Formumuzu şekle sokacak CSS kodları ise aşağıdaki gibi:
fieldset { border:1px dashed #009900; padding:5px; text-align:left; width:400px; } legend { background-color:#fff; width:150px; } ul { float:left; } li{ float:left; padding:0px; margin-top:5px; list-style-type:none; display:block; width:100%; } label { float:left; width:150px; }
Burada önemli olan 4 nokta var, birincisi li etiketi için “float:left” tanımlıyoruz, ikincisi yine li etiketi için list-style-type:none ve width:100% olarak belirtiyoruz. 3.sü ise li etiketinin hizalamasını yapacak bölüm; “margin-top:5px;” 4. ve son nokta ise label etiketi için genişlik tanımlaması: “width:150px”. Bunları tanımladıktan sonra tamamen css ile güzel bir form oluşturmuş bulunmaktayız!
Sonuç
CSS ile form oluşturmanın temel mantığı bu şekilde, li ve label etiketlerinin kullanılmasına dayanıyor.
Tabi oluşturulan bu forma yaratıcılığınız doğrultusunda şekil vermek isteyebilirsiniz, daha önce verilen şekillerden ilham almak için bu bağlantıya tıklayabilirsiniz, hemen hepsinde bu mantık kullanılarak oluşturulmuş formlar bulunmakta.
Bir sonraki yazıda görüşmek üzere!
- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!
CSS ile form tasarım mantığı yazısına 9 Yorum yapılmış.
Arama
E-Posta Aboneliği
RSS Aboneliği
En Çok Yorumlanan Yazılar
- Ajax ile dinamik listeleme (23)
- PHP ile sınırsız alt kategori mantığı (23)
- Blogger’da “devamını oku” bağlantısı (21)
- MySQL’de “join” kullanımı (17)
- MySQL’de Transaction ve PHP ile kullanımı (16)
- Kullanıcı dostu url hazırlamak (14)
- PHP’nin (muhtemelen) az bilinen 10 özelliği (12)
- Kullandığınız programlama dili ne kadar popüler? (12)
- Kullanıcı dostu URL oluşturma (2. teknik) (11)
- .htaccess konuları [Giriş] (11)
Etiketler
Son Yorumlar
- Murat: Güzel bir teknik, şu ana kadar sınırsız alt kategori lazım olmadı ama olmayacağı anlamına gelmiyor
- iilyas: Bu kodlar çalışmıyor arkadaşım. Localde olduğu içinmi acaba ?
- iilyas: Arkadaşım çok teşekkür ediyorum. Harika anlatmışsın ajaxla çalışmalara başlamak lazım estetik açısından.....
- Nuri: bende bu şekilde bir çalışma yaptım ancak bir sorunum var ne yaptıysam url den index.php bölümünü kaldıramadım....
- Kemal: Makale için çok teşekkürler, resimleri div tagları ile yapabilirmiyiz. Bu arada imagelara link verirsek daha...
20 / Temmuz / 2008
Çok güzel olmuşşş. ellerinize saglık.. daha ne isteyebiliriz ki
teşekkürler arkadaşım. bilgi çok işime yaradı
[...] – Satırları < li> etiketleri ile ayıracağız. Daha önce “CSS ile form tasarlama” yazımızda da buna benzer bir mantık yürütmüştük. 2 – Satırlardaki hücreleri ise [...]
Merhaba, kodunuz çok temiz olmuş elinize sağlık.
Ancak bu form içiçe float uygulanmış divlerle kullanıldığında görünümde hataya sebep olabilir.
Bunun giderilmesi için ul taginin bitimine
kodunu eklemek bu hatayı gidermenize yardımcı olur..
Teşekkürler,
Ancak kodunuz çıkmamış…
yazmistim cikmamis
yine cikmazsa sunu deneyebiliriz
(div style=”clear:both”)(/div)
tskler..
yaptiniz bi hayır tam olsun li ul felan isimlendirseniz
sitede büsürü li var ve çakişiyo onla uğraşiyorum şimdi.