HTML Dersleri 16 – Formlar

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.

<label> öğ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.

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 ;

ParametreAçıklama
accept-charsetGönderilen formda kullanılan karakter kümesini belirtir (varsayılan: sayfa karakter seti).
actionFormun nereye gönderileceği bir adres (url) belirtir (varsayılan: gönderen sayfa).
autocompleteTarayıcının formu otomatik olarak doldurup doldurmayacağını belirtir (varsayılan: açık).
enctypeGönderilen verilerin kodlamasını belirtir (varsayılan: url kodludur).
methodFormu gönderirken kullanılan HTTP yöntemini belirtir (varsayılan: GET).
nameFormu tanımlamak için kullanılan bir ad belirtir
novalidateTarayıcının formu doğrulamaması gerektiğini belirtir.
targetAction özelliğinde adresin hedefini belirtir (varsayılan: _self).
Beğendiysen makaleyi paylaşarak destek olabilirsiniz!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir