10 İnternet Programcılığı Dökümanı

Transkript

BÖLÜM 12
İNTERNET PROGRAMCILIĞI – I
Özcan
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 bakalı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>
İ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.
<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
33
textarae
a
rows : Alanın
karakter cinsinden
yüksekliği
cols : Alanın
genişliği
Özcan
<form>
<textarea cols="12"
rows="4">Burası bir
textarea!</textarea>
</form>
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.
<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çil
miş 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>
<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>
34
seçenek1
seçenek2
seçenek2
Özcan
<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
<form>
<input type="submit"
value="Gönder">
</form>
value: Butonun üzerine
yazılacak metin buraya yazılır
Gönder
<input type="submit>
Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir
reset
<form>
<input type="reset"
value="Sil">
</form>
value: Butonun üzerindeki
metin
<input type="reset" >
Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler.
button
<form>
<input type="button"
value="Düğme">
</form>
value: Butonun üzerindeki
metin
<input type="button>
Düğmelere JavaScript ile bazı işlevler kazandırılabilir.
35
Sil
Özcan
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ğ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ı e-mail'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/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ö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!
Buraya yaz
Kullanıcı ismi
Parola
Cinsiyet E
K
Bildiğiniz Uygulamalar
36
Özcan
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>İyi
<option>İdare eder
<option>Berbat</option>
</select></p>
<p><input type="submit" value="gönder"><input type="reset" value="sil"
</form>
37
Özcan
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.
12.4 Ö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.
<html>
<head>
<title>İlk Web Formum</title>
</head>
<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="email"
<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>
38
Özcan
<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 size="70"><b>Kullanıcı Adınız</b></td><td><input type="text" name="uid"
<tr><td size="70"><b>Şifreniz</b></td><td><input type="password" name="pass1"
<tr><td size="70"><b>Şifreniz</b></td><td><input type="password" name="pass2"
<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ç ">
</form>
</td></tr></table>
</body>
39
Özcan
</html>
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 --- >
<html>
<head>
<title>Sayfa 1</title>
</head>
<body bgcolor=#ffffff text=#000000>
<br><center>
<h1>Bu birinci sayfa</h1>
</center>
</body>
</html>
<html>
<head>
</head>
<br><center>
<h1>Bu ikinci sayfa</h1>
</center>
</body>
</html>
<html>
<head>
</head>
<br><center>
<h1>Bu üçüncü sayfa</h1>
</center>
40
Özcan
</body>
</html>
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 --- >
<html>
<head>
<title>Sag sütun</title>
<base target=ana>
</head>
<body bgcolor=#eaeaea text=#000000>
<br><br>
<a href=1.html>Bu link 1. Sayfaya çıkar</a><br><br>
</body>
</html>
<! --- Bu dosyayı ana.html diye kaydedin --- >
<html>
<head>
<title>Ana Sayfa</title>
</head>
<br><br>
<center>
<h1>Burası sayfamızın giriş bölümü.</h1>
</center>
</body>
</html>
<! --- Bu dosyayı index.html diye kaydedin --- >
<html>
<head>
<title>Sag sütun</title>
</head>
<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
Özcan
</body>
</noframes>
</frameset>
</html>
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
<head> 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 --- >
<html>
<head>
<title>Sağ sütun</title>
</head>
<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>
</body>
</noframes>
</frameset>
</html>
Diğer dosyadan tek farkı <frameset> tagı ile cols yerine rows kodunun kullanılmış
olmasıdır.
42
Özcan
KAYNAK:
1- İnternet
43

10 İnternet Programcılığı Dökümanı

Transkript

Benzer belgeler

NO: AD SOYAD:

Dr. Erhan Eser - Üroonkoloji Derneği

İnternet Programcılığı