JavaScript kullanarak form oluşturma, veri doğrulama ve gönderme işlemleri oldukça kolay ve kullanışlıdır İlk olarak, HTML form etiketleri kullanarak form oluşturulur ve gereken alanlar ad, soyad, e-posta adresi, mesaj vb eklenir Sonrasında, JavaScript kullanarak form verilerinin doğruluğunu kontrol edilir ve hata mesajları ile kullanıcı uyarılır
Form verilerinin doğrulandıktan sonra, AJAX teknolojisi kullanılarak veriler sunucuya gönderilir Bu sayede sayfa yenilenmez ve daha akıcı bir kullanıcı deneyimi sunulur Gönderim işlemi tamamlandığında, kullanıcıya bir iletişim kutusu kullanarak başarılı bir şekilde gönderildiği hakkında bilgi verilir Formun otomatik olarak yenilenmesi de kullanıcının formu sıfırlamasına yardımcı olur
JavaScript kullanarak etkileşimli formlar oluşturmak için, doğru HTML etiketleri kullanılmalı ve form alanları doğru sağlanmalıdır Form doğrulama işlemi sırasında, RegExp metodu

JavaScript kullanarak form oluşturma işlemi oldukça kolaydır ve birkaç adımdan oluşur. İlk olarak, HTML form etiketleri kullanarak formumuzu oluşturuyoruz. Ardından, form elemanlarına ad, soyad, e-posta adresi ve mesaj gibi bilgileri girmek için gerekli olan alanları ekliyoruz.

Form oluşturduktan sonra, JavaScript kullanarak form verilerinin doğrulama işlemini yapmak önemlidir. Örneğin, kullanıcının e-posta adresinin geçerli bir formatta olduğunu kontrol edebilirsiniz. Bu, kullanıcının yanlış bir e-posta adresi girdiğinde hata mesajı almasını önler.

Form verileri doğrulandıktan sonra, bir sonraki adım form verilerinin sunucuya gönderilmesidir. JavaScript kullanarak AJAX teknolojisini kullanarak form verilerini sunucuya gönderebilirsiniz. Bu, sayfanın yeniden yüklenmesini engeller ve daha akıcı bir kullanıcı deneyimi sunar.

Form verileri başarılı bir şekilde gönderildiğinde, bir iletişim kutusu kullanarak kullanıcıya başarılı bir şekilde gönderildiğini bildirebilirsiniz. Formun başarılı bir şekilde gönderilmesi, kullanıcının güvenliği ve memnuniyeti için önemlidir.

Son olarak, formun otomatik olarak yenilenmesine neden olabilirsiniz. Bu, kullanıcının formu sıfırlamasına yardımcı olur ve tekrar doldurmasını gerektirmez. Bu basit adımları takip ederek, kullanıcı etkileşimli bir form oluşturabilir ve web sayfanızın daha profesyonel görünmesini sağlayabilirsiniz.

Form Oluşturma

JavaScript kullanarak etkileşimli formlar oluşturmak, web siteniz için kullanıcı deneyimini arttırmak açısından son derece önemlidir. Form oluşturmak için HTML form etiketlerini kullanarak, kullanıcının ad, soyad, e-posta adresi ve mesaj gibi bilgilerini toplamak için gerekli alanları eklememiz gerekiyor. Bu alanları belirlerken kullanılan etiketlere dikkat etmeniz, formların daha okunaklı ve anlaşılır bir şekilde oluşturulmasını sağlar.

Örneğin, input etiketi, formda girilen bilgilerin alınabileceği yerleri belirlemek için kullanılır. Input etiketi altındaki type özelliği sayesinde ise, farklı veri türleri için özelleştirilmiş alanlar oluşturabiliriz. E-posta adreslerinin doğru formatlarda girilmesi için ise, input etiketine type="email" özelliği eklenmelidir.

Form oluştururken, kullanıcının doğru bilgileri girmesi için gerekli uyarıları da eklememiz gerekiyor. Bu uyarıları, JavaScript kodları ile oluşturarak formun daha verimli bir şekilde kullanılmasını sağlayabiliriz. Doğru formatlarda bilgi girilmediğinde, uygun bir uyarı mesajı verilerek kullanıcının doğru bilgi girmesi sağlanabilir.

Form Doğrulama

Form doğrulama işlemi, kullanıcıların yanlış veya eksik veri girişi yapmalarını önlemek için önemlidir. Bu doğrulama işlemi için JavaScript kullanarak form verilerinin doğru formatta olup olmadığını kontrol edeceğiz. Örneğin, e-posta adresinin geçerli bir formatta olup olmadığını kontrol edeceğiz. Bunun için JavaScript'te yer alan RegExp metodu kullanacağız.

RegExp metodu, bir desen içeren bir metni aramak için kullanılır. Desen, verilen bir kalıp oluşturan özel karakterlerin kombinasyonudur. Form doğrulama işlemi için, öncelikle e-posta adresi için geçerli bir desen oluşturmalıyız. Örneğin, e-posta adresleri "example@example.com" şeklinde olabilir. Bu deseni oluşturmak için, aşağıdaki kodu kullanabiliriz:

```var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;```

