A dan Z ye HTML

[crazyossie]

HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz. Formlar <form>...</form> etiketleri arasına yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım.

12/1. FORM TÜRLERİ
Aşağıda form türlerini ve kullanılışlarını görüyoruz.:

text maxlength: Yazılabilecek maksimum text uzunluğu
value: varsayılan değer
size: Px cinsinden alanın uzunluğu <form>
<input type="text" maxlength="10" size="12" value="İsminiz?"
</form> < form>


<input type="text">
Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır.
password Tüm parametrleri text ile aynıdır. <form>
Lütfen şifre girin:<br>
<input type="password" maxlength="10" size="12">
</form> Lütfen şifre girin:



<input type="password">
Şifre almak için kullanılır, yazılan karakterler ekranda '*' şeklinde görüntülenir
textaraea rows : Alanın karakter cinsinden yüksekliği
cols : Alanın genişliği <form>
<textarea cols="12" rows="4">Burası bir textarea!</textarea>
</form>


<textarea >...</textarea>
Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır.
checkbox checked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur. <form>
<input type="checkbox" checked>seçenek 1
<input type="checkbox">seçenek 2
</form> seçenek1
seçenek2


<input type="checkbox>
Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir.
radio checked: sayfa açıldığında 'checked' ibaresi bulunan daire seçilmiş olur. <form>
<input type="radio" name=sec">seçenek1<br>
<input type="radio" name= "sec"checked>seçenek2<br>
<input type="radio" name="sec">seçenek2
</form> seçenek1
seçenek2
seçenek2


<input type="radio">
Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir.
select size: Select etiketinin karakter cinsinden boyutu
selected: Görevi checked ifadesinin aynıdır.
multiple: Ziyaretçinin birden çok seçim yapmasına olanak verir <form>
<select size= "1">
<option selected>seçenek1
<option>seçenek2
<option>seçenek3
</select>


<select><option>...<option>...</select>
Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir.
submit value: Butonun üzerine yazılacak metin buraya yazılır <form>
<input type="submit" value="Gönder">
</form>


<input type="submit>
Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir
reset value: Butonun üzerindeki metin <form>
<input type="reset" value="Sil">
</form>


<input type="reset" >
Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler.
button value: Butonun üzerindeki metin <form>
<input type="button" value="Düğme">
</form>

<input type="button>
Düğmelere Java****************** ile bazı işlevler kazandırılabilir.

Tabloda belirtmedik ama form elemanlarında daha önceden bildiğimiz name parametresi de kullanılabilir.

Sonraki konu: Formlar 2


12/2. <FORM> ETİKETİ
İşte <form> etiketinin parametreleri ve bunların işlevleri:

method 'Get' veya 'post' değerlerini alabilir. Method parametresinin değeri formu göndereceğiniz CGI programı açısından önemlidir. Eğer CGI kodları yazmayı bilmiyorsanız, birçok servis sağlayıcı size form'larınızın sonuçlarını e-mail'inize gönderme imkanı verir. Eğer böyle bir hizmetten yararlanacaksanız 'post' metodunu seçmelisiniz.
<form method= "post>
action Formu göndereceğiniz CGI programının adresini action parametresiyle bildirirsiniz. Eğer yukarıda bahsedilen hizmetten yararlanmak istiyorsanız, servis sağlayıcınızdan bu programın adresini öğrenmelisiniz. Örneğin bu adres 'freeservers' için '/cgi-bin/cgiemail' 'dir.
<form method="post" action= "/cgi-bin/cgiemail">



12/3. FORM UYGULAMASI
Aşağıdaki örnekte bütün form unsurlarının kullanımını göreceksiniz. Bu örneği önce parça parça kendiniz yapmaya çalışın, gerektiğinde aşağıda verilen kodlardan yararlanın...
Bu siteye not verin!
Kullanıcı ismi
Parola
Cinsiyet E K
Bildiğiniz Uygulamalar


Sitenin içeriği
5, Çok zengin!
4, Fazlasıyla yeterli
3, Yeterli
2, Yetersiz
1, Çok kısıtlı
Sitenin tasarımı

< form>


<form name="anket">
<p><h3>Bu siteye not verin!</h3></p>
<p><b>Kullanıcı ismi</b> <input value="Buraya yazın!"></p>
<p><b>Parola</b> <input type="password" maxlength="10"></p>
<p><b>Cinsiyet</b> E<input type="Checkbox">K<input type="Checkbox">
<p>Bildiğiniz Uygulamalar</p>
<p><select size="4" multiple>
<option>HTML
<option>Java******************
<option>Css
<option>Asp
</select></p><br><br>
<p><b>Sitenin içeriği</b></p>
<p><input type="radio" name="not" value="5">5, Çok zengin!<br>
<input type="radio" name="not" value="4">4, Fazlasıyla yeterli<br>
<input type="radio" name="not" value="3" checked>3, Yeterli<br>
<input type="radio" name="not" value="2">2, Yetersiz<br>
<input type="radio" name="not" value="1">1, Çok kısıtlı <br></p>
<p><b>Sitenin tasarımı</b></p>
<p><select>
<option selected>Harika!
<option>Oldukça iyi
<option>İyi
<option>İdare eder
<option>Berbat</option>
</select></p>
<p><input type="submit" value="gönder"><input type="reset" value="sil"
</form>
HTML bölümünün burada sonuna geldik. Fakat tek başına HTML, çoğu zaman istediğimiz gibi sayfalar yapabilmek için yeterli olmaz. Artık internet'te yeralan sayfaların hemen hepsinde Java****************** kullanılmaktadır.