Üye Kayıt Üye Giriş

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>

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

Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER