V tomto tutoriálu se budeme učit, diskutovat a porozumět formuláři JavaScriptu. Uvidíme také implementaci JavaScriptového formuláře pro různé účely.

Zde se naučíme metodu přístupu k formuláři, získání prvků jako hodnoty formuláře JavaScript a odeslání formuláře.

Úvod do formulářů

Formuláře jsou základy HTML. K vytvoření používáme HTML formulářový prvek JavaScript formulář. Pro vytvoření formuláře můžeme použít následující ukázkový kód:

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

V kódu:

• Název formuláře se používá k definování názvu formuláře. Název formuláře je 'Login_form'. Tento název bude uveden ve formuláři JavaScript.
• Značka akce definuje akci a prohlížeč se po odeslání formuláře vypořádá. Zde jsme nepodnikli žádné kroky.
• Způsob, jak jednat, může být buď pošta nebo dostat , který se používá při odeslání formuláře na server. Oba typy metod mají své vlastní vlastnosti a pravidla.
• Značka input type definuje typ vstupů, které chceme v našem formuláři vytvořit. Zde jsme použili typ vstupu jako 'text', což znamená, že hodnoty zadáme jako text do textového pole.
• Net, zvolili jsme typ vstupu jako 'heslo' a vstupní hodnotou bude heslo.
• Dále jsme vzali typ vstupu jako 'tlačítko', kde po kliknutí získáme hodnotu formuláře a zobrazíme se.

Kromě akce a metod existují také následující užitečné metody, které poskytuje HTML Form Element

Předložit ():Metoda se používá k odeslání formuláře.resetovat ():Metoda se používá k resetování hodnot formuláře.

Odkazující formuláře

Nyní jsme vytvořili formulářový prvek pomocí HTML, ale také musíme zajistit jeho propojitelnost s JavaScriptem. K tomu používáme getElementById () metoda, která odkazuje na prvek formuláře html na kód JavaScript.

Syntaxe použití getElementById() metoda je následující:

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

Pomocí Id můžeme vytvořit odkaz.

Odeslání formuláře

Dále musíme formulář odeslat odesláním jeho hodnoty, pro kterou používáme onSubmit() metoda. Obecně k odeslání používáme tlačítko Odeslat, které odešle hodnotu zadanou ve formuláři.

Syntaxe metody submit() je následující:

Když formulář odešleme, akce se provede těsně před odesláním požadavku na server. Umožňuje nám přidat posluchač události, který nám umožňuje umístit různá ověření do formuláře. Nakonec se formulář připraví s kombinací HTML a JavaScript kódu.

Pojďme je všechny shromáždit a použít k vytvoření a Přihlašovací formulář a Registrační formulář a používat obojí.

přihlašovací formulář

 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 výše uvedeného kódu po kliknutí na tlačítko Přihlásit je zobrazen níže:

Registrační formulář

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