HTML Form Elemanları

HTML Dersleri
HTML Form Elemanları

HTML Formlarını en kısa şekilde açıklamak gerekirse; kullanıcının klavye ile girdiği bilgileri işlemek için kullanılır. 

Kullanıcı form içeriğine bilgilerini girip gönder butonuna tıkladığında bilgiler sunucu taraflı çalışan bir sayfaya gönderilir ve bu sayfada işlenir. Sunucu taraflı çalışan sayfa form elemanları vasıtasıyla aldığı bilgilerle çeşitli işlemler yapabilir ve kullanıcıya mesaj dönebilir.

Form elemanları ile çalışabilmemiz için öncelikle <form> etiketini tanıyalım.

<form>: Form kontrollerini oluşturan etiketleri içine alarak kullanıcının veri girişi yapmasını sağlayan yapıyı sunmaktadır. Bu yapı içinde klavye veya fare ile kontrol edilebilen metin giriş kutuları, listeler, seçim kutuları, düğmeler ve diğer kontroller eklenebilir. <form> etiketi içinde sunucuya veri gönderecek bütün etiketlerin/elementlerin name özellikleri tanımlanmalıdır. 

Form elemanları <form>..</form> etiketleri arasına yazılır.

HTML Form Kullanımı
<form>
  <input>
</form>

HTML Formları - <input> (giriş) Elementi: En çok kullanılan form etiketidir. <input> elementi kullanıcı bilgilerini seçmek için kullanılır. Kapatılmaz. <input> elementi içerisinde kullanılan type ifadesiyle girdi türü belirlenir. 

<input> Kullanım Örneği ve Metin Alanları (textbox)
<form>
Adınız:
<input type="text" name="isim">
Soyadınız:
<input type="text" name="soyad">
</form>

Örnek Gösterimi
Adınız: Soyadınız:

Örnekte kullandığımız <INPUT type=text> etiketi, tek satırlık metin giriş kontrolü (textbox) oluşturulmasını sağlar.  Metin alanları (textbox) bir kullanıcının metin içine girebileceği bir tek satırlık giriş alanı tanımlar. Bir çok tarayıcı metin alanları için varsayılan olarak 20 karakterlik alan bırakmaktadır. "size="  parametresi ile gösterilecek karakter miktarına göre genişliğini belirtebilirsiniz.

Seçenek Butonları (Radio Buttons)
Kullanıcının bir çok seçenek içinden sadece bir tanesini seçebilmesini istediğiniz zaman Seçenek Butonları (Radio Buttons) kullanılır.

<input> Kullanım Örneği ve Seçenek Butonları (Radio Buttons)
<form>
<input type="radio" name="Renk" value="siyah"> Siyah
<input type="radio" name="Renk" value="beyaz"> Beyaz
</form>
Örnek Gösterimi
Siyah Beyaz
  
Kontrol Kutucukları (Checkboxes)
<input type = "checkbox"> Sunulan seçeneklerden istenildiği kadar seçilmesini sağlar.

<input> Kullanım Örneği ve Kontrol Kutucukları (Checkboxes)
<form>
Bir bisikletim var:
<input type="checkbox" name="Tasit" value="Bisiklet">
<br>
Bir arabam var:
<input type="checkbox" name="Tasit" value="Araba">
<br>
Bir kamyonum var:
<input type="checkbox" name="Tasit" value="Kamyon">
</form>
Örnek Gösterimi
Bir bisikletim var:
Bir arabam var:
Bir kamyonum var:  

Şifreli Metin Alanı (password textbox)
<input type=password> etiketi, girilen karakterlerin maskelenerek gösterilmediği tek satırlık bir metin giriş kontrolü (password textbox) oluşturulmasını sağlar. 

<input> Kullanım Örneği ve Şifreli Metin Alanı (password textbox) 
<form>
Şifrenizi Giriniz:
<input type="password" name="Sifre">
</form>
Örnek Gösterimi
Şifrenizi Giriniz:

Formlarda "Action" Parametresi ve Gönder (Submit) Butonu 
 <input type=submit> etiketi, kullanıcının formu göndermesini sağlayan bir düğme (button) kontrolü oluşturulmasını sağlar. Action parametresinde ise bilgilerin hangi dosyaya gönderileceği belirtilir. Bilgilerin gönderildiği dosya, genellikle gelen bilgilerle ilgili ne tür işlem yapılacağı hakkında bilgiler içerir.

<input> Kullanım Örneği ve Formlarda "Action" Parametresi ve Gönder (Submit) Buton
<form name="input" action="fomrornek/action_submit.php"
method="get">
Kullanıcı Adı:
<input type="text" name="kullanici">
<input type="submit" value="Gönder">
</form>

Kullanıcı, submit butonuna tıkladığında veriler, method özelliği ile belirtilen yöntemle bu adrese gönderilir. form.method özelliği, form verilerinin sunucuya gönderilme yöntemini belirtir. HTML form verileri "get" "post" olmak üzere iki şekilde sunucuya gönderilebilir. "get" yönteminde form verileri isim-değer çifti olarak action özelliği ile belirtilen adrese sorgu olarak eklenip sunucuya gönderilir. "post" yönteminde ise veriler, HTTP isteği (HTTP Request) içinde bir veri paketi olarak gönderilir. "post" yöntemi ile sunucuya gönderilebilecek veri miktarı hakkında teorik olarak bir limit yoktur.  

Form Etiketleri

Form Parametreleri
Örnek E-posta Gönderim Formu
<html>
<body>
<b>Örnek E-posta Gönderim Formu</b>
<form action="MAILTO:leucjo@gmail.com" method="post" enctype="text/plain">
Adınız:<br>
<input type="text" name="ad" value="İsminizi Giriniz"><br>
E-Posta:<br>
<input type="text" name="posta" value="E-Posta Adresiniz"><br>
Mesaj:<br>
<input type="text" name="mesaj" value="Mesajınız" size="50"><br><br>
<input type="submit" value="Gönder">
<input type="reset" value="Temizle">
</form>
</body>
</html>

Örnek Gösterimi