HTML Dersleri 11 - Formlar

Bu dersimiz ile formlar konusunu işleyeceğiz. Şunu bilmek gerekir formlar konusu temel yapıtaşıdır. Kullandığımız sosyal medya uygulamasına giriş ekranı dahi bir formdur.

Taha Furkan Bayar Taha Furkan Bayar
Ekim 13, 2022 - 11:49 Updated: Ekim 13, 2022 - 13:33
0 57
HTML Dersleri 11 - Formlar

HTML Formlar

HTML formları kullanıcıların girdiği verileri toplayan kısımdır. Formlar günlük hayatımızda muhakkak önümüze çıkmakta. Bu konuyu iyi anlamak için bolca tekrar ve pratik yapılmasını önermekteyim.

Formlar

Form, form elemanlarını içinde tutan kısımdır. Form elemanları kullanıcıların bilgilerini girdikleri form alanlarını doldurdukları alandır.

<form>
   <input>
   <input>
</form>

Giriş Kısmı (Input)

<input> etiketi en çok kullanacağımız form etiketidir.

Metin Kısımları

Kullanıcıların harf ve rakam girerek veri yollamasını sağlayacak metin alanlarıdır.

<form>
 Adınız: 
 <input type="text" name="isim">
<br>
 Soyadınız: 
 <input type="text" name="soyad">
</form>

Kod Çıktısı : 

Adınız: Soyadınız:

Seçenekli Butonlar (Radio Buttons)

Kullanıcılardan veri toplarken birden çok seçenek arasından tek bir seçenek seçmesini istiyorsak bu form elemanını kullanabiliriz. 

<form>
 <input type="radio" name="Cinsiyet" value="Erkek"> Erkek
<br>
 <input type="radio" name="Cinsiyet" value="Kadın"> Kadın
</form>

Kod Çıktısı :

Erkek
Kadın

Checkboxes

Kullanıcılardan birden fazla seçenek içerisinden birden fazla seçenek seçmesini istersek kullanılır.

<form>
Bir bisikletim var:
 <input type="checkbox" name="Tasit" value="Bisiklet">
<br>
Bir arabam var: 
 <input type="checkbox" name="Tasit" value="Araba">
<br>
Bir uçağım var: 
 <input type="checkbox" name="Tasit" value="Uçak">
</form>

Kod Çıktısı :

Bir bisikletim var:
Bir arabam var:
Bir uçağım var:

Formlarda Action ve Submit

Kullanıcılar submit (gönder) butonuna tıkladığı zaman girilen bilgiler bazen başka bir sayfaya yönlendirir bazen de veriye göre iletim yapar. Action ise bilgilerin hangi dosyaya yada hangi sayfaya yönlendireceğine veya veriyi nereye çekeceğini belirleyen parametredir. 

<form name="input" action="dosya/veriler.php"
method="get" target="_blank">
Kullanıcı Adı: 
<input type="text" name="kullanici">
<input type="submit" value="Gönder">
</form>

Kod Çıktısı :

Kullanıcı Adı:

Yukarıda bulunan kutuya bir veri girdiğimizi varsayalım. Action kısmına baktığımızda dosya içerisinde bulunan veriler.php dosyasına aksiyon alacağı ismiyle aşikar. target _blank ile yeni pencerede açılacağını öğrenmiştik. Submit butonu aşağı satırda gönder olarak belirlenmiş. Aslında dediğim gibi gün içinde onlarca kez form dolduruyoruz ve aşinayız.

Form Etiketleri

Tags Açıklama
<form> Form
<input> Giriş alanı
<textarea> Çoklu metin giriş kutucuğu
<label> Etiket
<fieldset> Alanların ayarlarını belirler
<legend> Manşet
<select> Açılabilir liste
<optgroup> Seçenek kutusu grubu
<option> Açılabilir liste maddelerini belirler
<button> Buton

Etiketler: