Css/Ajax ile Etkilesimli Form

**lekker** · 24.06.2009 10:39

Merhaba kolay gelsin herkese,

Ornek olarak linkteki gorundugu gibi bir form olusturmak istiyorum formlarin arkaplani vs vs degisik birsey olmasini istiyorum ama bunun nasil olacagi konusunda pek fikrim yok.

aynen resmideki gibi birsey yapmam gerekiyor...

Birde bu form biraz karisik bunun icinden neyle nasil cikacagim bilmiyorum. Ben spor hocasiyim, ozel dersler veriyorum. Olusturmak istedigim form aynen soyle bana yardimci olursaniz sevinirim.

1 ; benim saat ucretim 60 TL
2 ; Sinav yapiyorum bunun ucreti : 500 TL
3: Ozel paketlerim var sinav ve 30 derslik : 1000 TL
4; Ekstra secenek mesela kilo verme : 300 TL
Mesela kullanici siteme girecek ve kendine paket sececek mesela 15 ders + 1 sinav mesela yada 30 ders, 1 ve bunun yaninda birde kilo verme paketini sececek ve karsisinda toplam fiyati gorecek..

Bu mumkundur diye dusunuyorum ama sporcu bu isten ne kadar anlar iste gerisini siz dusunun yardimlarinizi bekliyorum. Bana hazir degilde orneklerle ogrenebilecegim sekilde yardimci olursaniz sevinirim.

**lekker** · 01.07.2009 00:48

Sanirim bunu daha once deneyen olmadi. Hesap kismini hallettim ama tasarim kismi kaldi o konuda birsey yapamadim..

form olusturdum ama standart gorunumlu form oldu ben aynen resimdeki gibi yapmak istiyorum bunun icin ne yapmam gerekiyor ?

**emresumer** · 29.07.2009 18:00

"jquery selectbox" ile dilediğin şekilde görünüm elde edebilirsin.

**alico** · 16.10.2009 23:53

@lekker

HTML kodu aşağıdaki şekilde yapınız

Kod:

<div class="formcase">
 <div class="one">
    <ul>
     <li><select>...</select></li>
     <li><select>...</select></li>
     <li><select>...</select></li>
   </ul>
 </div>
 <div class="two">
   <ul>
     <li><select>...</select></li>
     <li><select>...</select></li>
     <li><select>...</select></li>
   </ul>
 </div>
</div>

Bir adet reset CSS bağlayın burdan indirin mesala. Güzel şimdide aşağıdaki CSS'lerimizi tanımlayalım.

Kod:

.formcase                {width:580px; padding:10px;  height:380px ; background:url(temanı buraya ver) no-repeat left top} 
.formcase div          {float:left; width:270px}
.formcase div .one {margin-right:20px}

/*
 Select Tipi
 Resimde gösterdiğini js ile bindiren örnekler olasada bu verimli bir çalışma olmaz
 Standardın dışına çıkamayacak şekilde çizmem daha doğru olur
 Aşağıdaki stil yeterli olabilir.
*/

.formcase div  li select {
       
       font:normal 12px tahoma;
	padding:1px;
	height:21px;
	width:270px;
	background:white url(fback.gif) repeat-x left top;
	border-top:1px solid #7c7c7c;
	border-left:1px solid #c3c3c3;
	border-bottom:1px solid #dddddd;
	border-right:1px solid #dddddd
}

Derinlik görüntüsü için gerekli olan fback buradan indir

Konu Başlığı: Css/Ajax ile Etkilesimli Form

Konuyu Paylaş

Seçenekler

Css/Ajax ile Etkilesimli Form

Bu konu başlığı için etiketler

Mesaj Seçenekleri