V tej vadnici se bomo naučili, razpravljali in razumeli obrazec JavaScript. Ogledali si bomo tudi implementacijo obrazca JavaScript za različne namene.

Tu se bomo naučili metode dostopa do obrazca, pridobivanja elementov kot vrednosti obrazca JavaScript in oddaje obrazca.

Uvod v obrazce

Obrazci so osnova HTML-ja. Za ustvarjanje uporabljamo element obrazca HTML JavaScript oblika. Za ustvarjanje obrazca lahko uporabimo naslednjo vzorčno kodo:

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

V kodi:

• Imenska oznaka obrazca se uporablja za določitev imena obrazca. Ime obrazca tukaj je 'Prijavni_obrazec'. To ime bo navedeno v obrazcu JavaScript.
• Oznaka dejanja določa dejanje, brskalnik pa se bo lotil obrazca, ko bo predložen. Tukaj nismo ukrepali.
• Metoda za ukrepanje je lahko bodisi post oz dobiti , ki se uporablja, ko je treba obrazec poslati na strežnik. Obe vrsti metod imata svoje lastnosti in pravila.
• Oznaka vrste vnosa določa vrsto vnosov, ki jih želimo ustvariti v obrazcu. Tu smo uporabili vrsto vnosa kot 'besedilo', kar pomeni, da bomo v besedilno polje vnesli vrednosti kot besedilo.
• Net, vrsto vnosa smo vzeli kot 'geslo' in vnosna vrednost bo geslo.
• Nato smo vzeli vrsto vnosa kot 'gumb', kjer ob kliku dobimo vrednost obrazca in se prikaže.

Poleg dejanj in metod obstajajo tudi naslednje uporabne metode, ki jih zagotavlja element obrazca HTML

oddaj ():Metoda se uporablja za oddajo obrazca.ponastaviti ():Metoda se uporablja za ponastavitev vrednosti obrazca.

Referenčni obrazci

Zdaj smo ustvarili element obrazca z uporabo HTML-ja, vendar moramo vzpostaviti tudi njegovo povezljivost z JavaScriptom. Za to uporabljamo getElementById () metoda, ki se sklicuje na element obrazca html na kodo JavaScript.

Sintaksa uporabe getElementById() metoda je naslednja:

 let form = document.getElementById('subscribe'); 

Z uporabo ID-ja lahko naredimo referenco.

Oddaja obrazca

Nato moramo oddati obrazec tako, da oddamo njegovo vrednost, za katero uporabimo onSubmit() metoda. Na splošno za oddajo uporabimo gumb za oddajo, ki odda vrednost, vneseno v obrazec.

Sintaksa metode submit() je naslednja:

Ko oddamo obrazec, se dejanje izvede tik preden je zahteva poslana strežniku. Omogoča nam, da dodamo poslušalca dogodkov, ki nam omogoča, da na obrazec postavimo različne validacije. Na koncu je obrazec pripravljen s kombinacijo kode HTML in JavaScript.

Zberimo in uporabimo vse to, da ustvarimo a Obrazec za prijavo in Obrazec za prijavo in uporabite oboje.

prijavni obrazec

 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;; } 

Izhod zgornje kode ob kliku na gumb Prijava je prikazan spodaj:

Obrazec za prijavo

 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)>