Ebben az oktatóanyagban megismerjük, megvitatjuk és megértjük a JavaScript űrlapot. Látni fogjuk a JavaScript űrlap különböző célokra történő megvalósítását is.
Itt megtanuljuk az űrlap elérésének módját, az elemek JavaScript-űrlap értékeként való lekérését és az űrlap elküldését.
Bevezetés az űrlapokba
Az űrlapok a HTML alapjai. HTML űrlapelemet használunk a létrehozásához JavaScript forma. Űrlap létrehozásához a következő mintakódot használhatjuk:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
A kódban:
- Az űrlap névcímkéje az űrlap nevének meghatározására szolgál. Az űrlap neve itt: 'Bejelentkezési_űrlap'. Erre a névre hivatkozni fog a JavaScript űrlap.
- Az akciócímke határozza meg a műveletet, és a böngésző kezeli az űrlapot, amikor elküldik. Itt nem tettünk semmit.
- A cselekvés módja lehet bármelyik hozzászólás vagy kap , amelyet akkor használnak, amikor az űrlapot el kell küldeni a szervernek. Mindkét módszertípusnak megvannak a maga tulajdonságai és szabályai.
- Az input type címke határozza meg, hogy milyen típusú bemeneteket szeretnénk létrehozni az űrlapunkon. Itt a beviteli típust 'szövegként' használtuk, ami azt jelenti, hogy az értékeket szövegként fogjuk beírni a szövegdobozba.
- Net, a beviteli típust 'jelszónak' vettük, és a beviteli érték jelszó lesz.
- Ezután a beviteli típust 'gombnak' vettük, amelyre kattintva megkapjuk az űrlap értékét, és megjelenik.
A műveleteken és a metódusokon kívül a következő hasznos módszerek is rendelkezésre állnak, amelyeket a HTML űrlapelem biztosít
Hivatkozási űrlapok
Most az űrlapelemet HTML-kóddal hoztuk létre, de a JavaScript-hez is kapcsolódnunk kell. Ehhez használjuk a getElementById () metódus, amely a html űrlapelemre hivatkozik a JavaScript kódra.
A használatának szintaxisa getElementById() a módszer a következő:
let form = document.getElementById('subscribe');
Az Id segítségével megtehetjük a hivatkozást.
Az űrlap beküldése
Ezután be kell küldenünk az űrlapot az érték megadásával, amelyhez a onSubmit() módszer. Általánosságban elmondható, hogy a beküldéshez egy küldés gombot használunk, amely elküldi az űrlapon megadott értéket.
A submit() metódus szintaxisa a következő:
Amikor elküldjük az űrlapot, a művelet közvetlenül azelőtt történik meg, hogy a kérést elküldjük a szervernek. Lehetővé teszi egy eseményfigyelő hozzáadását, amely lehetővé teszi, hogy különféle ellenőrzéseket helyezzünk el az űrlapon. Végül az űrlap HTML és JavaScript kód kombinációjával elkészül.
Gyűjtsük össze és használjuk fel mindezeket a Bejelentkezési űrlap és Regisztrációs űrlap és mindkettőt használja.
Bejelentkezési űrlap
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'; } A fenti kód kimenete a Bejelentkezés gombra kattintva az alábbiakban látható:
Regisztrációs űrlap
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)>