HTML Form Yapıları!

#HTML

HTML Form Yapıları kullanıcılarınızdan veri, bilgi alıp işleyebilmenize yarayan yapılar bütünüdür. Bunun bir örneği sitenizdeki üyelik yada yorum bölümüdür.

HTML Form Yapıları!
HTML Form Yapıları!

HTML Form Yapıları kullanıcılarınızdan bigi alıp işlemenize yarayan elemanların bütünüdür.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/form_gonder.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Gönder">
</form> 

<p>Gönder butonuna tıkladığınızda inputların içine girdiğiniz bilgileri "form_gonder.php" dosyasına formumuz gönderiyor. Sayfayı oluşturmadığımız için hata alacaksınız anca temelde bu mantıkla çalışır. Dilerseniz bulunduğunuz sayfaya da gönderebilirsiniz.</p>

</body>
</html>

Çıktısı;

See the Pen html formlar by ArmyYazılım (@armyyazilim) on CodePen.

<form> Elemanı

HTML <form>öğesi, kullanıcı girdisini toplamak için kullanılan bir form tanımlar:

<form>
.
form elemanları
.
</form>

Bir HTML formu, form öğeleri içerir .

Form öğeleri, metin alanları, onay kutuları, radyo düğmeleri, gönderme düğmeleri ve daha fazlası gibi farklı giriş öğeleri türleridir.

<input> Öğesi

<input>Eleman en önemli formu unsurdur.

<input>Eleman çeşitli tiplerde bilgilerin girildiği bir bölümdür.

İşte bazı örnekler:

TipAçıklama
<input type=”text”> Tek satırlık bir metin giriş alanı tanımlar.
<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)

Bu derste daha sonra giriş türleri hakkında daha fazla şey öğreneceksiniz.

Metin girişi

<input type="text">metin girişi için bir satırlık giriş alanı tanımlar :

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Çıktısı;

See the Pen html input text by ArmyYazılım (@armyyazilim) on CodePen.

Not: Formun kendisi görünmez. Ayrıca, bir metin alanının varsayılan genişliğinin 20 karakter olduğunu unutmayın.

Radyo Düğmesi Girişi

<input type="radio">Bir radyo düğmesini tanımlar .

Radyo düğmeleri, kullanıcının sınırlı sayıda seçenek arasından BİRİNİ seçmesine izin verir:

<form>
  <input type="radio" name="isim" value="Ali" checked> Ali<br>
  <input type="radio" name="isim" value="Veli"> Veli<br>
  <input type="radio" name="isim" value="Mehmet"> Mehmet
</form>

Çıktısı;

See the Pen html input radio by ArmyYazılım (@armyyazilim) on CodePen.

Gönder Düğmesi

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

Form işleyicisi, genellikle giriş verilerini işlemek için bir komut dosyası içeren bir sunucu sayfasıdır.

Form işleyicisi, formun eylem özelliğinde belirtilir:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/form_gonder.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Gönder">
</form> 

<p>Gönder butonuna tıkladığınızda inputların içine girdiğiniz bilgileri "form_gonder.php" dosyasına formumuz gönderiyor. Sayfayı oluşturmadığımız için hata alacaksınız anca temelde bu mantıkla çalışır. Dilerseniz bulunduğunuz sayfaya da gönderebilirsiniz.</p>

</body>
</html>

Çıktısı;

See the Pen html formlar by ArmyYazılım (@armyyazilim) on CodePen.

Eylem Özelliği

actionÖzelliği, form gönderildiğinde eylem gerçekleştirilebilirliği tanımlar.

Normalde, form verisi kullanıcı gönder düğmesine tıkladığında sunucudaki bir web sayfasına gönderilir.

Yukarıdaki örnekte, form verileri sunucudaki “/form_gonder.php” adlı bir sayfaya gönderilir. Bu sayfa form verilerini işleyen bir sunucu tarafı komut dosyası içerir:

<form action="/form_gonder.php">

Eğer actionnitelik atlandığında, aksiyon geçerli sayfaya ayarlanır.

Hedef Özelliği

target niteliği doldurulan formu yeni sekmede istenilen sayfaya gönderir, bir çerçeve içinde açabilir veya mevcut pencerede bu işlemi yapabilir.

Varsayılan değer ” _self” şeklindedir; bu, 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ın :

<form action="/form_gonder.php" target="_blank">

Diğer kullanılabilir değerler ” _parent“, ” _top” veya bir iframe adını temsil eden bir addır.

Yöntem Özniteliği

methodÖzelliği, (HTTP yöntemi kapsar GET veya POST form verilerini gönderirken) kullanılır:

<form action="/form_gonder.php" method="get">

veya;

<form action="/form_gonder.php" method="post">

GET Ne Zaman Kullanılmalı?

Form verilerini gönderirken varsayılan yöntem GET’tir.

Ancak, GET kullanıldığında, gönderilen form verileri sayfa adres alanında görünecektir :

/form_gonder.php?firstname=Mickey&lastname=Mouse

URL kısmında böyle gözükecektir.

GET ile ilgili notlar:

  • Ad / değer çiftlerinde URL’ye form verileri 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)
  • Bir kullanıcının sonucu yer imlerine eklemek istediği form gönderimleri için kullanışlıdır
  • GET, Google’daki sorgu dizeleri gibi güvenli olmayan veriler için daha iyidir

POST Ne Zaman Kullanılmalı?

Form verileri hassas veya kişisel bilgiler içeriyorsa, her zaman POST kullanın. POST yöntemi, gönderilen form verilerini sayfa adres alanında göstermez.

POST ile ilgili notlar:

  • 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 imlerine eklenemiyor

İsim Özelliği

Her giriş alanının namegönderilmek üzere bir özelliği olması gerekir.

Eğer namenitelik atlanırsa, giriş alanına veri hiç gönderilmez.

Bu örnek yalnızca “lastname” giriş alanını gönderecektir:

<form action="/form_gonder.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Burada name=”lastname” niteliği kullanıldığından formda sadece lastname niteliği işlenecektir. Çünkü Firstname değerinin bir “name” özelliği belirtilmemiştir.

Form Verilerini <fieldset> ile Gruplama

<fieldset>Elemanın bir formda bir grup ile ilgili veri sağlamak için kullanılır.

<legend>Elemanı için bir başlık tanımlar <fieldset> elemanı.

<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Çıktısı;

See the Pen html fieldset legend by ArmyYazılım (@armyyazilim) on CodePen.

İşte tüm <form>özelliklerin listesi :

NitelikAçıklama
accept-charsetGönderilen formda kullanılan karakter kümesini belirtir (varsayılan: sayfa karakter kümesi).
actionFormun gönderileceği bir adresi (URL) belirtir (varsayılan: gönderen sayfa).
autocompleteTarayıcının formu otomatik olarak doldurması gerekip gerekmediğini belirtir (varsayılan: açık).
enctypeGönderilen verinin 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 (DOM kullanımı için: document.forms.name).
novalidateTarayıcının formu doğrulamaması gerektiğini belirtir.
targetİşlem niteliğindeki adresin hedefini belirtir (varsayılan: _self).

Sonraki bölümlerde form özellikleri hakkında daha fazla bilgi edineceksiniz.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

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

İçerik Metası
İbrahim Bozkurt //