Bu Blogda Ara

27 Mayıs 2010 Perşembe

Php de Html Formlarının Kullanımı

Formlar

Web sayfalarında form elamanları

...
etiketleri arasına yazılır. Form elemanları olarak metin kutuları, onay kutuları, açılır listeler, metin alanları ve düğmeler sayılabilir. PHP ile formlardan gelen bilgilerin nasıl alındığını anlatmadan önce form elamanları anlatılacaktır.

Form Elemanları

  • Metin Kutusu (textbox)
  • Şifre Kutusu (password)
  • Onay Kutusu (checkbox)
  • Radyo Düğmesi (radio)
  • Metin Alanı (textarea)
  • Açılır Liste (select)
  • Dosya Seçim Elemanı (file)
  • Gizli Elemanlar (hidden)
  • Sıfırlama Düğmesi (reset)
  • Gönder Düğmesi (submit)
  • Gruplandırma Elemanı (fieldset)
  • Genel Amaçlı Düğme (button)

...

Form elamanlarını gruplandırmak için kullanılan, başka bir ifade ile barındıran html etiketidir. Web sayfasına yazılan tüm form elemanları

...
etiketleri arasına yazılır. Kullanımı aşağıdaki gibidir.


<html>
<body>
<form name="form_adi" method="get|post" action="hedef">
Buraya form elamanları gelecektir.(metin kutuları, açılır listeler, butonlar, ...)
form>
body>
html>

Özellikleri

name: form etiketine isim vermek için kullanılır. Sayfada birden fazla

...
etiketi olabilir. Bunları isimlendirmek için kullanılır.

method: Form elamanlarına girilen bilgilerin gönder denildiğinde nasıl gönderileceğini belirtmek için kullanılır. GET veya POST değerlerinden birini alabilir.

action: Form elamanlarına girilen bilgilerin hangi sayfaya gönderileceğini belirtmek için kullanılır. Gönderilen bilgiler action kısmında belirtilen sayfaya gönderilir ve orada işlenir.

enctype: Dosya yükleme yapılacağı zaman dosyayı gönderme biçimini tanımlamak için kullanılır. Genelde multipart/form-data değerini alır.

Örnek: kaydet.php sayfasına post metodu ile bilgi gönderen kayit isimli form yapısını hazırlayalım.


<html>
<body>
<form name="kayit" method="post" action="kaydet.php">
Buraya form elamanları gelecektir.
form>
body>
html>

Metin Kutusu (textbox)

Tek satırlık metin girişi için kullanılır. Kullanımı şu şekildedir.


<input type="text" name="form_adi">

Özellikleri

name: Metin kutusuna isim vermek için kullanılır. Gönder denildiğinde bu forma girilen bilgi bu isim ile gönderildiğinden mutlaka kullanılmalıdır.

value: Sayfa ilk yüklendiğinde varsayılan değerini tanımlamak için kullanılır.


<input type="text" name="adi" value="Buraya adınızı giriniz">

size: Metin kutusunun genişliğini belirtmek için kullanılır.


<input type="text" name="adi" size="20">

maxlength: Metin kutusuna girilebilecek en fazla karakter sayısını belirtmek için kullanılır.


<input type="text" name="adi" maxlength="10">

readonly : Metin kutusunun sadece okunabilir olduğunu, giriş amaçlı kullanılmayacağını belirtir.


<input type="text" name="adi" readonly>

disabled: Metin kutusunun kullanılamayacağını belirtir.


<input type="text" name="adi" disabled>

Şifre Kutusu (password)

Şifre girişlerinde kullanılır. Kullanımı şöyledir.


<input type="password" name="form_adi">

Özellikleri, yukarıda belirtilen metin kutusu ile aynıdır. (name, value, size, maxlength, readonly, disabled)

Onay Kutusu (checkbox)

Tıklandığında bir tik işaretiyle işaretlediğimiz form elamanlarıdır. Önceden belirlenmiş değerlerden istenilenleri seçmek için kullanılır. Kullanımı şöyledir.


