I denne øvelse lærer vi, diskuterer og forstår JavaScript-formularen. Vi vil også se implementeringen af JavaScript-formularen til forskellige formål.
Her lærer vi metoden til at få adgang til formularen, få elementer som JavaScript-formularens værdi og indsende formularen.
Introduktion til formularer
Formularer er det grundlæggende i HTML. Vi bruger HTML-formularelement for at skabe JavaScript form. Til oprettelse af en formular kan vi bruge følgende eksempelkode:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
I koden:
- Formularnavnemærke bruges til at definere navnet på formularen. Navnet på formularen her er 'Login_form'. Dette navn vil blive refereret til i JavaScript-formularen.
- Handlingstagget definerer handlingen, og browseren vil tage sig af formularen, når den indsendes. Her har vi ikke foretaget os noget.
- Metoden til at handle kan være enten stolpe eller få , som bruges når formularen skal indsendes til serveren. Begge typer metoder har deres egne egenskaber og regler.
- Inputtype-tagget definerer den type input, vi ønsker at oprette i vores formular. Her har vi brugt input type som 'tekst', hvilket betyder at vi vil indtaste værdier som tekst i tekstboksen.
- Net, vi har taget inputtype som 'adgangskode', og inputværdien vil være adgangskode.
- Dernæst har vi taget inputtype som 'knap', hvor vi ved at klikke får værdien af formularen og bliver vist.
Ud over handling og metoder er der også følgende nyttige metoder, som leveres af HTML-formularelementet
Referenceformularer
Nu har vi oprettet formularelementet ved hjælp af HTML, men vi skal også oprette forbindelse til JavaScript. Til dette bruger vi getElementById () metode, der refererer html-formularelementet til JavaScript-koden.
Syntaksen ved at bruge getElementById() metoden er som følger:
let form = document.getElementById('subscribe');
Ved hjælp af id'et kan vi lave referencen.
Indsendelse af formularen
Dernæst skal vi indsende formularen ved at indsende dens værdi, som vi bruger til onSubmit() metode. For at indsende bruger vi generelt en indsend-knap, der indsender den værdi, der er indtastet i formularen.
Syntaksen for submit()-metoden er som følger:
Når vi indsender formularen, foretages handlingen lige før anmodningen sendes til serveren. Det giver os mulighed for at tilføje en begivenhedslytter, der gør os i stand til at placere forskellige valideringer på formularen. Til sidst bliver formularen klar med en kombination af HTML og JavaScript-kode.
Lad os samle og bruge alle disse til at skabe en Login formular og Tilmeldingsformular og bruge begge dele.
Login formular
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'; } Outputtet af ovenstående kode ved at klikke på Login-knappen er vist nedenfor:
Tilmeldingsformular
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)>