logo

TechCodeview

JavaScript Formu

Bu derste JavaScript formunu öğreneceğiz, tartışacağız ve anlayacağız. Ayrıca JavaScript formunun farklı amaçlar için uygulanmasını da göreceğiz.

Burada forma erişme yöntemini, JavaScript formunun değeri olarak öğeleri almayı ve formu göndermeyi öğreneceğiz.

Formlara Giriş

Formlar HTML'nin temelidir. HTML form öğesini oluşturmak için kullanıyoruz. JavaScript biçim. Form oluşturmak için aşağıdaki örnek kodu kullanabiliriz:

 Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>

Kodda:

  • Form name etiketi formun adını tanımlamak için kullanılır. Buradaki formun adı 'Login_form'dur. Bu isme JavaScript formunda başvurulacaktır.
  • Eylem etiketi eylemi tanımlar ve form gönderildiğinde tarayıcının formu ele alması gerekir. Burada hiçbir önlem almadık.
  • Harekete geçme yöntemi şunlardan biri olabilir: postalamak veya elde etmek Form sunucuya gönderileceği zaman kullanılır. Her iki yöntemin de kendine has özellikleri ve kuralları vardır.
  • Giriş türü etiketi, formumuzda oluşturmak istediğimiz girişlerin türünü tanımlar. Burada giriş tipini 'text' olarak kullandık, bu da değerleri metin kutusuna metin olarak gireceğimiz anlamına geliyor.
  • Net'te giriş tipini 'password' olarak aldık, giriş değeri ise şifre olacaktır.
  • Daha sonra, giriş türünü 'düğme' olarak aldık; tıklandığında formun değerini alıyoruz ve görüntüleniyoruz.

Eylem ve yöntemlerin dışında HTML Form Öğesi tarafından sağlanan aşağıdaki yararlı yöntemler de vardır:

    göndermek ():Yöntem, formu göndermek için kullanılır.Sıfırla ():Yöntem form değerlerini sıfırlamak için kullanılır.

Referans formları

Artık form elementini HTML kullanarak oluşturduk ama aynı zamanda JavaScript ile bağlantısını da yapmamız gerekiyor. Bunun için kullanıyoruz getElementById () HTML form öğesini JavaScript koduna referans veren yöntem.

Kullanım sözdizimi getElementById() yöntem şu şekildedir:

 let form = document.getElementById(&apos;subscribe&apos;);

Id'yi kullanarak referans yapabiliriz.

Formun gönderilmesi

Daha sonra formun değerini göndererek formu göndermemiz gerekiyor. onSubmit() yöntem. Genellikle göndermek için forma girilen değeri gönderen bir gönder düğmesini kullanırız.

submit() yönteminin sözdizimi aşağıdaki gibidir:

Formu gönderdiğimizde, istek sunucuya gönderilmeden hemen önce işlem gerçekleştirilir. Forma çeşitli doğrulamalar yerleştirmemizi sağlayan bir olay dinleyicisi eklememize olanak tanır. Son olarak form, HTML ve JavaScript kodunun birleşimiyle hazır hale gelir.

Haydi tüm bunları toplayıp kullanalım. Giriş Formu Ve Kayıt Formu ve ikisini de kullanın.

Giriş Formu

 Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br> function submit_form(){ alert(&apos;Login successfully&apos;); } function create(){ window.location=&apos;signup.html&apos;; }

Giriş butonuna basıldığında yukarıdaki kodun çıktısı aşağıda gösterilmiştir:

JavaScript Formu

Kayıt Formu

 SignUp Page <table class="table"> <tr><td> Name</td> <td></td></tr> <tr><td>Email </td> <td></td></tr> <tr><td> Set Password</td> <td></td></tr> <tr><td>Confirm Password</td> <td></td></tr> <tr><td> </td></tr></table> function create_account(){ var n=document.getElementById(&apos;n1&apos;).value; var e=document.getElementById(&apos;e1&apos;).value; var p=document.getElementById(&apos;p1&apos;).value; var cp=document.getElementById(&apos;p2&apos;).value; //Code for password validation var letters = /^[A-Za-z]+$/; var email_val = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; //other validations required code if(n==&apos;&apos;||e==&apos;&apos;||p==&apos;&apos;||cp==&apos;&apos;){ alert(&apos;Enter each details correctly&apos;); } else if(!letters.test(n)) { alert(&apos;Name is incorrect must contain alphabets only&apos;); } else if (!email_val.test(e)) { alert(&apos;Invalid email format please enter valid email id&apos;); } else if(p!=cp) { alert(&apos;Passwords not matching&apos;); } else if(document.getElementById(&apos;p1&apos;).value.length &gt; 12) { alert(&apos;Password maximum length is 12&apos;); } else if(document.getElementById(&apos;p1&apos;).value.length <6) { alert('password minimum length is 6'); } else{ alert('your account has been created successfully... redirecting to javatpoint.com'); window.location="https://www.javatpoint.com/" ; < pre> <p>The output of the above code is shown below:</p> <img src="//techcodeview.com/img/javascript-tutorial/97/javascript-form-2.webp" alt="JavaScript Form"> <p>In this way, we can create forms in JavaScript with proper validations.</p> <hr></6)>