HTML Dersleri 2

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>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..
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ç: pembe bir alanımız oldu

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

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

---

INPUT = minik metin alanı
<form> <input> </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></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> </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..

İşaret koyulan kutucuklar (Checkbox)
Bunu severim
bunu sevmem <form><input> </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> </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..

İşte Form Örneğimiz: <html>
<head>
<title>Bize ulaşın</title>
****** http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>

<h1>Bize Ulaşın</h1>

<p>&nbsp;</p>

<p>Adınız Soyadınız: </p>	<form> <input> </form>
<p>e-mail adresiniz: </p>	<form> <input> </form>
<p> Web Siteniz: </p>	<form> <input> </form>
Eğitim Durumunuz:	<form> İlk <input> Orta <input> Lise <input> </form>
Sitemizi Nasıl Buldunuz?	<form> <select> <option>Bir Seçim Yapın</option> <option>iyi</option> <option>kötü</option> <option>fena değil</option> </select> </form>
Bize Söylemek İstedikleriniz	<textarea>Buraya mesajınızı yazınız.</textarea>
	<form> <input> <input> </form>

</body>
</html>

Form nasıl gönderilir? Nereye gider? Form gönderme işlemi HTML gibi diller ile yazılan programlar vasıtası ile yapılır. Bu programlar CGI ve ASP ' dir. Biz burada o programları öğrenmeyeceğiz. Ama formumuz yolda mı kaldı?
Hayır..
Bu formu göndermenin ikinci bir yolu daha var. "mailto:" mailto: ile form gönderme İsminden de anlaşılacağı gibi mail ile gönderme işlemi. Ama nasıl?

Bir Form alanı oluşturduğumuz zaman bu alanı <form>..</form> etiketleri içinde yaparız. Buraya kadar doğru. Formu göndermek içi ise, <form> etiketinin içinde Action yüklemi ile formumuzun doldurulup gönderilemsi ile içindeki bilgilerin nereye, hangi adrese gideceğini belirleriz. Yine form etiketinin içirisin de olan Method yüklemine ise hangi yöntem ile göndereceğimizi bildiririz.

Biraz karışık geldi değil mi? Korkmayın.. Şimdi daha derine inelim..

Şöyle bir Form etiketi düşünelim:

<FORM>

Bu "mailto:" ile form gönderme işlemidir. Dikkat etmemiz gereken birşey var ki, bu yöntem ziyaretçinin bilgisayarın da bir uyarı mesajı çıkmasını sağlar. Bu yüzden çok tercih edilmez.
Diğer Form Gönderme Teknikleri Mailto: bizim için en kolay form gönderme tekniğidir. Ancak örneklerde de gördüğümüz gibi uyarı mesajı verdiği için pek tercih edilmez.
Bunun yerine programlama dilleri ile yazılmış form gönderme teknikleri kullanılır.
Ama bizim için yapılmış olan ücretsiz servisler de var. Bu sayede hiçbir programlama diline ihtiyaç duymadan bir ziyaretçi defteri sahibi oluyoruz.