In diesem Tutorial lernen, diskutieren und verstehen wir das JavaScript-Formular. Wir werden auch die Implementierung des JavaScript-Formulars für verschiedene Zwecke sehen.
Hier lernen wir die Methode für den Zugriff auf das Formular, das Abrufen von Elementen als Wert des JavaScript-Formulars und das Absenden des Formulars kennen.
Einführung in Formulare
Formulare sind die Grundlagen von HTML. Wir verwenden ein HTML-Formularelement, um das zu erstellen JavaScript bilden. Zum Erstellen eines Formulars können wir den folgenden Beispielcode verwenden:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
Im Code:
- Das Formularnamen-Tag wird verwendet, um den Namen des Formulars zu definieren. Der Name des Formulars lautet hier „Login_form“. Auf diesen Namen wird im JavaScript-Formular verwiesen.
- Das Aktions-Tag definiert die Aktion, die der Browser beim Absenden des Formulars ausführt. Hier haben wir keine Maßnahmen ergriffen.
- Die Vorgehensweise, Maßnahmen zu ergreifen, kann eine der beiden sein Post oder erhalten , die verwendet wird, wenn das Formular an den Server gesendet werden soll. Beide Arten von Methoden haben ihre eigenen Eigenschaften und Regeln.
- Das Eingabetyp-Tag definiert die Art der Eingaben, die wir in unserem Formular erstellen möchten. Hier haben wir den Eingabetyp „Text“ verwendet, was bedeutet, dass wir Werte als Text in das Textfeld eingeben.
- Net haben wir den Eingabetyp „Passwort“ verwendet und der Eingabewert wird „Passwort“ sein.
- Als nächstes haben wir den Eingabetyp „Schaltfläche“ verwendet. Beim Klicken erhalten wir den Wert des Formulars und werden angezeigt.
Neben Aktionen und Methoden gibt es auch die folgenden nützlichen Methoden, die vom HTML-Formularelement bereitgestellt werden
Referenzieren von Formularen
Jetzt haben wir das Formularelement mit HTML erstellt, müssen aber auch seine Verbindung zu JavaScript herstellen. Hierfür verwenden wir die getElementById () Methode, die das HTML-Formularelement auf den JavaScript-Code verweist.
Die Syntax der Verwendung von getElementById() Methode ist wie folgt:
let form = document.getElementById('subscribe');
Mithilfe der Id können wir die Referenz erstellen.
Absenden des Formulars
Als nächstes müssen wir das Formular absenden, indem wir seinen Wert angeben, für den wir verwenden onSubmit() Methode. Im Allgemeinen verwenden wir zum Absenden eine Absenden-Schaltfläche, die den im Formular eingegebenen Wert übermittelt.
Die Syntax der Methode „submit()“ lautet wie folgt:
Wenn wir das Formular absenden, wird die Aktion ausgeführt, unmittelbar bevor die Anfrage an den Server gesendet wird. Es ermöglicht uns, einen Ereignis-Listener hinzuzufügen, der es uns ermöglicht, verschiedene Validierungen im Formular vorzunehmen. Abschließend wird das Formular mit einer Kombination aus HTML- und JavaScript-Code vorbereitet.
Lassen Sie uns all dies sammeln und verwenden, um ein zu erstellen Login Formular Und Anmeldeformular und beides nutzen.
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'; } Die Ausgabe des obigen Codes beim Klicken auf die Schaltfläche „Anmelden“ wird unten angezeigt:
Anmeldeformular
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)>