Transcript FORMLAR
FORMLAR FORMLAR • Formlar : <form……………….</form> etiketleri arasında yer alırlar. Dinamik web sitelerinde kullanılırlar. Formların Kullanım Yerleri • • • • • • • Anketler İletişim bilgilerin Yorum bölümleri Üyelik bölümleri Forumlar Sosyal paylaşım siteleri Alışveriş siteleri Form Elemanları • Butonlar • Onay Kutusu (Checkbox) • Radyo Düğmesi (Radio) • Metin Kutusu (Textbox) • Gizli Elemanlar (Hidden) Form Elemanları • Şifre Kutusu (Password) • Metin Alanı (Textarea) • Açılır Liste (Select) • Dosya Alanı (File) • Resim Alanı (Image Form Özellikleri • Formların 3 temel özelliği vardır : • Action : Formdaki bilgilerin gönderileceği adres. • Method: Bilginin gönderilme yöntemi. Post veya Get. • Name: Formun ismi. • <form action=‘’url.adresi’’ method ‘’get/post’’ name=‘’formismi’’</form> <input> Kullanımı • Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girilecek Kod Görevi type = "eleman türü" Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. name = "isim" Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir. value = "değer" "radio" ve "checkbox" dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek "değer", eleman türüne göre değişir. size = "değer" "text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır. maxlength = "değer" "text" ve "password" elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Ön tanımlı değeri sınırsızdır. Girilecek Kod Görevi checked = "değer" Sadece "radio" ve "checkbox" elemanlarında seçili eleman "olarak belirtmek için kullanılır. Diğerlerinde yok sayılır. src = "dosya ismi" "image" elemanında resim dosyasını belirtmek için kullanılır. alt = "metin" Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır. align = "left|center|right" Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır. readonly Veri girme amacıyla kullanılmayacak elemanlar içindir disabled Veri girişi engellenecek elemanlar içindir. Metin Kutusu ( Textbox) Web sayfamıza bir metin kutusu koymak için yazılacak kod şöyledir: <body> <input type="text" name="metin" value="formun içine yazılacak metin" > </body> Parola Metin Kutusu ( Password) Parola metin kutusu oluşturmak için yazacağımız kod : <input type="password" name="sifre" > Onay Kutusu ( Checkbox) İşaretlemeli onay kutusu (checkbox) oluşturmak için yazacağımız kod : <body> <input type="checkbox" name="onaykutusu1" /> ev<br/> <input type="checkbox" name="onaykutusu2" />araba/> </body> Radyo Düğmesi( Radio) Seçenek düğmesi (radio button) oluşturmak için yazacağımız kod : <input type="radio" name=" cinsiyet " value="bay" /> <br/> <input type="radio" name=" cinsiyet" value="bayan” /> Not: checkbox çoklu seçimlerde, radio button ise tek seçim yapılacak durumlarda kullanılır. Radio buttonda seçeneklerden yalnızca biri seçileceği için name alanları aynı olmalıdır. Dosya Alanı( File) Dosya göndermede kullandığımız dosya seçme elemanı (file) oluşturmak için yazacağımız kod : <input type="file" name="dosya" /> Metin Alanı (Textarea) • Formumuza uzun metinler yazmak için kullanılmaktadır. Örneğin adres bilgisi ya da yorum girişi için kullanılabilecek bir form elemanıdır. • <textarea rows="5" cols="20" name="adres"> mesajınızı buraya yazınız </textarea> şeklinde kullanılır. • <textarea> ile kullanılan; • rows, satır sayısını belirtir • cols sütun sayısını belirtir. Seçim Listesi (Combobox) Seçim listesi(combobox) oluşturmak için yazacağımız kod : <select name="islem"> <option value="toplama"> topla </option> <option value="cıkarma"> çıkar </option> <option value="bolme"> böl </option> <option value="carpma"> çarp </option> </select> Gönder Butonu Form gönderme butonu (submit) oluşturmak için yazacağımız kod : <input type="submit" name="gonder" value="gönder”/> Temizle Butonu Form temizleme butonu (reset) oluşturmak için yazacağımız kod : <input type=“reset" name=«temizle" value=“ temizle”/> Örnek bir iletişim formu Örnek bir iletişim formu <body> <form action="mail.php" methot="post" name="mailform"> <p> İsim: <input type="text" name="isim" /> </p> <p> e-mail: <input type="text" name="mail" /> </p> <p> Mesaj: <textarea name="mesaj"></textarea> </p> <p> <input type="submit" value="Gönder" /> </p> </form> </body> • Formda gönderilen bilgiler form içerisindeki elemanların name alanında yer alan isim ile gönderilirler. • <input type="text" name="isim" /> • name="mail" • name="mesaj" • Not: Aynı formu dreamveawer ile oluştur. Örnek bir iletişim formu Örnek bir iletişim formu <form action="index.php" method="post name="iletisim" > İsim: <br/> <input type="text" name="isim" /><br/> Soyisim: <br/> <input type="text" name="soyisim" /><br/> E-mail: <br/> <input type="text" name="mail" /><br/> Cinsiyet: <br/> <input type="radio" name="cinsiyet" value="e" /> Erkek<br/> <input type="radio" name="cinsiyet" value="k" /> Kadın<br/> Mesaj: <br/> <textarea name="mesaj"></textarea><br/> <input type="submit" value="Formu gönder" /> </form> Örnek bir iletişim formu Örnek bir iletişim formu GET ve POST Metodu Formlara girilen bilgiler gönder denildiğinde <form>...</form> etiketinin action özelliğinde belirtilen sayfaya, yine aynı etiketin method özelliğinde belirtilen yöntemle gönderililir. Örneğin; <form name=«iletisim" method="post" action=«iletisim.php"> şeklinde tanımlanan bir form yapısına göre formlara girilen bilgiler iletisim.php sayfasına post metoduyla gönderilecektir. Burada GET ve POST olmak üzere iki tür method kullanılır. GET Metodu • GET metodunda formlara girilen bilgiler adres çubuğunda gönderilirken görünürler. Formlara girilen bilgiler, sayfa adresinin sonuna şu şekilde eklenir. • http://www.site.com/sayfa.php?form1=değer1&form2=değer2&... • Burada form1, form2,... ile gösterilen ifadeler sayfada formlara verilen isimler yani name değerleridir. değer1, değer2,... ise kullanıcının bu formlara girdiği değerleri ifade etmektedir. Dikkat ederseniz tüm bunlar sayfa adresinden ? ile ayrılmakta, her form ve değerinin arasında & işareti bulunmaktadır. • Bu yöntemde; • Gönderilen bilgiler adres çubuğunda göründüğü için güvenlik düşüktür. Özellikle şifre girişlerinde kullanılmamalıdır. • Adres çubuğundan gönderilebilecek veri miktarı sınırlı olduğunda fazla miktardaki veriler gönderilemez. Get Örnek Uygulama (Gönderme) <html> <body> <form name="kayit" method="get" action="kayit.php"> Adı: <input type="text" name="adi"><br> Soyadı: <input type="text" name="soyadi"><br> Doğum Yılı: <input type="text" name="dogum"><br> <input type="submit" name="kaydet" value="Kaydet"> </form> </body> </html> Get Örnek Uygulama (Alma) <body> <?php echo "Adı: ".$_GET["adi"]."<br/>"; echo "Soyadı: ".$_GET["soyadi"]."<br/>"; echo "Doğum Yılı: ".$_GET["dogum"]."<br/>"; ?> </body> POST Metodu • Bu metodda formlara girilen bilgiler gönderilirken görünmemektedir. • Bundan dolayı daha güvenilir. • Büyük miktardaki veriler de bu yöntemle gönderilmektedir. Post Örnek Uygulama (Gönderme) <body> <form action="adres.php" method="post" name="adres_formu" > İsminiz: <input type="text" name="isim" /><br/> Yaşadığınız Şehir: <select name="sehir"> <option value="canakkale">Çanakkale</option> <option value="istanbul">İstanbul</option> <option value="ankara">Ankara</option> </select><br/> Adresiniz:<br/> <textarea name="adres" rows="5"cols="20"></textarea><br/> <input type="submit" value="Gönder"/> <input type="reset" value="Temizle"/> </form> </body> Post Örnek Uygulama (Alma) <body> <?php echo "İsminiz: ".$_POST["isim"]."<br/>"; echo "Yaşadığınız Şehir: ".$_POST["sehir"]."<br/>"; echo "Adresiniz: ".$_POST["adres"]."<br/>"; ?> </body> Örnek: Dört İşlem <body> <form name="form1" method="post" action="hesapla.php"> Birinci Sayı: <input type="text" name="sayi1"><br> İkinci Sayı: <input type="text" name="sayi2"><br> İşleminizi seçiniz: <select name="islem"> <option value="+">Topla</option> <option value="-">Çıkar</option> <option value="*">Çarp</option> <option value="/">Böl</option> </select> <input type="submit" name="hesapla" value="Hesapla"> </form> </body> Hesapla.php <body> <?php $s1=$_POST["sayi1"]; $s2=$_POST["sayi2"]; $islem=$_POST["islem"]; if($islem=="+") $sonuc=$s1+$s2; elseif($islem=="-") $sonuc=$s1-$s2; elseif($islem=="*") $sonuc=$s1*$s2; else $sonuc=$s1/$s2; echo "İşlemin Sonucu:<br>$s1$islem$s2=$sonuc"; ?> </body> Örnek:Resim Gönderme resim_gonder.php (gönderme) <form action="resim.php" method="post" name="formresim" enctype="multipart/form-data"> Resim Başlığı: <input type="text" name="baslik" /><br/> Yorumunuz: <textarea name="yorum" rows="5" cols="45"></textarea><br/> Resim Dosyası: <input type="file" name="dosya" /> <br/> <input type="reset" name="temizle" valeu="Temizle"/> <input type="submit" name="gonder" valeu="Gönder"/> </form> • enctype="multipart/form-data" = form özelliği. İletiye çeşitli türdeki içeriği eklemek için kullanılan bir internet standartı. Resim.php ( Alma) <?php echo "Resim Başlığı:".$_POST["baslik"]."<br/>"; echo "Yorumunuz:".$_POST["yorum"]."<br/>"; echo "Resim Dosyası:"."<br/>"; @copy ($_FILES["dosya"]["tmp_name"],$_FILES["dosya"]["name"]); ?> <img src="<?php echo $_FILES["dosya"]["name"];?>" /> • @Copy (string $kaynak, string $hedef) : Formdan gelen dosyanın sunucuya kopyalanması için kullanılır. • @copy ($_FILES["dosya"]["tmp_name"],$_FILES["dosya"]["name"]); • Paremetreleri : • • • • • Name : Dosyanın ismi Type: dosyanın türü Tmp_name: kaynak dosyanın kopyasının yolu Error: aktarım esnasındaki hata kodu Size:dosyanın boyutu • <img src="<?php echo $_FILES["dosya"]["name"];?>" /> Resmin ekranda gösterilmesi.