CSS ile form tasarım mantığı

20 / Temmuz / 2008 Author

İsa Engiz

Genel

css, form

9 Yorum Yapilmis.

< 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!

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!