În acest tutorial, vom învăța, discuta și înțelege formularul JavaScript. Vom vedea, de asemenea, implementarea formularului JavaScript în diferite scopuri.
Aici, vom învăța metoda de accesare a formularului, obținerea elementelor ca valoare a formularului JavaScript și trimiterea formularului.
Introducere în Forme
Formularele sunt bazele HTML. Folosim elementul de formular HTML pentru a crea JavaScript formă. Pentru a crea un formular, putem folosi următorul cod exemplu:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
In cod:
- Eticheta cu numele formularului este utilizată pentru a defini numele formularului. Numele formularului de aici este „Login_form”. Acest nume va fi referit în formularul JavaScript.
- Eticheta de acțiune definește acțiunea, iar browserul va lua măsuri pentru a aborda formularul atunci când acesta este trimis. Aici, nu am luat nicio măsură.
- Metoda de a acţiona poate fi fie post sau obține , care este folosit atunci când formularul urmează să fie trimis la server. Ambele tipuri de metode au propriile lor proprietăți și reguli.
- Eticheta de tip de intrare definește tipul de intrări pe care dorim să le creăm în formularul nostru. Aici, am folosit tipul de intrare ca „text”, ceea ce înseamnă că vom introduce valori ca text în caseta de text.
- Net, am luat tipul de intrare drept „parolă”, iar valoarea de intrare va fi parola.
- În continuare, am luat tipul de intrare drept „buton”, unde, făcând clic, obținem valoarea formularului și suntem afișați.
În afară de acțiuni și metode, există și următoarele metode utile, care sunt furnizate de Elementul de formular HTML
Formulare de referință
Acum, am creat elementul de formular folosind HTML, dar trebuie să facem și conectivitatea lui la JavaScript. Pentru aceasta, folosim getElementById () metodă care face referire la elementul formularului html la codul JavaScript.
Sintaxa utilizării getElementById() metoda este urmatoarea:
let form = document.getElementById('subscribe');
Folosind ID-ul, putem face referința.
Trimiterea formularului
În continuare, trebuie să trimitem formularul prin trimiterea valorii acestuia, pentru care folosim onSubmit() metodă. În general, pentru a trimite, folosim un buton de trimitere care trimite valoarea introdusă în formular.
Sintaxa metodei submit() este următoarea:
Când trimitem formularul, acțiunea este întreprinsă chiar înainte ca cererea să fie trimisă la server. Ne permite să adăugăm un ascultător de evenimente care ne permite să plasăm diferite validări pe formular. În cele din urmă, formularul este pregătit cu o combinație de cod HTML și JavaScript.
Să colectăm și să folosim toate acestea pentru a crea un Formular de autentificare și Formular de înscriere și folosiți ambele.
Formular de autentificare
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'; } Rezultatul codului de mai sus la clic pe butonul Conectare este afișat mai jos:
Formular de înscriere
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)>