KATEGORİLER

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>

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.

Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

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

ETİKETLER

formlar