Adım Adım Form Yapalım

[bitter_im]

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

Metin alanımıza arka plan resmi ekleyelim: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>
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...

 

[bitter_im]

INPUT = minik metin alanı

<form> <input type="text" size="10" maxlenght="21"> </form>

Bir önceki dersimizde gördüğümüz form oluşturmakta işimize yarayacak olan Metin Alanının küçüğünü yaptık.. Bu minik metin alanını Form' un dışında da kullanabiliriz..
Mesela anasayfamızda..

Şimdi bu minik metin alanımızı oluşturan kodlara bir göz atalım:

İlk başta alanımızın Form' a ait olduğunu belirten <form>...</form> etiketlerimizi yazıyoruz..
Daha sonra (<input ) ile metin alanımızın başlatığını belirtiyor, -size="10"- ile kutumuzun genişliğini, -maxlenght="20"- ile de ziyaretçimizin yazabileceği metin uzunluğunu ayarlayabiliriz..
Eğer -maxlenght- değerini vermezsek normal karakter olarak 21 karakter belirlenir..
Eğer minik metin alanımızın içinde açıklayıcı bir yazı olmasını istiyorsak:


<form><input type="text" size="20" value="Buraya Adınızı yazın" maxlength="10"></form>
Yukarıdaki örnek de gördüğümüz gibi,
(kalın harfler ile yazdığımız yere dikkatle bakın.)
normal form etiketlerini ve minik metin alanımızı oluşturan input etiketlerini yazdık.. Metin alanımızın ölçülerini belirleyen ölçüleri verdik.. Artı olarak metin alanımızın içinde açıklayıcı bir yazı olmasını sağlayan value="Buraya Adınızı yazın" etiketini ekledik.. Sonuç= Metin alanımızın içinde açıklayıcı yazı oldu.
Bir açıklama yapmam gerekiyor
Neden bu metin alanımıza minik metin alanı dedik? Çünkü bu metin alanımızın sadece enini ayarlıyabiliyoruz...
Boyunu ayarlıyabilmek için büyük metin alanımızı yapmamız lazım.. Sanırım anladık
Bu açıklamadan sonra devam edelim

Parola yazmak için metin alanı..
<form> <input type="password" size="10" maxlenght="21"> </form>

Yukarıdaki metin alanının içine birşeyler yazmaya çalışın bakalım
Yazdıklarınız yıldız şeklini aldı değil mi? Bu yüzden metin alanımızın ismi "Parola yazmak için metin alanı"..
Buradaki yaptığımız tek değişiklik input (yani minik metin alanımızı oluşturan etiket) etiketinin yanındaki type (tip) etiketinin değerini password yapmak..

password daha çok e-mail kullanırken lazım olur.. Ya da üye olduğumuz bir sayfaya girebilmek için..
Yavaş yavaş form alanımız oluşuyor.. Az kaldı biraz daha beklersek çok güzel bir form alanımız olacak..
Bol bol denemeler yapıyor, araştırmalar yapıyoruz değil mi?
Ee ne demişler çok yaşayan değil çok gezen bilirmiş Biz de çok araştırma yaparak bu gezi olanağımızı kullanmış oluruz

 

[bitter_im]

Form alanının temel yapı taşlarını oluşturan malzemeleri öğrenmeye son sürat devam ediyoruz..
Sonunda çok güzel bir form alanımız olacak.. Hadi kolları sıvayın bakalım
İşaret koyulan kutucuklar (Checkbox)
Bunu severim
bunu sevmem

