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.