HTML Dersleri 16 – Formlar


Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Dosya Yolları (File Paths) adlı yazımızda  HTML’de Dosya yolu kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 15 – Dosya Yolları (File Paths) linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'in önemli bir konusu olan formlar konusunu öğreneceğiz.

Bir çok site gördüğünüz formlar, HTML'in ve site tasarlamanın en önemli konularından biridir. Sitelerde ki formlar yardımıyla kullanıcı ile etkileşim sağlanıyor, kullanıcıdan veriler alınıyor ve işleniyor. Bir siteye giriş yaparken, bir sipariş verirken neredeyse tüm etkileşimlerde formlar kullanılmaktadır.

Form Etiketi

HTML'de form oluşturmak için < form > etiketini kullanırız daha sonrasında içine form elemanları yazarız. Bu form elemanları metin kutuları,seçim kutuları, onay kutuları, radyo düğmeleri, gönderme düğmeleri vb. farklı türde öğeler bulunur.

Form etiketi kullanımı :

<form>
...Form Elemanları...
</form>

Input Etiketi

Input etiketi , form etiketinin en önemli elemanıdır. < input > etiketi, type parametresine bağlı olarak  farklı çeşitli şekillerde görüntülenir.

Örnek ;

Tür (Type) Açıklama
< input type="text" > Tek satırlık metin alanı oluşturur.
< input type="radio" > Bir radyo düğmesi tanımlar (birçok seçenekten birini seçmek için)
< input type="submit" > Gönder düğmesini tanımlar (formu göndermek için)

Metin Alanı (Input Fields)

HTML formlarda sıklıkla gördüğümüz tek satırlık metin alanlarını input etiketinin type parametresine text değerini vererek oluşturuyoruz.

Örnek Kullanım ;

<form>
  <label for="ad">Adınız:</label><br>
  <input type="text" id="ad" name="ad"><br>
  <label for="soyad">Soyadınız:</label><br>
  <input type="text" id="soyad" name="soyad">
</form>

Gördüğünüz üzere form etiketi tarayıcıda görünmez, form etiketinin amacı içine yazılan html kodlarının form elemanı olduğunu belirtmesidir. Input etiketinin varsayılan genişliği 20 karakterdir.

label Etiketi

Yukarıda ki örnekte label etiketi kullandık. Peki bu label etiketi ne işe yaramakta ? < label > etiketi, birçok form elemanı için bir etiket tanımlar.

< labe l> öğesi ayrıca çok küçük bölgelere (radyo düğmeleri veya onay kutuları gibi) tıklamakta zorluk çeken kullanıcılara da yardımcı olur - çünkü kullanıcı < label > öğesindeki metni tıklattığında radyo düğmesini / onay kutusunu değiştirir.

< label > etiketinin for parametresi, onları birbirine bağlamak için < input > öğesinin id parametresine eşit olmalıdır.

Radyo Düğmeleri (Radio Buttons)

Radyo düğmeleri kullanıcının sınırlı sayıda seçenekten bir tanesini seçmesine olanak tanır. Bu etiket kullanıcıya sunulan seçenekten bir tanesini seçmesini sağlar ve HTML Formlarda sıklıkla kullanılan bir etikettir.

Örnek Kullanım :

<form>
  <input type="radio" id="erkek" name="cinsiyet" value="erkek">
  <label for="erkek">Erkek</label><br>
  <input type="radio" id="kadin" name="cinsiyet" value="kadin">
  <label for="kadin">kadin</label><br>
</form>

Örnekte formda kullanıcıya cinsiyet seçimi yaptırılmaktadır. Dikkat edildiği üzere , input etiketinin type parametresine radio yazdık ve name parametresine cinsiyet dedik. Hangi radyo düğmelerinin aynı seçeneğe uygun olduğunu belirtmek için name parametrelerini aynı olmalıdır.

Onay Kutuları (Checkboxes)

Onay kutuları yani "Checkboxes" kullanıcının sınırlı sayıdaki seçeneklerden bir veya birden fazlasını seçmesine yaramaktadır.Bu etiket kullanıcıya sunulan seçenekten bir veya birden fazlasını seçmesini sağlar ve HTML Formlarda onay kutuları sıklıkla kullanılan bir etikettir.

Checkboxes Örnek Kullanım :

<form>
  <input type="checkbox" id="java" name="deger1" value="Java">
  <label for="java"> Java dilini öğrenmek istiyorum.</label><br>
  <input type="checkbox" id="html" name="deger2" value="html">
  <label for="html"> HTML öğrenmek istiyorum.</label><br>
  <input type="checkbox" id="php" name="deger3" value="php">
  <label for="php">PHP dilini öğrenmek istiyorum.</label>
