I denne opplæringen vil vi lære, diskutere og forstå JavaScript-skjemaet. Vi vil også se implementeringen av JavaScript-skjemaet for ulike formål.
Her lærer vi metoden for å få tilgang til skjemaet, hente elementer som JavaScript-skjemaets verdi og sende inn skjemaet.
Introduksjon til skjemaer
Skjemaer er det grunnleggende i HTML. Vi bruker HTML-skjemaelementet for å lage JavaScript form. For å lage et skjema kan vi bruke følgende eksempelkode:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
I koden:
- Skjemanavnetikett brukes til å definere navnet på skjemaet. Navnet på skjemaet her er 'Login_form'. Dette navnet vil bli referert til i JavaScript-skjemaet.
- Handlingskoden definerer handlingen, og nettleseren tar for å håndtere skjemaet når det sendes inn. Her har vi ikke gjort noe.
- Metoden for å iverksette tiltak kan være enten post eller få , som brukes når skjemaet skal sendes til serveren. Begge typer metoder har sine egne egenskaper og regler.
- Inndatatype-taggen definerer typen input vi ønsker å lage i skjemaet vårt. Her har vi brukt input type som 'tekst', noe som betyr at vi vil legge inn verdier som tekst i tekstboksen.
- Netto, vi har tatt inngangstype som 'passord' og inngangsverdien vil være passord.
- Deretter har vi tatt inndatatype som 'knapp', der ved å klikke får vi verdien av skjemaet og blir vist.
Annet enn handling og metoder, er det følgende nyttige metoder som også leveres av HTML-skjemaelementet
Referanseskjemaer
Nå har vi laget skjemaelementet ved hjelp av HTML, men vi må også koble det til JavaScript. Til dette bruker vi getElementById () metode som refererer html-skjemaelementet til JavaScript-koden.
Syntaksen for å bruke getElementById() metoden er som følger:
let form = document.getElementById('subscribe');
Ved å bruke ID-en kan vi lage referansen.
Sender inn skjemaet
Deretter må vi sende inn skjemaet ved å sende inn verdien, som vi bruker onSubmit() metode. For å sende inn bruker vi vanligvis en send-knapp som sender inn verdien angitt i skjemaet.
Syntaksen til submit()-metoden er som følger:
Når vi sender inn skjemaet, utføres handlingen rett før forespørselen sendes til serveren. Det lar oss legge til en hendelseslytter som gjør oss i stand til å plassere ulike valideringer på skjemaet. Til slutt blir skjemaet klart med en kombinasjon av HTML og JavaScript-kode.
La oss samle og bruke alle disse til å lage en Innloggingsskjema og Påmeldingsskjema og bruk begge deler.
innloggingsskjema
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'; } Utdataene fra koden ovenfor ved å klikke på Logg inn-knappen vises nedenfor:
Påmeldingsskjema
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)>