HTML FORMLAR - form ETİKETİ

Merhaba..

HTML sayfalarda veri gönderileri FORMLAR ile sağlanır. HTML Formlar sayesinde kullanıcının aktif olacağı dinamik web sayfaları hazırlanabilir. Kullanıcıdan veri alınabilir, alınan verilerle istenilen birçok işlem gerçekleştirilebilir.

Sosyal paylaşım sitelerinde paylaşım yaparken doldurduğumuz alanlar,  e-ticaret sitelerinde alışveriş yaparken girdiğmiz bilgiler, herhangi  bir siteye girişte karşımıza gelen bilgi kutuları yada basitçe bize tek bir soru soran onay kutuları birer form'dur ve form elemanları kullanılarak hazırlanmaktadır. Formlardan gelen bilgiler formun gönderildiği sayfada işlenirler...

<FORM>

HTML'de formlar <form> etiketi ile oluşturulur. Formu oluşturacak tüm elemanlar <form> .... </form> eitketleri arasına yazılmalıdır. 

Genel Kullanımı:

<form action=""  method="" name="" enctype="">
.
.
.
.
</form>

Formlar  onaylandığında yada gönderildiğinde , bilgilerin nereye gideceği , hangi yolla gönderileceği , içerisinde dosya olup olmadığı gibi parametreler alır.  

• ACTION
• METHOD
• ENCTYPE
• NAME

Tek tek bakalım..

ACTION 

Form onaylandığında bilgilerin nereye gönderielceğini belirler. Boş bırakılırsa yada sadece # işareti olarak belirlenirse ,  form olduğu sayfaya yönlenir. 

<form action=""  method="" enctype=""></form>
<form action="#"  method="" enctype=""></form>

Yukarıdaki 2 formda onaylandığında  , bulundukları sayfaya yönlenirler. Eğer bilgiler farklı bir sayfaya gönderilecekse , buraya sayfanın adı , uzantısı varsa klasör yolu yazılır. 

<form action="veriekle.php"  method="" enctype=""></form> 

Örneğin yukarıdaki  form onaylandığında  , bilgiler  veriekle.php sayfasına gönderilir.  

METHOD 

Form onaylandığında verilerin hangi metodla gönderileceğini belirler. 2 metod kullanılır. GET yada POST

GET : Formdaki veriler tarayıcıya açık bir şekilde gönderilir. Yani formda girilen veriler , formun gideceği adresin sonuna eklenerek gönderilir. Tarayıcı adres çubuğunda görünürler. Bu yüzden güvenilir değildir.

<form action="#"  method="GET" enctype=""></form> 

Örneğin ad ve soyad bilgilerini isteyen bir form GET metodu ile gönderildiğinde tarayıcı adres çubuğu aşağıdaki gibi olur.

GET en genel anlamda almak demektir. Dolayısı ile kayt edilecek , yada kulanıcı bilgileri içeren  verilerden ziyade , sayfalara onay butpnu olmadan ekstra bilgi gönderirken daha çok tercih edilir. Detay sayfalarının , profil sayfalarının açılmasında id bilgisi gibi.. 

Örneğin;

adresinde id=xx bilgisi GET ile alınır. Bu ıd bilgisine gore ilgili makale sayfaya yüklenir. PHP derslerinde görebilirsiniz..

POST: Formdaki veriler tarayıcıya kapalı bir şekilde gönderilir. Yani formda girilen veriler , formun gideceği adresie gizli şekilde gönderilir. Tarayıcı adres çubuğunda görünmezler. Bu yüzden veri gönderirken daha güvenilirdir.

<form action="#"  method="POST" enctype=""></form> 

Örneğin ad ve soyad bilgilerini isteyen bir form POSTmetodu ile gönderildiğinde tarayıcı adres çubuğu aşağıdaki gibi olur. Veriler adres çubuğunda görünmez!