<input type="checkbox" name="form_adi" value="değer">

Özellikleri

name: Forma verilen addır. Mutlaka kullanılmalıdır.

value: Onay kutusu seçili iken gönder denildiğinde gidecek olan değeri belirtmek için kullanılır.

checked: Onay kutusunun varsayılan olarak seçili olacağını belirtir.


<input type="checkbox" name="onay" checked>

Radyo Düğmesi (radio)

Önceden belirlenmiş seçeneklerden sadece birini seçmek kullanılır. Burada her radyo düğmesinin name değerinin aynı olmasına dikkat ediniz. name değerleri aynı olan radyo düğmelerden sadece biri seçilebilir. Farklı name değerlerine sahip radyo düğmeler farklı grupları oluşturur. Her gruptan sadece bir tanesi seçilebilir. Kullanımı şöyledir.


<input type="radio" name="form_adi" value="değer1">
<input type="radio" name="form_adi" value="değer2">
<input type="radio" name="form_adi" value="değer3">
...

Özellikleri, yukarıda anlatılan onay kutusu ile aynıdır.

Metin Alanı (textarea)

Çok satırlı uzun metin girişlerinde kullanılır. Kullanımı şöyledir.


Özellikleri

name: Forma verilen addır. Mutlaka kullanılmalıdır.

rows: Metin alanının kaç satır yüksekliğinde olacağını ayarlamak için kullanılır.

cols: Metin alanının kaç sütun (karakter) genişliğinde olacağını belirtmek için kullanılır.


<textarea name="formadi" rows="5" cols="30">
Varsayılan değer
textarea>

Açılır Liste (select)

Önceden belirlenmiş değerlerden birini seçmek için kullanılan açılır menülerdir. Her seçenek etiketleri ile belirtilir. Kullanımı şöyledir.


<select name="form_adi">
<option value="değer1">Seçenek 1option>
<option value="değer2">Seçenek 2option>
<option value="değer3">Seçenek 3option>
...
select>

Özellikleri

name: Forma verilen addır. Mutlaka kullanılmalıdır.

value: Gönder denildiğinde gidecek olan değeri tanımlamak için kullanılır. Her seçenek için yazılır.

size: Açılır liste tarzından düz liste tarzına geçip listenin satır yüksekliğini belirtmek için kullanılır.

selected: Belirtilen seçeneğin varsayılan olarak seçili olacağını belirtir.


<select name="onay" size="2">
<option value="evet">Evetoption>
<option value="hayir" selected>Hayıroption>
select>

Listedeki seçenekleri gruplandırmak için ... etiketleri kullanılır. Burada bu etiketleri iç içe yazmamaya dikkat ediniz. Şu şekilde kullanılır.


<select name="form_adi">
<optgroup label="Grup 1">
<option value="değer1">Seçenek 1option>
<option value="değer2">Seçenek 2option>
<option value="değer3">Seçenek 3option>
optgroup>
<optgroup label="Grup 2">
<option value="değer4">Seçenek 4option>
<option value="değer5">Seçenek 5option>
<option value="değer6">Seçenek 6option>
optgroup>
select>

Dosya Seçim Elemanı (file)

Dosya yüklemede, yüklenecek dosyayı seçmek için kullanılır. Kullanımı şöyledir.


<input type="file" name="form_adi">

Özellikleri

name: Formun adını belirtmek için kullanılır. Seçilen dosya bu ad ile sunucuya geçici olarak yüklenmektedir. Mutlaka kullanılmalıdır.

Bu form elemanı kullanıldığında

...
etiketi için enctype özelliğini kullanmayı unutmayınız.


<html>
<body>
<form name="dosya_yukle" method="post" action="yukle.php" enctype="multipart/form-data">
Dosya Seçiniz: <input type="file" name="dosya">
<input type="submit" name="gonder" value="Gönder">
form>
body>
html>

Gizli Elemanlar (hidden)

Sayfadan, görünmeyen gizli değerler göndermek için kullanılır. Örneğin; işlemi gerçekleştirmek için gerekli olan bir bilgiyi kullanıcıya göstermeden göndermek için kullanabilirsiniz. Kullanımı şöyledir.


<input type="hidden" name="form_adi" value="değer">

Özellikleri

name: Gizli formun adını belirtmek için kullanılır.

value: Gizli formun göndereceği değeri tanımlamak için kullanılır.

Sıfırlama Düğmesi (reset)

Formlara girilen değerleri sıfırlar. Form elemanlarının değerleri başlangıç değerlerine geri döner. Kullanımı şöyledir.


<input type="reset" name="form_adi" value="Temizle">

Özellikleri

name: Düğmenin adını belirtmek için kullanılır. Belirtilmek zorunda değildir.

value: Düğmenin üzerinde görünen değeri belirtmek için kullanılır.

Gönder Düğmesi (submit)

Formlara girilen bilgileri

...
etiketinin action kısmında belirtilen sayfaya göndermek için kullanılır. Şu şekilde kullanılır.


<input type="submit" name="form_adi" value="Gönder">

Özellikleri

name: Düğmenin adını belirtmek için kullanılır. Belirtilmek zorunda değildir.

value: Düğmenin üzerinde görünen değeri belirtmek için kullanılır.

Gruplandırma Elemanı (fieldset)

Form elamanlarını gruplandırmak için kullanılır. Bu sayede form elamanlarının ne amaçla kullanıldığı daha iyi anlaşılmaktadır. Grubun başlığını belirtmek için ... etiketi kullanılır. Kullanımını bir örnekle açıklayalım.


<html>
<body>
<form name="uyelik" method="post" action="uye_kayit.php">
<fieldset>
<legend>Kişisel Bilgilerlegend>
Adınız: <input type="text" name="adi"><br>
Soyadınız: <input type="text" name="soyadi"><br>
Cinsiyetiniz: Bay<input type="radio" name="cinsiyeti" value="bay" checked>
Bayan<input type="radio" name="cinsiyeti" value="bayan"><br>
fieldset>
<fieldset>
<legend>Üyelik Bilgilerilegend>
Kullanıcı Adı: <input type="text" name="kullanici_adi"><br>
Şifre: <input type="password" name="sifre"><br>
fieldset>
<input type="submit" name="gonder" value="Gönder">
<input type="reset" name="temizle" value="Temizle">
form>
body>
html>

Kişisel Bilgiler Adınız:
Soyadınız:
Cinsiyetiniz: Bay Bayan
Üyelik Bilgileri Kullanıcı Adı:
Şifre:

Genel Amaçlı Düğme (button)

Düğme oluşturmak için kullanılan, daha esnek ve kullanışlı olan bir yöntemdir. Açılış ve kapanış etiketleri() arasına açıklama, resim ve bunun gibi bir çok html elemanı ekleyerek düğme üzerinde gösterilebilir. Aşağıdaki gibi kullanılır.


<button name="form_adi" type="button|reset|submit" value="değer">
Açıklama, resim ve bunun gibi html elemanları buraya eklenebilir.
button>

Özellikleri

name: Düğmeye ad vermek için kullanılır.

type: Düğmenin ne amaçla kullanılacağını belirtmek için kullanılır. button, reset, ve submit değerlerinden birini alabilir.

value: Düğmenin sayfada kullanacağı değeri belirtmek için kullanılır.

Örnek: Üzerinde resim bulunan bir düğmenin kullanıldığı dosya yükleme formunu hazırlayalım.


<html>
<body>
<form name="dosya_yukle" method="post" action="yukle.php" enctype="multipart/form-data">
Dosyanın Kalıcı Adı: <input type="text" name="dosya_adi"><br>
Dosya Seçiniz: <input type="file" name="dosya">
<button name="yukle" type="submit">
<img src="http://www.phpdefteri.com/upload/png/yukle.png"><br>Yükle
button>
form>
body>
html>

Bir Sonraki derste Görüşmek üzere

Gönderen zaman:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)