في هذا البرنامج التعليمي، سوف نتعلم ونناقش ونفهم نموذج JavaScript. سنرى أيضًا تنفيذ نموذج JavaScript لأغراض مختلفة.
هنا، سوف نتعلم طريقة الوصول إلى النموذج، والحصول على العناصر كقيمة نموذج JavaScript، وإرسال النموذج.
مقدمة إلى النماذج
النماذج هي أساسيات HTML. نحن نستخدم عنصر نموذج HTML من أجل إنشاء جافا سكريبت استمارة. لإنشاء نموذج، يمكننا استخدام نموذج التعليمات البرمجية التالي:
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');
باستخدام المعرف، يمكننا أن نجعل المرجع.
تقديم النموذج
بعد ذلك، نحتاج إلى إرسال النموذج عن طريق إرسال قيمته، والتي نستخدم لها عند تقديم() طريقة. بشكل عام، للإرسال، نستخدم زر إرسال يرسل القيمة المدخلة في النموذج.
بناء جملة طريقة الإرسال () كما يلي:
عندما نقوم بإرسال النموذج، يتم اتخاذ الإجراء قبل إرسال الطلب إلى الخادم مباشرة. يسمح لنا بإضافة مستمع للحدث يمكننا من وضع عمليات تحقق مختلفة في النموذج. وأخيرًا، يصبح النموذج جاهزًا باستخدام مجموعة من تعليمات 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)>