Ders_32 HTML Form Elemanı

HTML Form Elemanı

HTML form elemanı, kullancılardan bilgi almak için (adları, mail adresleri, tuttukları takım, bir konu hakkındaki görüşleri...) kullanılan önemli elemanlardır.

<form> elemanı bir form oluşturur:

<form>
form elemanları buraya yazılır
</form>

Bir html formu; checkbox, text, radio button, submit gibi farklı tipteki <input> elemanlarından oluşur.

<input> Elemanı

<input> elemanı, en önemli form elemanıdır ve yukarıda da belirtildiği gibi farklı tipleri vardır. type özelliğine atadığımız değerler ile, farklı türlerde input elemanı oluşturabiliriz. Aşağıda bunu nasıl yapacağımız gösterilmiştir:

<input type="text"> :Boş bir text kutusu oluşturur.

<input type="button"> :Bir buton oluşturur.

<input type="submit"> :Bir gönder tuşu oluşturur.

<input> elemanı için ayrı bir ders daha yapacağız. Şimdilik kısaca bahsediyoruz.

<input type="text"> Elemanı

<input type="text"> elemanı, kullanıcılarımızın veri girebileceği tek satırlık boş bir kutucuk oluşturur.

Kutucuğun uzunluğu, varsayılan olarak, 20 karakterliktir. Örneğe dikkat edelim:

<form>
Ad:<br>
<input type="text" name="ad">
<br>
Soyad:<br>
<input type="text" name="soyad">
</form>

Yukarıdaki form elemanının tarayıcıdaki çıktısı şöyle olacaktır:

Ad:

Soyad:

name="elemanin_adi" özelliği, input elemanına bir isim vermektedir. İleride, bu isim saysinde bu input elemanına kullanıcılarımızın girdiği bilgilere ulaşacağız. 

<input type="radio"> Elemanı - Radyo Butonu

<input type="radio"> elemanı, bir radyo butonu tanımlar.

Bu butonlar, kullanıcılara, birden fazla seçenek arasından birini seçmek için izin verir. Örneğe dikkat edelim:

<form>
<input type="radio" name="cinsiyet" value="erkek" checked>Male
<br>
<input type="radio" name="cinsiyet" value="kadın">Female
</form>

Yukarıdaki formun çıktısı şöyle olacaktır:

 erkek 
 kadın

value="botonun_değeri"  özelliğine atadığımız değer, botunun yanında gösterilecek ifadedir.

<input type="submit"> Elemanı - Gönder Tuşu

<input type="submit"> elamanı; formumuzu, gerekli yere göndermek için tıklanacak bir gönder tuşu oluşturur.

Formlar, genellikle, bir server sayfasına giderler. Bu sayfada, formların içerdikleri bilgilerin işlenmesi için bir script vardır.

Örneğe dikkat edelim:

<form action="bir_sayfa.php">
First name:<br>
<input type="text" name="ad" value="Lütfen adınızı girin">
<br>
Last name:<br>
<input type="text" name="soyad" value="Lütfen soyadınızı girin">
<br><br>
<input type="submit" value="Gönder">
</form>

Bu formun sayfamızdaki görünümü şöyle olacaktır:

Ad:




Soyad:

action="url" Özelliği

<form action="bir_sayfa.php">

action özelliği, bir formun <form> tagı içinde tanıtılır ve aldığı değer, formun gönder (submit) tuşuna basıldığında, form bilgilerinin hangi sayfaya gideceğini ifade eder. Gittiği sayfada da bu bilgilerin işlenmesi için yazılmış scriptler vardır ve bu sayfa, genellikle bir server üzerinde barınır.

method="gönderme_metodu" Özelliği

method="POST" veya method="GET" veya şeklinde tanımlanır. Gönder tuşuna basıldığında, formun hangi HTTP metoduyla (POST veya GET) gönderileceğini belirler.

<form action="action_page.php" method="GET"> şeklinde veya;

<form action="action_page.php" method="POST"> şeklinde kullanılır.

GET Metodu Ne Zaman Kullanılır?

GET metodu, form bilgilerinin herhangi bir gizliliği olmadığında, başkalarının bilmesinde bir sakınca olmadığında kullanılır.

Çünkü, bu metot, form bilgileri gönderilirken, bu bilgileri adres çubuğunda gösterir:

sayfa.php?ad=Muzaffer&soyad=KAYA

Formumuzda bir metot belirtmezsek varsayılan olarak GET metodu kullanılır.

POST Metodu Ne Zaman Kullanılır?

POST metodu, form bilgilerinin gizli kalması gerektiğinde kullanılır.

Çünkü, bu metot, form bilgileri gönderilirken, bu bilgileri adres çubuğunda göstermez

name="elemanin_adi" Özelliği

Form bilgilerini işleyebilmek için her bir form elemanına bir isim atamak zorunludur: name="soyad"  

name özelliği belirtilmemiş ise, kullanıcının o form elemanına girdiği bilgiye ulaşılamaz.

Form Bilgilerini <fieldset> Tagı ile Gruplamak

<fieldset> elemanı, formumuzun bir grup halinde görünmesini sağlar.

<legend> elemanı ise, <fieldset> ile oluşturduğumuz form grubuna bir başlık atamamızı sağlar. Örneğe dikkat edelim:

<form action="action_sayfasi.php">
<fieldset>
<legend>Kişisel bilgiler:</legend>
Ad:<br>
<input type="text" name="ad" value="Muzaffer">
<br>
Soyad:<br>
<input type="text" name="soyad" value="Kaya">
<br><br>
<input type="submit" value="Gönder"></fieldset>
</form>

Bu form elemanı, sayfamızda şöyle görünecektir:

Kişisel bilgiler:

Ad:

Soyad:

Form Elemanının Özellikleri

<form action="action_sayfasi.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elemanları
.
</form>

Yukarda, bir form elemanına atayabileceğimiz bütün özellikler görülmektedir. Bu özellikler ve anlamları aşağıda verilmiştirrr:

Özellik (Attribute)	Açıklaması
accept-charset	Formu doldururken kullanılacak karakter setini tanımlar. (varsayılan: sayfanın karakter setidir).
action	Formun hangi adrese gönderileceğini tanımlar.(varsayılan: formun olduğu sayfadır).
autocomplete	Otomatik metin tamamlama özelliğini tanımlar.(varsayılan: on).
enctype	Gönderilen form verilerinin dil kodlamasını tanımlar. (varsayılan: url-encoded).
method	Formun gönderileceği HTTP metodunu tanımlar. (varsayılan: GET).
name	formun kimliğini oluşturacak bir isim tanımlar ( DOM için kullanım: document.forms.name).
novalidate	Tarayıcının, formu doğrulamayacağını ifade eder.
target	aciton özelliğinde tanımlı url sayfasının nerede açılacağını tanımlar. (varsayılan: _self).

Sonraki derste form özellikleri ile ilgili daha çok bilgi edineceksiniz.

sonraki ders için tıklayınız