I den här handledningen kommer vi att lära oss, diskutera och förstå JavaScript-formuläret. Vi kommer också att se implementeringen av JavaScript-formuläret för olika ändamål.
Här kommer vi att lära oss metoden för att komma åt formuläret, hämta element som JavaScript-formulärets värde och skicka in formuläret.
Introduktion till formulär
Formulär är grunderna i HTML. Vi använder HTML-formulärelement för att skapa JavaScript form. För att skapa ett formulär kan vi använda följande exempelkod:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
I koden:
- Formnamnetikett används för att definiera namnet på formuläret. Namnet på formuläret här är 'Login_form'. Detta namn kommer att hänvisas till i JavaScript-formuläret.
- Åtgärdstaggen definierar åtgärden och webbläsaren tar sig an formuläret när det skickas. Här har vi inte vidtagit några åtgärder.
- Metoden att vidta åtgärder kan vara antingen posta eller skaffa sig , som används när formuläret ska skickas till servern. Båda typerna av metoder har sina egna egenskaper och regler.
- Ingångstyptaggen definierar vilken typ av indata vi vill skapa i vårt formulär. Här har vi använt inmatningstyp som 'text', vilket betyder att vi kommer att mata in värden som text i textrutan.
- Net, vi har tagit ingångstyp som 'lösenord' och inmatningsvärdet kommer att vara lösenord.
- Därefter har vi tagit ingångstyp som 'knapp' där vi när vi klickar får värdet på formuläret och visas.
Förutom åtgärder och metoder finns det följande användbara metoder också som tillhandahålls av HTML-formulärelementet
Referensformulär
Nu har vi skapat formulärelementet med HTML, men vi måste också göra dess anslutning till JavaScript. För detta använder vi getElementById () metod som refererar html-formulärelementet till JavaScript-koden.
Syntaxen för att använda getElementById() metoden är följande:
let form = document.getElementById('subscribe');
Med hjälp av ID kan vi göra referensen.
Skicka in formuläret
Därefter måste vi skicka in formuläret genom att skicka in dess värde, för vilket vi använder onSubmit() metod. För att skicka in använder vi vanligtvis en skicka-knapp som skickar in värdet som anges i formuläret.
Syntaxen för submit()-metoden är följande:
När vi skickar in formuläret vidtas åtgärden precis innan begäran skickas till servern. Det låter oss lägga till en händelseavlyssnare som gör det möjligt för oss att placera olika valideringar på formuläret. Slutligen blir formuläret klart med en kombination av HTML och JavaScript-kod.
Låt oss samla och använda alla dessa för att skapa en Inloggningsformulär och Anmälningsformulär och använda båda.
Inloggningsformulär
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'; } Utdata från ovanstående kod när du klickar på knappen Logga in visas nedan:
Anmälningsformulä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('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)>