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!
