Javascript Form İşlemleri

[Tekih]

Formlar web siteleri ve uygulamalarında kullanıcıların bilgi girişi yapmasına olanak sağlar. JavaScript, web sayfalarında kullanılan en yaygın programlama dillerinden biridir ve form işlemleri için çok yararlıdır. Bu makalede, JavaScript kullanarak form işlemleri yapmanın temellerini öğreneceksiniz.

İçindekiler​

1. Form Temelleri
   • Form Etiketi ve Özellikleri
   • Input Etiketi ve Özellikleri
   • Buton Etiketi ve Özellikleri
2. Formun Gönderilmesi
   • Submit Butonu
   • Formun İşlenmesi
3. Form Doğrulama
   • Gereksinim Alanı Doğrulama
   • Veri Türü Doğrulama
4. Form Alanlarını Ekleme ve Kaldırma
   • Input Alanı Ekleme
   • Input Alanı Kaldırma
5. Form Alanları Değerini Alma ve Değiştirme
   • Alan Değerini Alma
   • Alan Değerini Değiştirme
6. Form Alanlarını Sıfırlama ve Temizleme
   • Formu Sıfırlama
   • Alanları Temizleme

1. Form Temelleri​

Form Etiketi ve Özellikleri​

Bir form oluşturmak için, HTML'deki <form> etiketi kullanılır. Form etiketi özellikleri, formun ne yapacağını belirtmek için kullanılır. Bazı özellikler:

• method: Verilerin nasıl gönderileceğini belirler. POST veya GET olabilir.
• action: Verilerin gönderileceği URL'yi belirler.
• target: Verilerin gönderildiği hedef belirtilir.

Input Etiketi ve Özellikleri​

Bir form içinde, kullanıcıların bilgi girmesi için kullanılan <input> etiketi kullanılır. Bazı özellikler:

• type: Input alanının veri türünü belirler. Text, number, email, checkbox, radio, vb. olabilir.
• name: Input alanının adı belirtilir. Verilerin gönderilmesi için kullanılır.
• value: Input alanındaki varsayılan değeri belirler.

Buton Etiketi ve Özellikleri​

Formu göndermek için, <button> veya <input type="submit"> kullanılır. Bazı özellikler:

• type: Button veya submit düğmesinin tipini belirler.
• value: Düğmenin varsayılan değerini belirler.

2. Formun Gönderilmesi​

Submit Butonu​

Formdaki input alanlarına girilen verileri göndermek için, <button> veya <input type="submit"> kullanılır. Submit butonu tıklandığında, form verileri belirtilen action URL'ye gönderilir.

Formun İşlenmesi​

Form verileri, method özelliğinde belirtilen HTTP yöntemi ile gönderilir. İki yaygın HTTP yöntemi, POST ve GET'tir.
POST yöntemi, form verilerini URL'nin sonuna ekler ve gönderir. GET yöntemi, form verilerini URL'nin sonuna ekler ve gönderir.

3. Form Doğrulama​

Gereksinim Alanı Doğrulama​

Form alanlarının doğruluğunu kontrol etmek için, required özelliği kullanılır. Bu özellik, alanın boş bırakılamayacağını belirtir.

Veri Türü Doğrulama​

Form alanlarında belirli veri türlerinin girilmesini sağlamak için, type özelliği kullanılır. Bu özellik, alanın doğru veri türünde olması gerektiğini belirtir.

4. Form Alanlarını Ekleme ve Kaldırma​

Input Alanı Ekleme​

JavaScript, form alanlarını dinamik olarak eklemek için kullanılabilir. Yeni bir input alanı eklemek için, createElement() yöntemi kullanılır.

Input Alanı Kaldırma​

Form alanlarını dinamik olarak kaldırmak için, removeChild() yöntemi kullanılır.

5. Form Alanları Değerini Alma ve Değiştirme​

Alan Değerini Alma​

Form alanlarındaki verileri almak için, value özelliği kullanılır. Bu özellik, form alanının içeriğini döndürür.

Alan Değerini Değiştirme​

Form alanlarındaki verileri değiştirmek için, value özelliğine yeni bir değer atanır.

6. Form Alanlarını Sıfırlama ve Temizleme​

Formu Sıfırlama​

Formdaki input alanlarını sıfırlamak için, reset() yöntemi kullanılır.

Alanları Temizleme​

Formdaki input alanlarını temizlemek için, value özelliğine boş bir değer atanır.

---

JavaScript, form işlemleri yapmak için çok güçlü bir dil olduğunu kanıtlamaktadır. Bu makalede öğrendiğiniz temel özellikler sayesinde, form işlemleri yapmak için JavaScript kullanabilirsiniz.

---

Sık Sorulan Sorular (FAQ)​

Form verileri hangi HTTP yöntemiyle gönderilir?
Form verileri POST veya GET yöntemiyle gönderilebilir.

Form doğrulama nasıl yapılır?
Form alanlarında gereksinim veya veri türü doğrulama özellikleri kullanarak yapılabilir.

JavaScript kullanarak form alanları nasıl eklenir veya kaldırılır?
createElement() ve removeChild() yöntemleri kullanılarak dinamik olarak form alanları eklenir veya kaldırılır.

Form alanlarındaki verileri nasıl alabiliriz ve değiştirebiliriz?
Form alanlarının verileri value özelliği kullanılarak alınabilir ve değiştirilebilir.

Formun sonrasında ne yapılabilir?
Form gönderildikten sonra, veriler sunucu tarafında işlenebilir ve kullanıcılara bir yanıt gönderilebilir. Örneğin, bir kayıt işlemi tamamlandıktan sonra kullanıcıya bir teşekkür sayfası gösterilebilir veya hata durumunda kullanıcıya bir hata mesajı gösterilebilir.

---

Bu makalede, JavaScript kullanarak form işlemleri yapmanın temellerini öğrendiniz. Form temelleri, form gönderimi, form doğrulama, form alanları ekleme ve kaldırma, form alanları değerini alma ve değiştirme, ve form alanlarını sıfırlama ve temizleme gibi konulara değindik. Bu özellikleri kullanarak, web sitenizde veya uygulamanızda kullanıcıların bilgi girişi yapmasını sağlayabilirsiniz.