במדריך זה נלמד, נדון ונבין את טופס ה-JavaScript. נראה גם יישום טופס JavaScript למטרות שונות.
כאן, נלמד את השיטה לגישה לטופס, קבלת אלמנטים כערך טופס ה-JavaScript, ושליחת הטופס.
מבוא לטפסים
טפסים הם היסודות של HTML. אנו משתמשים ברכיב טופס HTML כדי ליצור את JavaScript טופס. ליצירת טופס, נוכל להשתמש בקוד לדוגמה הבא:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
בקוד:
- תג שם הטופס משמש להגדרת שם הטופס. שם הטופס כאן הוא 'Login_form'. שם זה יופנה בטופס JavaScript.
- תג הפעולה מגדיר את הפעולה, והדפדפן ייקח לטפל בטופס כאשר הוא יישלח. כאן, לא נקטנו פעולה.
- השיטה לנקוט פעולה יכולה להיות או הודעה אוֹ לקבל , המשמש כשיש לשלוח את הטופס לשרת. לשני סוגי השיטות יש מאפיינים וכללים משלהם.
- תג סוג הקלט מגדיר את סוג התשומות שאנו רוצים ליצור בטופס שלנו. כאן, השתמשנו בסוג הקלט בתור 'טקסט', מה שאומר שנזין ערכים כטקסט בתיבת הטקסט.
- נטו, לקחנו את סוג הקלט בתור 'סיסמה' וערך הקלט יהיה סיסמה.
- לאחר מכן, לקחנו את סוג הקלט בתור 'כפתור' כאשר בלחיצה, אנו מקבלים את הערך של הטופס ומוצגים.
מלבד פעולה ושיטות, ישנן גם את השיטות השימושיות הבאות המסופקות על ידי רכיב הטופס HTML
טפסי הפניה
כעת, יצרנו את רכיב הטופס באמצעות HTML, אבל אנחנו צריכים גם להפוך את הקישוריות שלו ל-JavaScript. לשם כך, אנו משתמשים getElementById () שיטה המפנה את רכיב הטופס html לקוד JavaScript.
התחביר של השימוש ב- getElementById() השיטה היא כדלקמן:
let form = document.getElementById('subscribe');
באמצעות ה-ID, נוכל לבצע את ההפניה.
הגשת הטופס
לאחר מכן, עלינו לשלוח את הטופס על ידי שליחת הערך שלו, שעבורו אנו משתמשים ב- onSubmit() שיטה. בדרך כלל, כדי לשלוח, אנו משתמשים בכפתור שליחה שמגיש את הערך שהוזן בטופס.
התחביר של שיטת submit() הוא כדלקמן:
כאשר אנו שולחים את הטופס, הפעולה מתבצעת רגע לפני שליחת הבקשה לשרת. זה מאפשר לנו להוסיף מאזין אירועים המאפשר לנו להציב אימותים שונים בטופס. לבסוף, הטופס מוכן עם שילוב של HTML וקוד JavaScript.
בואו נאסוף ונשתמש בכל אלה כדי ליצור א טופס התחברות ו טופס הרשמה ולהשתמש בשניהם.
טופס התחברות
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'; } הפלט של הקוד לעיל בלחיצה על כפתור התחברות מוצג להלן:
טופס הרשמה
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)>