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.