En aquest tutorial, aprendrem, discutirem i entendrem el formulari JavaScript. També veurem la implementació del formulari JavaScript per a diferents finalitats.
Aquí, aprendrem el mètode per accedir al formulari, obtenir elements com a valor del formulari JavaScript i enviar el formulari.
Introducció als formularis
Els formularis són els fonaments bàsics d'HTML. Utilitzem l'element de formulari HTML per crear el JavaScript forma. Per crear un formulari, podem utilitzar el codi de mostra següent:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
En el codi:
- L'etiqueta de nom del formulari s'utilitza per definir el nom del formulari. El nom del formulari aquí és 'Login_form'. Aquest nom es farà referència al formulari JavaScript.
- L'etiqueta d'acció defineix l'acció i el navegador farà front al formulari quan s'enviï. Aquí no hem pres cap mesura.
- El mètode per actuar pot ser qualsevol publicació o aconseguir , que s'utilitza quan el formulari s'ha d'enviar al servidor. Tots dos tipus de mètodes tenen les seves pròpies propietats i regles.
- L'etiqueta de tipus d'entrada defineix el tipus d'entrada que volem crear al nostre formulari. Aquí, hem utilitzat el tipus d'entrada com a 'text', el que significa que introduirem valors com a text al quadre de text.
- Net, hem pres el tipus d'entrada com a 'contrasenya' i el valor d'entrada serà la contrasenya.
- A continuació, hem pres el tipus d'entrada com a 'botó' on en fer clic, obtenim el valor del formulari i es mostra.
A part d'accions i mètodes, hi ha els següents mètodes útils que també ofereix l'element de formulari HTML
Formularis de referència
Ara, hem creat l'element del formulari amb HTML, però també hem de fer la seva connectivitat amb JavaScript. Per a això, fem servir el getElementById () mètode que fa referència a l'element del formulari html al codi JavaScript.
La sintaxi d'utilitzar el getElementById() mètode és el següent:
let form = document.getElementById('subscribe');
Utilitzant l'Id, podem fer la referència.
Enviament del formulari
A continuació, hem d'enviar el formulari enviant el seu valor, per al qual fem servir el onSubmit() mètode. Generalment, per enviar, fem servir un botó d'envia que envia el valor introduït al formulari.
La sintaxi del mètode submit() és la següent:
Quan enviem el formulari, l'acció es realitza just abans que la sol·licitud s'enviï al servidor. Ens permet afegir un oient d'esdeveniments que ens permet col·locar diverses validacions al formulari. Finalment, el formulari es prepara amb una combinació de codi HTML i JavaScript.
Recollim i utilitzem tot això per crear un Formulari d'inici de sessió i Formulari d'inscripció i utilitzar tots dos.
Formulari d'inici de sessió
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'; } La sortida del codi anterior en fer clic al botó Inici de sessió es mostra a continuació:
Formulari d'inscripció
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)>