Form 1

Form Yapalım...-1

Sitemiz de ziyaretçi defteri olsun istiyoruz.. Ya da ziyaretçimizin doldurması için form alanı oluşturmamız lazım..
Şimdi de Form alanı oluşturmak için gereli araç ve gereçleri öğrenelim:)

Form alanı nelerden oluşur?

Okul da ya da günlük yaşantınızda eminim ki form doldurdunuz.. Hayatınıza internet geldi ve formlarla daha çok karşılaşmaya başladınız.. Gezdiğiniz sitelerde gördüğünüz ziyaretçi defterlerinin artık kendi sitenizde olmasını istiyorsunuz..
Ancakk Ziyaretçi Defterimizin sayfasını oluşturabiliriz ama Ziyaretçi Defterimizin işleyebilmesi için CGI denen programlama dilini bilmemiz gerekir.. Biz şimdilik sadece form alanı oluşturmak ile yetineceğiz.. İleri de belki Ziyaretçi Defterinin işleyişinden de söz edebiliriz :-)

Bu kısa ziyaretçi defteri kursundan sonra gelelim form alanı oluşturmaya:
Form'u yapı taşları

Sayfamızda bulunan form, isteğe bağlı olarak değişik text alanlarından oluşabilir.. Ya da aşağı doğru açılan bir menü ile ziyaretçinin isteğini seçmesine izin verebiliriz.. Şimdi tek tek forum'u oluşturan temel yapı taşlarından söz edelim.. Bir de bunları örnekler ile gösterelim.. Sıvayın kolları Form Alanı yapıyoruz!

 
Form alanı:
Text Area (metin alanı):
Form alanının dışında da kullanılabilen text area yani metin alanı, isminden de anlaşıldığı gibi içine yazı yazabileceğimiz bir alandır..

Şimdi bir örnek:

<form><textarea rows="5" cols="20">Yazınızı buraya yazın!</textarea><form>

Yukarıda örneğini verdiğimiz metin alanı Form alanının bir parçasıdır.. Form alanı <form> ile başlar </form> ile biter.. Tekrar yukarıdaki örneğimize bakar isek <textarea> ile başlayan </textarea> ile biten metin alanı oluşturma etiketlerini görüyoruz.. textarea etiketinin yanına yazdığımız "rows" alanımızın yüksekliğini, "cols" ise genişliğini belirlememize yarar.. Böylece metin alanımızın boyutlarını da ayarlıyabiliriz..
Renkli Metin alanı yapalım:

 

<form><textarea rows="5" cols="20" style="background:#ff33ff" style="font-family:Verdana" style="color:#ffccff" "style="border style:solid;" >Buraya yazınızı yazın!</textarea></form>

Yukarıda örneğimiz ve örneğimizin altında da kaynak kodunu görüyoruz.. Bu seferki kaynak kodumuz diğerinden biraz daha uzun. Bu kodlara biraz daha yakından bakalım:
Tekrar <form> etiketi ile başlıyan </form> etiketi ile biten, alanımızın form' a ait olduğunu belirten kodlarımızı yazdıktan sonra, alanımızın metin alanı olduğunu belirten <textarea; etiketimizi yazdık. Yükseklik (rows) ve genişliği (cols) belirttik. Daha sonra, metin alanımızın zemin rengini belirten

style="background:#ff33ff"

etiketini tekrar <textarea> etiketimizin içine yazdık.. Aynı yere bu sefer yazı tipimizi ve rengini belirlemeye yarayan

style="font-family:Verdana" style="color:#ffccff" "style="border style:solid;"

etiketimizi yazdık..
Sonuç: Şeker gibi bir metin alanımız oldu:)

Dikkat!
Örneklerimiz de sözünü ettiğimiz "style" etiketlerini daha sonra ayrıntılı şekilde göreceğiz.. Şimdi kafanızı karıştırmasını istemem...
Bir de umarım renk kodlamalarını hatırladınız! Eğer hatırlamadı iseniz diğer derslerimize bir göz gezdirin!

Bu açıklamadan sonra devam edelim:)
Metin alanımıza arka plan resmi ekleyelim:

 

<form><textarea rows="5" cols="26" style="background-image: url('kablumbik.gif')" style="font-family:comic sans ms" style="color:#9900ff" style="border style:solid" >Yazınızı buraya yazın!</textarea></form>

Bu seferki metin alanımızın zeminin de resimler var.. Bunu daha önceki derslerimizde de gördüğümüz "background" etiketi ile yaptık.. Normal "form" ve "textarea" etiketilerimizin yanına bu sefer:

style="background-image: url('kablumbik.gif')"

Etiketini ekledik. Böylece metin alanımızın arka planı resim ile doldu.. Ben elimde olan kaplumbikleri kullandım.. Siz de kendi zevkinize göre istediğiniz resmi kullanabilirsiniz..

Şimdilik form unsurlarından en dikkat çekeni olan
Metin Alanı ' nın nasıl yapıldığını öğrendik.. Form alanımızı oluşturan bütün unsurları oluşturduktan sonra hepsini bir araya getirip bir form oluşturacağız.. Ama biraz sabredin.. Ve unutmayın hiçkimse mükemmel değildir...
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol