İNTERNET PROGRAMCILIĞI I

Transkript

1 BÖLÜM 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... etiketleri arasına yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir bakalım 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 <input type="text" maxlength="10" size="12" value="isminiz?" İsminiz? <> <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. Lütfen şifre girin:<br> <input type="password" maxlength="10" size="12"> Lütfen şifre girin: <input type="password"> Şifre almak için kullanılır, yazılan karakterler ekranda '*' şeklinde görüntülenir 33

2 textarae a rows : Alanın karakter cinsinden yüksekliği cols : Alanın genişliği <textarea cols="12" rows="4">burası bir textarea!</textarea> Burasi bir tex <textarea >...</textarea> Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır. checkbo x checked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur. <input type="checkbox" checked>seçenek 1 <input type="checkbox">seçenek 2 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çil miş olur. <input type="radio" name=sec">seçenek1<br> <input type="radio" name= "sec"checked>seçenek2< br> <input type="radio" name="sec">seçenek2 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 <select size= "1"> <option selected>seçenek1 <option>seçenek2 <option>seçenek3 </select> 34

3 <select><option>...<option>...</select> Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir. <select name= os_type size= 1 > <option value= win >Windows 9x</option> <option value= winnt >Windows NT</option> <option value= linux >Linux</option> <option value= unix >UNIX</option> <option value= os2 >OS/2</option> <option value= macos >MacOS</option> </select> submit value: Butonun üzerine yazılacak metin buraya yazılır <input type="submit" value="gönder"> Gönder <input type="submit> Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir reset value: Butonun üzerindeki metin <input type="reset" value="sil"> Sil <input type="reset" > Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler. button value: Butonun üzerindeki metin <input type="button" value="düğme"> <input type="button> Düğmelere JavaScript ile bazı işlevler kazandırılabilir. 35

4 Tabloda belirtmedik ama form elemanlarında daha önceden bildiğimiz name parametresi de kullanılabilir <FORM> ETİKETİ İşte etiketinin parametreleri ve bunların işlevleri: method 'Get' veya 'post' değerlerini alabilir. Method parametresinin değeri formu göndereceğimiz CGI programı açısından önemlidir. Eğer CGI kodları yazmayı bilmiyorsak, birçok servis sağlayıcı size form'larımızın sonuçlarını 'inize gönderme imkanı verir. Eğer böyle bir hizmetten yararlanacaksak 'post' metodunu seçmeliyiz. <form method= "post> action Formu göndereceğimiz CGI programının adresini action parametresiyle bildiririz. Eğer yukarıda bahsedilen hizmetten yararlanmak istiyorsak, servis sağlayıcınızdan bu programın adresini öğrenmelisiyiz. Örneğin bu adres 'freeservers' için '/cgi-bin/cgi ' 'dir. <form method="post" action= "/cgi-bin/cgi "> 12.3 FORM UYGULAMASI Aşağıdaki örnekte bütün form unsurlarının kullanımını göreceğiz. Bu örneği önce parça parça yapmaya çalışalım, gerektiğinde aşağıda verilen kodlardan yararlanabiliriz... Bu siteye not verin! Kullanıcı ismi Parola Cinsiyet E K Buraya yaz Bildiğiniz Uygulamalar 36

5 Sitenin içeriği 5, Çok zengin! 4, Fazlasıyla yeterli 3, Yeterli 2, Yetersiz 1, Çok kısıtlı Sitenin tasarımı gönder sil <> <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>iyi <option>idare eder <option>berbat</option> </select></p> <p><input type="submit" value="gönder"><input type="reset" value="sil" 37

6 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 yer alan sayfaların hemen hepsinde JavaScript kullanılmaktadır ÖRNEK UYGULAMALAR Bu form herhangi bir PHP yada benzeri bir dosyaya bilgi göndermediği için Kayıt tuşuna basılınca hata ile karşılaşılacaktır. Bu formu hazırlamaktaki amacım, sadece form oluşturma konusunda bir örnek vermektir. HTML kodlarını nerede ve nasıl kullanıldığına dikkat edin. <title>ilk Web Formum</title> <body bgcolor="#ffffff" text="#000000"> <center> <br><br> <fieldset> <legend>üyelik Formu</legend> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="400"> <tr><td colspan="2"><br></td></tr> <tr><td size="70"> <form action="kayit.php" action="post"> <b>adınız</b></td><td><input type="text" name="ad" size="24"></td></tr> <tr><td size="70"><b>soyadınız</b></td><td><input type="text" name="soyad" size="24"></td></tr> <tr><td size="70"><b>e-posta Adresiniz</b></td><td><input type="text" name=" " size="24"></td></tr> <tr><td size="70"><b>doğum Tarihiniz</b></td> <td><select name="d_gun" size="1"> <option value="1">1</option><option value="2">2</option><option value="3">3</option> <option value="4">4</option><option value="5">5</option><option value="6">6</option> <option value="7">7</option><option value="8">8</option><option value="9">9</option> <option value="10">10</option><option value="11">11</option><option value="12">12</option> <option value="13">13</option><option value="14">14</option><option value="15">15</option> <option value="16">16</option><option value="17">17</option><option 38

7 value="18">18</option> <option value="19">19</option><option value="20">20</option><option value="21">21</option> <option value="22">22</option><option value="23">23</option><option value="24">24</option> <option value="25">25</option><option value="26">26</option><option value="27">27</option> <option value="28">28</option><option value="29">29</option><option value="30">30</option> <option value="31">31</option></select> <select name="d_ay" size="1"> <option value="ocak">ocak</option><option value="subat">şubat</option> <option value="mart">mart</option><option value="nisan">nisan</option> <option value="mayıs">mayıs</option><option value="haziran">haziran</option> <option value="temmuz">temmuz</option><option value="agustos">agustos</option> <option value="eylul">eylül</option><option value="ekim">ekim</option> <option value="kasım">kasım</option><option value="aralık">aralık</option></select> <input type="text" name="d_yil" size="1"></td> <tr><td colspan="2"><br></td></tr> <tr><td size="70"><b>kullanıcı Adınız</b></td><td><input type="text" name="uid" size="24"></td></tr> <tr><td size="70"><b>şifreniz</b></td><td><input type="password" name="pass1" size="24"></td></tr> <tr><td size="70"><b>şifreniz</b></td><td><input type="password" name="pass2" size="24"></td></tr> <tr><td colspan="2"><br></td></tr> <tr><td colspan="2"><li>daha önce PHP kullandınız mı?</td></tr> <tr><td colspan="2"><input type="radio" name="php" value="e">evet &nbsp &nbsp <input type="radio" name="php" value="h"> Hayır</td></tr> <tr><td colspan="2"><li>daha önce MySQL kullandınız mı?</td></tr> <tr><td colspan="2"><input type="radio" name="sql" value="e">evet &nbsp &nbsp <input type="radio" name="sql" value="h"> Hayır</td></tr> <tr><td colspan="2"> <center><br> <input type=submit value=" Kayıt "> &nbsp &nbsp &nbsp <input type="reset" value=" Vazgeç "> </td></tr></table> 39

8 Sürekli aynı kodun kullanıldığı durumlarda (option tagında olduğu gibi) kopyala yapıştır işlemi işinizi bayağı kolaylaştıracaktır. Örnek Frame Sayfası Frame kullanarak bir sayfa oluşturmak için elimizde en az üç tane HTML dosyası olmalıdır. Bu örnekte altı tane HTML dosyası kullanılmıştır. Kullanılacak sayfaların içerikleri boş olacak, sadece sayfa görüntülendiğinde sayfa için tanımlayıcı bir bilgi içerecek. <! --- Bu dosyayı 1.html diye kaydedin --- > <title>sayfa 1</title> <body bgcolor=#ffffff text=#000000> <br><center> <h1>bu birinci sayfa</h1> </center> <! --- Bu dosyayı 2.html diye kaydedin --- > <title>sayfa 2</title> <body bgcolor=#ffffff text=#000000> <br><center> <h1>bu ikinci sayfa</h1> </center> <! --- Bu dosyayı 3.html diye kaydedin --- > <title>sayfa 3</title> <body bgcolor=#ffffff text=#000000> <br><center> <h1>bu üçüncü sayfa</h1> </center> 40

9 Yukarıdaki üç HTML dosyası bizim sitemizin içeriğini oluşturacak sayfalar olacak. Şimdi sıra index.html ve framelerin asıl bileşenlerini oluşturacak sayfaları yapmada. <! --- Bu dosyayı menu.html diye kaydedin --- > <title>sag sütun</title> <base target=ana> <body bgcolor=#eaeaea text=#000000> <br><br> <a href=1.html>bu link 1. Sayfaya çıkar</a><br><br> <a href=2.html>bu link 2. Sayfaya çıkar</a><br><br> <a href=3.html>bu link 3. Sayfaya çıkar</a><br><br> <! --- Bu dosyayı ana.html diye kaydedin --- > <title>ana Sayfa</title> <body bgcolor=#ffffff text=#000000> <br><br> <center> <h1>burası sayfamızın giriş bölümü.</h1> </center> <! --- Bu dosyayı index.html diye kaydedin --- > <title>sag sütun</title> <frameset framespacing=0 border=false frameborder=0 cols= 170,* > <frame name=menu target=ana src=menu.html scrolling=auto> <frame name=ana src=ana.html> <noframes> <body> <center><br><h1>sanırım browserınız çaga ayak uyduramamış :P</h1></center> 41

10 </noframes> </frameset> Yukarıda yazılan dosyaları belirtilen isimleri ile aynı dizinin içine oluşturun. Sonucu kendiniz izleyin. Dikkat etmeniz gereken noktalardan biri, menu.html dosyasında tagı içerisindeki <base target=ana> tag satırı. Bu satır yazıldığı sayfada tıklanan linklerin açılacağı sayfanın ana olarak adlandırılan kesimde (ana.html nin olduğu kesim) yer almasıdır. <noframes> tagı bize, kullanılan browserın frame desteği olmadığı zaman görüntülenecek sayfayı belirtmemizi sağlar. <frame> tagı sayfada kullanılacak frameleri belirlemede kullanılır. Son olarak cols= 200,* gibi bir ifade dikkatinizi çekmiştir. Bu kod bize <frame> tagı ile tanımlı sayfalardan ilkinin index.html sayfasında yatayda (cols) 200 piksellik bir alan kaplayacağını ve geri kalan kısmının da (*) tümünün belirtilen diğer sayfaya ait olduğunu belirtir. Eğer sayfalarımızı yan yana değil de alt alta yerleştirmek isteseydik rows= değer,değer gibi bir ifade kullanmamız gerekecekti. Aşağıdaki dosyayı diğer index.html dosyası yerine kaydederseniz farkı görebilirsiniz. <! --- Bu dosyayı index.html diye kaydedin --- > <title>sağ sütun</title> <frameset framespacing=0 border=false frameborder=0 rows= 170,* > <frame name=menu target=ana src=menu.html scrolling=auto> <frame name=ana src=ana.html> <noframes> <body> <center><br><h1>sanırım browserınız çağa ayak uyduramamış :P</h1></center> </noframes> </frameset> Diğer dosyadan tek farkı <frameset> tagı ile cols yerine rows kodunun kullanılmış olmasıdır. 42

11 KAYNAK: 1- İnternet 43