logo

TechCodeview

Formulár JavaScript

V tomto návode sa naučíme, diskutovať a porozumieť formuláru JavaScript. Uvidíme aj implementáciu JavaScriptového formulára na rôzne účely.

Tu sa naučíme spôsob prístupu k formuláru, získanie prvkov ako hodnoty formulára JavaScript a odoslanie formulára.

Úvod do formulárov

Formuláre sú základom HTML. Na vytvorenie používame HTML element formulára JavaScript formulár. Na vytvorenie formulára môžeme použiť nasledujúci vzorový kód:

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

V kóde:

  • Menovka formulára sa používa na definovanie názvu formulára. Názov tohto formulára je 'Prihlasovací_formulár'. Na tento názov sa bude odkazovať vo formulári JavaScript.
  • Značka akcie definuje akciu a prehliadač pri odoslaní formulára vykoná. Tu sme nepodnikli žiadne kroky.
  • Spôsob, ako konať, môže byť buď príspevok alebo dostať , ktorý sa používa pri odoslaní formulára na server. Oba typy metód majú svoje vlastné vlastnosti a pravidlá.
  • Značka input type definuje typ vstupov, ktoré chceme v našom formulári vytvoriť. Tu sme použili typ vstupu ako „text“, čo znamená, že hodnoty zadáme ako text do textového poľa.
  • Net, typ vstupu sme zvolili ako „heslo“ a vstupnou hodnotou bude heslo.
  • Ďalej sme zobrali typ vstupu ako „tlačidlo“, kde po kliknutí dostaneme hodnotu formulára a zobrazíme sa.

Okrem akcie a metód existujú aj nasledujúce užitočné metódy, ktoré poskytuje HTML Form Element

    Predložiť ():Metóda sa používa na odoslanie formulára.resetovať ():Metóda sa používa na resetovanie hodnôt formulára.

Odkazujúce formuláre

Teraz sme vytvorili prvok formulára pomocou HTML, ale musíme ho tiež pripojiť k JavaScriptu. Na to používame getElementById () metóda, ktorá odkazuje na prvok formulára html na kód JavaScript.

Syntax použitia getElementById() metóda je nasledovná:

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

Pomocou Id môžeme urobiť referenciu.

Odoslanie formulára

Ďalej musíme odoslať formulár odoslaním jeho hodnoty, na ktorú používame onSubmit() metóda. Vo všeobecnosti na odoslanie používame tlačidlo Odoslať, ktoré odošle hodnotu zadanú vo formulári.

Syntax metódy submit() je nasledovná:

Keď odošleme formulár, akcia sa vykoná tesne pred odoslaním požiadavky na server. Umožňuje nám pridať poslucháč udalostí, ktorý nám umožňuje umiestniť do formulára rôzne overenia. Nakoniec sa formulár pripraví pomocou kombinácie kódu HTML a JavaScript.

Poďme to všetko zhromaždiť a použiť na vytvorenie a Prihlasovací formulár a Registračný formulár a použite oboje.

prihlasovací formulár

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

Výstup vyššie uvedeného kódu po kliknutí na tlačidlo Prihlásiť sa je uvedený nižšie:

Formulár JavaScript

Registračný formulár

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