</form>

Yukarıda ki örnekte kullanıcıya birden fazla seçenek seçtirmek istediğimiz için için onay kutusu kullandık.

Gönder Düğmesi (Submit Button)

< input type=" submit" > form verilerini form işleyicisine göndermek için bir düğme tanımlar.

Form işleyici tipik olarak sunucudaki giriş verilerini işlemek için bir komut dosyası içeren bir sayfadır. Bunlar dinamik diller ile oluşturulmuş sayfalardır. Form işleyici, formun action parametresinde belirtilir.

Örnek Kullanım:

<form action="/aksiyon.php">
    <label for="ad">Adınız:</label><br>
    <input type="text" id="ad" name="ad" value="Kodlama"><br>
    <label for="soyad">Soyadınız:</label><br>
    <input type="text" id="soyad" name="soyad" value="Vakti"><br><br>
    <input type="submit" value="Gönder">
</form>

Form Action Parametresi

Action özelliği, form gönderildiğinde gerçekleştirilecek eylemi tanımlar.Genellikle, kullanıcı gönder düğmesini tıklattığında form verileri sunucudaki bir sayfaya gönderilir. Yani formun gönder butonuna basıldığında formdaki verilerin hangi sayfaya gideceğini belirtir.

Yukarıdaki örnekte, form verileri sunucudaki "/aksiyon.php" adlı bir sayfaya gönderilir. Bu sayfa, form verilerini işleyen bir sunucu taraflı komut dosyasıdır.

Eğer action parametresi girilmez ise, form kendi bulunduğu sayfaya verileri gönderir.

Form Target Parametresi

Target parametresi, gönderilen form verilerinin yeni bir tarayıcı sekmesinde mi, bir çerçevede mi yoksa geçerli pencerede mi açılacağını belirtir. Bu önceden öğrendiğimiz < a > etiketinde kullanılan target ile aynı amaçla kullanılır.

Varsayılan değer "_self" şeklindedir, bu da formun geçerli pencerede gönderileceği anlamına gelir.

Form sonucunu yeni bir tarayıcı sekmesinde açmak için "_blank" değerini kullanılır.

Form Method Parametresi

Method parametresi, form verileri gönderilirken kullanılacak HTTP yöntemini (GET veya POST) belirtir.

Ne zaman GET parametresi kullanılır ?

Form verileri gönderilirken varsayılan HTTP yöntemi GET'dir. Ancak, GET kullanıldığında form verileri sayfanın adres alanında görünür olacaktır:

Örnek:
/aksiyon.php?ad=Kodlama&soyad=Vakti

GET Özellikleri;

  • URL'ye form verilerini ad/değer çiftleriyle ekler
  • Bir URL'nin uzunluğu sınırlıdır (2048 karakter)
  • Hassas verileri göndermek için asla GET kullanmayın! (URL'de görünür olacak)
  • Kullanıcının sonuca yer işareti koymak istediği form gönderimleri için kullanışlıdır.

Ne zaman POST parametresi kullanılır ?

Formlar verileri hassas veya kişisel bilgiler içeriyorsa her zaman POST kullanın. POST yöntemi, form verilerini sayfa adresi alanında görüntülenmez ve gizli şekilde yollar.

POST Özellikleri;

  • POST'un boyut sınırlaması yoktur ve büyük miktarda veri göndermek için kullanılabilir.
  • POST ile form gönderimleri yer imi olarak işaretlenemez

Name Parametresi

Her gönderilen form etiketi için bir name parametresi olmalıdır. Name parametresi o form elemanının kimliğini belirler.

Name parametresi girilmez ise o form elemanı gönderilmez.

Örnek Kullanım ;

<form action="/action_page.php">
  <label for="ad">Adınız :</label><br>
  <input type="text" id="ad" value="Kodlama Vakti" name="ad"><br><br>
  <input type="submit" value="Submit">
</form>

Form etiketine ait parametreler ;

Parametre Açıklama
accept-charset Gönderilen formda kullanılan karakter kümesini belirtir (varsayılan: sayfa karakter seti).
action Formun nereye gönderileceği bir adres (url) belirtir (varsayılan: gönderen sayfa).
autocomplete Tarayıcının formu otomatik olarak doldurup doldurmayacağını belirtir (varsayılan: açık).
enctype Gönderilen verilerin kodlamasını belirtir (varsayılan: url kodludur).
method Formu gönderirken kullanılan HTTP yöntemini belirtir (varsayılan: GET).
name Formu tanımlamak için kullanılan bir ad belirtir
novalidate Tarayıcının formu doğrulamaması gerektiğini belirtir.
target Action özelliğinde adresin hedefini belirtir (varsayılan: _self).

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla