In deze tutorial zullen we de JavaScript-vorm leren, bespreken en begrijpen. We zullen ook de implementatie van het JavaScript-formulier voor verschillende doeleinden zien.
Hier leren we de methode om toegang te krijgen tot het formulier, elementen op te halen als de waarde van het JavaScript-formulier en het formulier te verzenden.
Inleiding tot formulieren
Formulieren vormen de basis van HTML. We gebruiken het HTML-formulierelement om het JavaScript formulier. Voor het maken van een formulier kunnen we de volgende voorbeeldcode gebruiken:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
In de code:
- Formuliernaamtag wordt gebruikt om de naam van het formulier te definiëren. De naam van het formulier hier is 'Login_form'. Er wordt naar deze naam verwezen in het JavaScript-formulier.
- De actietag definieert de actie en de browser zal het formulier aanpakken wanneer het wordt verzonden. Hier hebben wij geen actie ondernomen.
- De methode om actie te ondernemen kan beide zijn na of krijgen , die wordt gebruikt wanneer het formulier naar de server moet worden verzonden. Beide soorten methoden hebben hun eigen eigenschappen en regels.
- De tag voor invoertype definieert het type invoer dat we in ons formulier willen maken. Hier hebben we het invoertype 'tekst' gebruikt, wat betekent dat we waarden als tekst in het tekstvak zullen invoeren.
- Netto hebben we het invoertype als 'wachtwoord' genomen en de invoerwaarde is het wachtwoord.
- Vervolgens hebben we het invoertype als 'knop' genomen, waarbij we door te klikken de waarde van het formulier krijgen en worden weergegeven.
Naast acties en methoden zijn er ook de volgende nuttige methoden die worden geboden door het HTML-formulierelement
Verwijzen naar formulieren
Nu hebben we het formulierelement gemaakt met HTML, maar we moeten het ook verbinden met JavaScript. Hiervoor gebruiken wij de getElementById () methode die het html-formulierelement verwijst naar de JavaScript-code.
De syntaxis van het gebruik van de getElementById() werkwijze is als volgt:
let form = document.getElementById('subscribe');
Met behulp van de ID kunnen we de referentie maken.
Het formulier verzenden
Vervolgens moeten we het formulier indienen door de waarde ervan in te dienen, waarvoor we de bijVerzenden() methode. Over het algemeen gebruiken we bij het indienen een verzendknop waarmee de in het formulier ingevoerde waarde wordt verzonden.
De syntaxis van de methode submission() is als volgt:
Wanneer we het formulier verzenden, wordt er actie ondernomen vlak voordat het verzoek naar de server wordt verzonden. Hiermee kunnen we een gebeurtenislistener toevoegen waarmee we verschillende validaties op het formulier kunnen plaatsen. Ten slotte wordt het formulier klaargemaakt met een combinatie van HTML- en JavaScript-code.
Laten we deze allemaal verzamelen en gebruiken om een Login formulier En Aanmeldingsformulier en gebruik beide.
login formulier
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'; } De uitvoer van de bovenstaande code wanneer u op de knop Inloggen klikt, wordt hieronder weergegeven:
Aanmeldingsformulier
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)>