POST  en genel anlamda göndermek demektir. Dolayısı ile kayt edilecek , yada kulanıcı bilgileri içeren  verilerden için tercih edilir.  

ENCTYPE 

Formdaki verilerin gönderilirken kodlamasını belirler.  3 değer alır .

• application/x-www-form-urlencode  : Varsayılan değerdir. Verilerdeki boşluklar "+" işaretine , özel karakterler ASCII kodlarına dönüştürülür. 
• multipart/form-data : Eğer form içerisinde bir dosya da gönderiliyorsa mutlaka yazılmalıdır. Sadece POST metodunda çalışır.
• text/plain : Veriler kodlanmadan gönderilir. Tercih edilmez...

Burada bizim için önemli olan multipart/form-data  değeridir. İçerisinde resim olan , dosya isteyen formlarda; form etiketine 

enctype="multipart/form-data" parametresi  eklenmez ise dosyalar upload edilemezler.

<form action="#"  method="POST" enctype="multipart/form-data">.....</form> 

NAME

Formun adlandırılmasını sağlar. Forma ve elemanlarına isim vermek , bilgileri göndereceğimiz yerde , bilginin nereden geldiğini belirlemk için önemlidir.

<form action="#"  method="POST" enctype="multipart/form-data" name="giris">.....</form> 

AUTOCOMPLETE 

Metin kutularına tıklandığında, tarayıcı verssiyonlarına bağlı olarak daha önce buraya yazılmış olan içerikler liste gibi görüntülenir. Eğer autocomplete özelliği "off" yapılırsa , metin kutularına eklenen önceki içerikler görünmez.. On (varsayılan)  yada OFF değerleri alır.  Aurocomplete özelliği inputlara verilebildiği gibi doğrudan formada uygulanabilir. Bu durumda tüm inputların otomatik tamamlama özelliği açılır yada kapanır.

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

Yukarıdaki metin kutusuna tıklandığında , autocomplete özelliği form etiketi içerisinde kapatıldığı için  , önceden girilen değerleri göstermeyecektir..

NOVALIDATE

Novalidate özelliği , form içindeki elemanlar için belirlenen kriterlerin form gönderilirken  kontrol edilmemesini sağlar. Örneğin email tipndeki bir inputa yazılan değer form gönderilirken kontrol edilir ve @ işareti yok ise uyarı verilerek formun gönderilmesi engellenir. Ancak forma novalidate özellği eklenirse bu kontrol devre dışı olacaktır.. Yada "required (gerekli)" özelliği ile gerekli kılınan bir form elemanı , novalidate kullanıldığında kontrol edilmeyecektir..  

<form action="" novalidate>
  <label for="mail">Mail Adresiniz: </label><br>
  <input type="email" id="mail" name="mail"  required><br> <br>  
  <input type="submit" > 
</form>

Yukarıdaki GÖNDER butonu tıklandığında form,   kullanılan input tipinin "email" olmasına ve required ile gerekli alan olarak belirtilmesine rağmen,  uyarı olmadan gönderilecektir.

BASİT ÖRNEK FORM

Formların işlevsel olması için içerisinde form elemanlarının olması gerekir. Bu elemanlar veri girişi , seçimi , gönderimi yada verilerin temizlenmesi gibi işlevsellikte olabilirler...

  <form action="" method="POST">  
    Adınız <input type="text" name="ad"> <br><br>
    Soyadınız <input type="text" name="soyad"><br><br>
    <input type="submit" value="GÖNDER"> 
  </form>

Örneğin yukarıda ad ve soyad bilgilerini isteyen bir form görüyorsunuz. Bu girişler ve formu gönderecek buton için INPUT elemanı kullanılmış. INPUT elemanları formlarda en çok kullanılan elemandır . 

HTML FORMLAR INPUT ELEMANLARI makalesinden formlarda kullanılan input tiplerine bakabilirsiniz... 

Görüşmek üzere...