FORMLAR

 

Formlar, kullanıcıdan bilgi almak yani etkileşim kurmak için kullanılan sayfa elemanlarıdır. Aşağıda örnek bir form gösterilmiştir.

 

form

Üye kaydının yapıldığı örnek bir form uygulamasıdır.

 

<form>

<form> etiketi html formları oluşturmak için kullanılır. Form oluşturmayı sağlayan tüm form elemanları <form>….</form> etiketleri arasında yer alır.

 

Genel Kullanımı:

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

 

 

Parametre Açıklama
name Form etiketine isim vermek için kullanılır. Sayfada birden fazla <form>...</form> 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.

 

 

 

Form Elemanları

1. Metin Kutusu (textbox)

2. Şifre Kutusu (password)

3. Onay Kutusu (checkbox)

4. Radyo Düğmesi (radio)

5. Metin Alanı (textarea)

6. Açılır Liste (select)

7. Dosya Seçim Elemanı (file)

8. Gizli Elemanlar (hidden)

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

10. Gönder Düğmesi (submit)

11. Gruplandırma Elemanı (fieldset)

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

 

1. Metin Kutusu (<input type="text">) :

 

Tek satırlık metin girişi için kullanılır. Kullanımı şu şekildedir. <input type="text" name="form_adi">

 

Parametre Açıklama
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.
size Metin kutusunun genişliğini belirtmek için kullanılır.
maxlength Metin kutusuna girilebilecek en fazla karakter sayısını belirtmek için kullanılır.
readonly Metin kutusunun sadece okunabilir olduğunu, giriş amaçlı kullanılmayacağını belirtir.
disabled Metin kutusunun kullanılamayacağını belirtir.

 

 

Örnek:

<form name="ornekformlar" method="post" action="kaydet.php"><br>
<input type="text" name="adi" value="Buraya adınızı giriniz"><br>
<input type="text" name="adi" size="20"><br>
<input type="text" name="adi" maxlength="10"><br>
<input type="text" name="adi" readonly><br>
<input type="text" name="adi" disabled><br>
</form>		 input text

 

 

2. Şifre Kutusu (<input type="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.

 

<form name="girisformu" method="post" action="giris.php">
Kullanıcı Adı: <input type="text" name="kullanici" maxlength="10">
Şifre: <input type="password " name="sifre" size="20">
</form>		 input pasword

 

 

 

 

3. Onay Kutusu (<input type="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.

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

 

Parametre Açıklama
name Onay kutusuna 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.

 

<form name="hobiler" method="post" action="kaydet.php">
<input type="checkbox" name="spor" value="spor" checked>SPOR
<input type="checkbox" name="sinema" value="sinema">SİNEMA
<input type="checkbox" name="gezi" value="gezi">GEZİ
<form>

 

 

 

4. Radyo Düğmesi (<input type="radio">)
Önceden belirlenmiş seçeneklerden sadece birini seçmek için 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.

<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">
...

 

 

<form name="onayformu" method="post" action="kaydet.php">
<input type="radio" name="onay" value="evet" checked>EVET
<input type="radio" name="onay" value="hayir">HAYIR
<form>		 radio buton

 

 

 

 

5. Metin Alanı (<textarea>…</textarea>)

 

Çok satırlı uzun metin girişlerinde kullanılır.

Kullanımı şöyledir.
<textarea name="formadi">varsayılan değer</textarea>

 

Parametre Açıklama
name Metin alanına 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.

 

 

<form name="yorumformu" method="post" action="kaydet.php">
<textarea name="formadi" rows="5" cols="30">
Varsayılan değer
</textarea>
</form>		 textarea

 

 

6. Açılır Liste (<select>…</select>)
Önceden belirlenmiş değerlerden birini seçmek için kullanılan açılır menülerdir. Her seçenek <option>...</option> etiketleri ile belirtilir.

Parametre Açıklama
name Açılır listeye 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.




Kullanımı şöyledir.
<form name="yorumformu" method="post" action="kaydet.php">
<select name="form_adi">
<option value="değer1">Seçenek 1</option>
<option value="değer2">Seçenek 2</option>
...
</select>
</form>

 

<form name="onayformu" method="post" action="kaydet.php">
<select name="onay">
<option value="evet">EVET</option>
<option value="hayir">HAYIR</option>
</select>
</form>		 onay

 

 

 

 

 

7. Dosya Seçim Elemanı (file) (<input type="file">)

 

 

Dosya yüklemede, yüklenecek dosyayı seçmek için kullanılır.

Parametre Açıklama
name Dosya yükleme elemanının 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.


Kullanımı şöyledir.
<input type="file" name="form_adi">
Bu form elemanı kullanıldığında <form>...</form> 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"> <br>
<input type="submit" name="gonder" value="Gönder">
</form>
</body>
</html>		 dosya upload

 

 

 

 

8. Gizli Elemanlar (<input type="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.


Parametreleri

name Gizli elemanın adını belirtmek için kullanılır.
value Gizli formun göndereceği değeri tanımlamak için kullanılır.


Kullanımı şöyledir.
<input type="hidden" name="form_adi" value="değer">

 

 

9. Sıfırlama Düğmesi (<input type="reset">)


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

 

Parametre Açıklama
name Düğmenin adını belirtmek için kullanılır.
value Düğmenin üzerinde görünen değeri belirtmek için kullanılır.

 


Kullanımı
<input type="reset" name="form_adi" value="temizle">

 

 

 

 

10. Gönder Düğmesi (<input type="submit">

 

Formlara girilen bilgileri <form>...</form> etiketinin action kısmında belirtilen sayfaya göndermek için kullanılır.


Parametre Açıklama
name Düğmenin adını belirtmek için kullanılır.
value Düğmenin üzerinde görünen değeri belirtmek için kullanılır.



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

 

 

 


 

 

 

 

 

 

Web hosting by Somee.com