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
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('Login successfully'); } function create(){ window.location='signup.html'; } 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('n1').value; var e=document.getElementById('e1').value; var p=document.getElementById('p1').value; var cp=document.getElementById('p2').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==''||e==''||p==''||cp==''){ alert('Enter each details correctly'); } else if(!letters.test(n)) { alert('Name is incorrect must contain alphabets only'); } else if (!email_val.test(e)) { alert('Invalid email format please enter valid email id'); } else if(p!=cp) { alert('Passwords not matching'); } else if(document.getElementById('p1').value.length > 12) { alert('Password maximum length is 12'); } else if(document.getElementById('p1').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)>