Bu desen, bir metnin geçerli bir e-posta adresi olup olmadığını kontrol eder. Kodda yer alan "^" ifadesi metnin başlangıcını, "$" ifadesi metnin sonunu belirtir. "+" ifadesi, önceki karakterin bir veya daha fazla kez tekrarlanabileceğini belirtir. "[^\s@]" ifadesi, boşluk veya "@" karakteri dışındaki herhangi bir karakteri belirtir. "\" karakteri, özel karakterlerin kullanımını belirtir. "." ifadesi, herhangi bir karakteri belirtir. "[^\s@]+" ifadesi, arabirim karakterleri olmadan en az bir karakterden oluşan karakter zincirlerini belirtir.

Form doğrulama işlemi sırasında, diğer form alanları da kontrol edilir. Örneğin, bir telefon numarası için geçerli bir desen kullanılabilir. Bunun yanı sıra, bir sayı girişi için sadece rakamların girilmesi gerektiği kontrol edilebilir.

Tüm form alanlarının doğru şekilde doldurulup doldurulmadığını kontrol ettikten sonra, doğrulanmış verileri göndermek için JavaScript kullanarak AJAX teknolojisi kullanabiliriz. Bu teknoloji, sayfayı yenilemeden sunucu ile iletişim kurmamızı sağlar.

Sonuç olarak, form doğrulama işlemi, kullanıcıların yanlış veya eksik veri girişi yapmalarını önlemek için önemlidir. JavaScript kullanarak form verilerini doğrulayabilir ve AJAX teknolojisi kullanarak doğrulanmış verileri sunucuya gönderebiliriz.

Gönderme İşlemi

Form üzerindeki verilerin kullanıcı tarafından sağlandığı doğrulandıktan sonra, gönderme işlemine geçilecektir. Bu işlem, sayfa yenilenmeden ve kullanıcının başka bir sayfaya yönlendirilmesine gerek kalmadan gerçekleştirilecektir. Bunun için AJAX (Asynchronous JavaScript and XML) teknolojisi kullanılacaktır. AJAX, sayfayı yenileme ihtiyacını ortadan kaldırarak web uygulamalarına daha hızlı ve daha kesintisiz bir kullanıcı deneyimi sunar.

Form verileri JavaScript yardımıyla toplanarak, sunucuyla iletişim halinde olan bir arka plandaki script üzerinden gönderilecektir. Bu sayede kullanıcının sayfa üzerindeki gezintisi kesintiye uğramadan iletişim gerçekleştirilecektir. AJAX teknolojisi, son yıllarda birçok web uygulamasında kullanılan bir teknolojidir ve modern web sitelerinin vazgeçilmez bir özelliğidir.

Bu işlem sırasında, kullanıcının form verileri tarafından gönderilen mesaj sunucu tarafından işlenerek uygun bir formatta yanıtlandıktan sonra teyit mesajı gösterilecektir. Kullanıcının formun başarıyla gönderildiği bilgisi doğrulandıktan sonra, formun yenilenmesi gerekmektedir. Bu sayede kullanıcı bir sonraki hedefine veya işlemine geçebilir.

Formu İletişim Kutusuna Ekleme

Form verileri başarılı bir şekilde sunucuya gönderildiğinde, kullanıcıya bir iletişim kutusu kullanarak gönderim işleminin başarılı olduğunu bildireceğiz. Bu iletişim kutusu, kullanıcının form gönderimini onaylayan ve teşekkür eden bir mesaj içerecektir. İletişim kutusu, HTML ve CSS kullanarak oluşturulabilir, ancak JavaScript kullanarak daha dinamik hale getirilebilir.

JavaScript ile bir iletişim kutusu oluşturmak için, window objesi tarafından sağlanan native JavaScript fonksiyonlarından olan alert veya confirm fonksiyonları kullanılabilir. Alert fonksiyonu, kullanıcıya sadece tek bir düğme seçeneği sunar ve bu nedenle sadece basit mesajlarda tercih edilir. Confirm fonksiyonu ise kullanıcıya bir onaylama düğmesi ve bir iptal düğmesi sunar ve bu nedenle daha karmaşık mesajlar için tercih edilir.

• Alert Fonksiyonu:

                alert("Form başarıyla gönderildi");          

• Confirm Fonksiyonu:

                var onay = confirm("Form başarıyla gönderilecek. Onaylıyor musunuz?");        if(onay){          // formun sunucuya gönderildiği işlemler          alert("Form başarıyla gönderildi");        }          

Bu iletişim kutuları, kullanıcının işlem sonrası bilgilendirilmesini sağlar ve kullanıcı deneyimini artırır. Formu göndermenin başarısız olduğu durumlarda, JavaScript ile hata mesajları gösterilebilir ve kullanıcıya gereksiz hatalardan kaçınması için gerekli bilgiler sağlanabilir.

Formun Yenilenmesi

JavaScript kullanarak formun otomatik olarak yenilenmesini sağlayabiliriz. Formun yenilenmesi, kullanıcının başka bir iletişim göndermeden önce formu sıfırlamasını sağlar.

Bunun için, form gönderme işlemini gerçekleştiren JavaScript koduna formun yenilenmesi için gerekli kodları eklemeliyiz. Bu kodlar, form gönderildikten sonra formun sıfırlanmasını sağlayacak.

Bunun için, formun reset() methodunu kullanabiliriz. Bu method, formdaki tüm alanları varsayılan değerlerine geri yükler. Kodumuz şu şekilde olabilir:

   document.getElementById("myForm").reset(); 

Bu kod, "myForm" id'sine sahip olan formun sıfırlanmasını sağlar. Kodumuzu form gönderme işleminden hemen önce ekleyerek, kullanıcının formu sıfırlamasını kolaylaştırabiliriz.