Formlar

Formlar
12. FORMLAR

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>
<>

<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>
Burası bir textarea!

<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 JavaScript ile bazı işlevler kazandırılabilir.




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




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 EK

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 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>JavaScript
<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 JavaScript kullanılmaktadır. Aşağıdaki link size daha dinamik sayfalar yapma olanağı sunan JavaScript bölümüne götürecektir.