logo

TechCodeview

JavaScript obrazac

U ovom vodiču naučit ćemo, razgovarati i razumjeti JavaScript obrazac. Također ćemo vidjeti implementaciju JavaScript forme za različite svrhe.

Ovdje ćemo naučiti metodu pristupa obrascu, dobivanje elemenata kao vrijednosti JavaScript obrasca i slanje obrasca.

Uvod u forme

Obrasci su osnova HTML-a. Koristimo HTML element obrasca kako bismo stvorili JavaScript oblik. Za izradu obrasca možemo koristiti sljedeći primjer koda:

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

U kodu:

  • Oznaka s nazivom obrasca koristi se za definiranje naziva obrasca. Naziv obrasca ovdje je 'Login_form'. Ovo će ime biti navedeno u JavaScript obrascu.
  • Oznaka radnje definira radnju, a preglednik će se uhvatiti u koštac s obrascem kada se pošalje. Ovdje nismo ništa poduzeli.
  • Metoda za poduzimanje radnji može biti bilo koja objaviti ili dobiti , koji se koristi kada obrazac treba poslati na poslužitelj. Obje vrste metoda imaju svoja svojstva i pravila.
  • Oznaka vrste unosa definira vrstu unosa koje želimo stvoriti u našem obrascu. Ovdje smo upotrijebili vrstu unosa kao 'tekst', što znači da ćemo unositi vrijednosti kao tekst u tekstualni okvir.
  • Net, uzeli smo vrstu unosa kao 'lozinku', a ulazna vrijednost će biti lozinka.
  • Dalje, uzeli smo vrstu unosa kao 'gumb' gdje kada kliknemo, dobivamo vrijednost obrasca i prikazujemo je.

Osim radnji i metoda, postoje i sljedeće korisne metode koje pruža HTML Form Element

    podnijeti ():Metoda se koristi za slanje obrasca.resetiraj ():Metoda se koristi za resetiranje vrijednosti obrasca.

Referenciranje obrazaca

Sada smo kreirali element obrasca pomoću HTML-a, ali također moramo uspostaviti njegovu povezanost s JavaScriptom. Za ovo koristimo getElementById () metoda koja upućuje na element html obrasca na JavaScript kod.

Sintaksa korištenja getElementById() metoda je sljedeća:

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

Pomoću ID-a možemo napraviti referencu.

Slanje obrasca

Zatim trebamo poslati obrazac slanjem njegove vrijednosti, za što koristimo onSubmit() metoda. Općenito, za slanje koristimo gumb za slanje koji šalje vrijednost unesenu u obrazac.

Sintaksa metode submit() je sljedeća:

Kada predamo obrazac, radnja se poduzima neposredno prije slanja zahtjeva na poslužitelj. Omogućuje nam dodavanje slušatelja događaja koji nam omogućuje postavljanje različitih provjera valjanosti na obrazac. Na kraju, obrazac se priprema s kombinacijom HTML i JavaScript koda.

Prikupimo i iskoristimo sve ovo za stvaranje Obrazac za prijavu i Obrazac za prijavu i koristiti oboje.

Obrazac za prijavu

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

Izlaz gornjeg koda nakon klika na gumb Prijava prikazan je u nastavku:

JavaScript obrazac

Obrazac za prijavu

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