<form><input type="checkbox" name="isaret"> </form>
Yukarıdaki örneklerimize bir bakın.. Yazıların yanındaki kutucuklara işaret koyun..
Bu yaptığımız kutuların ismi işaret Kutucukları yani "Checkbox"..
Bunları da diğerleri gibi Form alanında kullanırız..
Gelin bu işeret kutucuklarını yakından inceleyelim.
Artık alıştığımız ve form alanı oluştururken unutmamamız gereken etiket <form> etiketini hiç unutmuyoruz değil mi?
Daha sonra da (bakınız diğer 2 dersimiz diğer 2 dersimizde de gördüğümüz "input" etiketini görüyoruz.. Burada değiştirdiğimiz tek kısım "input" etiketinin type' ini (tipini) "checkbox" yani işaret kutucuğu diye adlandırırız..

Radyo Düğmesi Bunu severim
Bunu sevmem

<form><input type="radio" name="isaret"> </form>

Radyo düğmesi diyince aklınıza bildiğimiz Radyolar geldi değil mi
Haklısınız ilk başta benim de aklıma öyle gelmişti. Diğer forum öğelerinden pek bir farkı yok.. Sadece Type (tip) ' ini "Radio" Yapmamız yeterli..
Form alanına bir adım daha yaklaştık..
Biraz sabır ve çalışma ile çok güzel bir form alanımız olacak. Bir dahaki dersimizde yine form alanımıza tanımaya devam edeceğiz..

 

[bitter_im]

Form alanımız yavaş yavaş oluşmaya başladı mı? Bir form alanım olsun diye sabırsızlanıyormusunuz? O zaman siz form alanı yapmaya hazırsınız.
Bizi form alanına bir adım daha yaklaştıracak olan kodları öğrenmeye devam edelim..
Aşağı Doğru Açılan Seçme Kutucuğu (Select) En Sevdiğin MevsimSonbaharKışİlkbaharYaz <select name="Mevsimler" size="1"><option selected>En Sevdiğim Mevsim
<option value="Sonbahar">Sonbahar
<option value="Kış">Kış
<option value="İlkbahar">İlkbahar
<option value="Yaz">Yaz</select>
Şimdi de yukarıdaki kutucuktan bir seçim yapmaya çalışın. En sevdiğiniz mevsimi seçin. Örnek de gördüğümüz kutucuğun adı: Aşağı Doğru Açılan Seçme Kutucuğu. Şimdi de kodlamamızı inceliyelim:
Form alanımzın içerisin de "select" yani "aşağı doğru açılan seçme kutucuğu" nun ismini belirliyoruz = "name="mevsimler".
Ben mevsimler ismini verdim. siz istediğiniz ismi verebilirsiniz. Bu daha sonra formu bulmanızı kolaylaştırır ve formunuzun içeriğine uygun olsa iyi olur.

Daha sonra "option selected" ile açılan kutumuzun başlık yazısını yazıyoruz.. Yani kutumuzun konusunu belirliyoruz. Daha sonra aşağı doğru açılan menümüzün seçeneklerini belirliyoruz: "option value=Sonbahar" . (Tekrar söylüyorum burada ben örnek menümüzün içeriğine göre seçenekler yaptım!)
Son olarak </select> diyor ve menümüzü bitiriyoruz...
Bu Menümüz de sadece </select> etiketini bitiririz. Diğer etiketleri bitirmeyiz. Mesela "option value="isim" etiketi bitirilmez. Bu önemli noktayı da anladık değil mi?

Gönder ve Sil Düğmeleri
<input type="submit" name="gonder" value="gönder">
<input type="reset" name="sil" value="sil">
Bakın ne kadar tatlı iki butonumuz oldu değil mi? Şimdi onlara tıklayın. (Biliyorum ben demesen de tıklayacaktınız Ama hiçbirşey olmadı değil mi? Gelin bu butonlarımıza biraz daha yakından bakalım:

<input> etiketini hatırladınız değil mi? Bu sefer <input> etiketimizin Gönder botunundaki type (yani tip)' i "submit" , Sil butonundaki değeri type' i ise "reset" . Form' umuzun nasıl gönderileceğini daha sonra öğreneceğiz.. Yani formun bize nasıl bilgi ulaştırdığını.. Şimdi geçelim..

Gönder ve Sil düğmelerini biz yapalım!

<button type="submit" name="gönder" value="gönder"><img src="gonder.jpg"></button>
<button type="reset" name="sil" value="sil"><img src="sil.jpg"></button>
Düğmelerimizi biz yapalım dememin sebebi, butonlarımızı bu sefer kodlar ile değil de bir grafik programı ile yapmamızdır..
(Kendi yaptığımız butonlar hakkındaki geniş bilgiyi Photoshop derslerinde bulabiliriz )
Butonumuzun kodlamasını daha yakından inceleyelim. Öncelikle butonumuzun type (tip) ' ini belirledik.. Gönder düğmesinin ki "gönder" sil düğmemizin tipi ise "sil" . Butonumuzun bitirmeden önce ise grafik öğemizi belirliyoruz. Ben elimde olan gönder ve sil grafiklerini kullandım. Siz de elinizde olan ama gönder ve sil düğmesi olduğu belli olan bir düğme kullanın.
Vee mutlu son
Form alamızın inşaatın da gerekli olan bütün malzemeleri öğrendik.. Sıra geldi başlı başına bir form yapmaya.. Sonra ki dersimizde öğrendiklerimizi birleştirerek çok güzel olacağına inandığım bir form yapacağız.
Bekleyin

 

[bitter_im]

İştee beklediğimiz an geldi. Bugüne kadar öğrendiklerimiz ile bir form alanı yapacağız. Umuyorum ki çok güzel olacak. Haydi kolları sıvayalım bakalım şöyle bir. Sıra ellerimiz de. Başlıyoruz kodlamayı yapmaya..

İşte Form Örneğimiz:[FONT=Verdana, Arial, Helvetica, sans-serif]<html>
<head>
<title>Bize ulaşın</title>
<**** http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body bgcolor="#FFFFFF">
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35%"><img src="img-/cicek.jpg" width="230" height="252"></td>
<td width="65%"> <div align="center">
<h1><font face="Arial, Helvetica, sans-serif">Bize Ulaşın</font></h1> </div>
</td>
</tr>
</table>
<p>&nbsp;</p>
<table width="75%" border="0" cellspacing="0" cellpadding="0" height="391">
<tr>
<td width="37%" height="42"> <div align="right">
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Adınız Soyadınız: <br> <br> </font>
<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"> </font></p> </div> </td>
<td width="63%" height="42">
<form name="form2" >
<input type="text" name="textfield2"> </form>
</td>
</tr>
<tr>
<td width="37%" height="2">
<div align="right">
<p><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">e-mail adresiniz: <br> </font>
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font></p> </div>
</td>
<td width="63%" height="2"> <form name="form1" > <input type="text" name="textfield3"> </form>
</td>
</tr>
<tr>
<td width="37%" height="2"> <div align="right">
<p>
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Web Siteniz: <br> </font>
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"><br> </font></p> </div>
</td>
<td width="63%" height="2"> <form name="form1" >
<input type="text" name="textfield32" value="http://"> </form>
</td>
</tr>
<tr>
<td width="37%" height="2"> <div align="right">
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Eğitim Durumunuz: <br> </font></div>
</td>
<td width="63%" height="2">
<form name="form3" >
İlk <input type="radio" name="radiobutton" value="radiobutton">
Orta <input type="radio" name="radiobutton" value="radiobutton">
Lise <input type="radio" name="radiobutton" value="radiobutton"> </form>
</td>
</tr>
<tr>
<td width="37%" height="2"> <div align="right">
<font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000">Sitemizi Nasıl Buldunuz? <br> </font></div>
</td>
<td width="63%" height="2">
<form name="form4">
<select name="temas" size="1">
<option selected>Bir Seçim Yapın</option>
<option>iyi</option>
<option>kötü</option>
<option>fena değil</option>
</select> </form>
</td>
</tr>
<tr>
<td width="37%" height="80"> <div align="right">
<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Bize Söylemek İstedikleriniz <br> </font></div>
</td>
<td width="63%" height="80">
<textarea name="textfield" cols="35" rows="5">Buraya mesajınızı yazınız.</textarea>
</td>
</tr>
<tr>
<td width="37%" height="32">
</td>
<td width="63%" height="32">
<form name="form5" >
<input type="submit" name="Gonder" value="Gönder">
<input type="reset" name="Sil" value="Sil"> </form> </td>
</tr>
<tr>
<td width="37%">
</td>
<td width="63%">
</td>
</tr>
</table>
</body>
</html>
Örneğimizi İnceleyin..

Ziyaretçiler için gizlenmiş link,görmek için Giriş yap veya üye ol.

Yukarıdaki HTML kod kümesi size çok uzun geldi değil mi? Aslın da hiç de korkulacak birşey değil.. Birazcık sabır bize yeterli olacaktır
Yandaki butona tıklayarak bu HTML kod kümesinin oluşturduğu Form Alanını görebilirsiniz. Bu form' a bakarak siz de kendi web siteniz için formlar yapabilirsiniz..
Öğüt BölümüBir daha ki dersimiz de Form gönderme işlemi nasıl yapılır? sorusuna cevap bulacağız..

O zamana kadar siz de derslerinize iyi çalışın Webdersleri Forum'u takip edin.

Bu kadar öğüt yeter mi?