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>
Yazınızı buraya yazın!
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:
Buraya yazınızı yazın!
<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
Yazınızı buraya yazın!
[FONT=Verdana, Arial, Helvetica, sans-serif]<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> [/FONT]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...
