استخدام علامة الإدخال لتقديم النماذج
تعد نماذج HTML واحدة من أكثر الطرق الأساسية لإضافة التفاعل إلى موقعك على الويب. يمكنك طرح الأسئلة والحصول على إجابات من القراء ، وتوفير معلومات إضافية من قواعد البيانات ، وإعداد الألعاب ، وغير ذلك الكثير. هناك عدد من عناصر HTML التي يمكنك استخدامها لإنشاء النماذج الخاصة بك. وبمجرد إنشاء النموذج الخاص بك ، هناك العديد من الطرق المختلفة لإرسال تلك البيانات إلى الخادم أو مجرد بدء تشغيل إجراء النموذج.
هذه هي عدة طرق يمكنك إرسال النماذج الخاصة بك:
-
- هذه هي الطريقة الأكثر شيوعًا للحصول على البيانات إلى الخادم ، ولكنها يمكن أن تكون بسيطة للغاية.
-
- يجعل استخدام صورة من السهل جدًا جعل الزر "إرسال" ملائمًا لأسلوب موقعك. لكن بعض الأشخاص قد لا يتعرفوا عليه كزر إرسال.
-
- تعطي علامة INPUT للزر الكثير من نفس الخيارات مثل علامة INPUT للصورة ، ولكنها تبدو أشبه بنوع الإرسال القياسي. يتطلب تفعيل جافا سكريبت.
- <زر>
- علامة BUTTON هي نوع من الزر أكثر تنوعًا من علامة INPUT. تتطلب هذه العلامة تنشيط Javacript.
-
- عنصر COMMAND جديد في HTML5 ، ويوفر طريقة لتنشيط البرامج النصية والنماذج مع الإجراءات المقترنة. يتم تفعيله مع JavaScript.
عنصر INPUT
عنصر INPUT هو الطريقة الأكثر شيوعًا لإرسال نموذج ، كل ما عليك فعله هو اختيار نوع (زر ، صورة ، أو إرسال) وإذا لزم الأمر ، أضف بعض البرامج النصية لإرسالها إلى إجراء النموذج.
يمكن كتابة العنصر بنفس الشكل. ولكن إذا قمت بذلك ، سيكون لديك نتائج مختلفة في المتصفحات المختلفة. تقوم معظم المتصفحات بإنشاء زر يقول "إرسال" ، ولكن يقوم Firefox بإنشاء زر يقول "إرسال الاستعلام". لتغيير ما يقوله الزر ، يجب إضافة سمة:
value = "إرسال النموذج">
يتم كتابة العنصر من هذا القبيل ، ولكن إذا تركت جميع السمات الأخرى ، فإن كل ما سيعرض في المتصفحات هو زر رمادي فارغ. لإضافة نص إلى الزر ، استخدم سمة القيمة. ولكن هذا الزر لن يرسل النموذج ما لم تستخدم جافا سكريبت.
عند _ النقر = "تقديم ()؛">
يشبه نوع الزر ، الذي يحتاج إلى برنامج نصي لإرسال النموذج. باستثناء أنه بدلاً من قيمة نصية ، يجب إضافة عنوان URL لمصدر الصورة.
SRC = "submit.gif">
عنصر BUTTON
يتطلب عنصر BUTTON كلاً من علامة الإغلاق وعلامة الإغلاق عند استخدامك ، سيتم وضع أي محتوى ترفق داخل العلامة في زر. ثم قمت بتنشيط الزر مع برنامج نصي.
تقديم النموذج
يمكنك تضمين الصور في الزر الخاص بك أو دمج الصور والنص لإنشاء زر أكثر إثارة للاهتمام.
تقديم النموذج
عنصر COMMAND
عنصر COMMAND جديد مع HTML5. لا يتطلب استخدام FORM ، ولكن يمكن أن يكون بمثابة زر إرسال لنموذج. يتيح لك هذا العنصر إنشاء المزيد من الصفحات التفاعلية دون الحاجة إلى نماذج ما لم تكن بحاجة إلى نماذج بالفعل. إذا كنت تريد أن يقول الأمر شيئًا ، فإنك تكتب المعلومات في سمة label.
label = "Submit Form">
إذا كنت تريد أن يتم تمثيل الأمر الخاص بك بواسطة صورة ، فإنك تستخدم السمة icon.
رمز = "submit.gif">
هذه المقالة جزء من HTML نماذج البرامج التعليمية. اقرأ البرنامج التعليمي الكامل لمعرفة كيفية استخدام نماذج HTML.
تحتوي نماذج HTML على عدة طرق مختلفة لتقديمها ، كما تعلمت في الصفحة السابقة. اثنين من هذه الأساليب هي علامة INPUT وعلامة BUTTON. هناك أسباب وجيهة لاستخدام هذين العنصرين.
عنصر INPUT
العلامة هي أسهل طريقة لإرسال نموذج. لا يتطلب الأمر أكثر من العلامة نفسها ، ولا حتى قيمة. عندما ينقر أحد العملاء على الزر ، فإنه يتم إرساله تلقائيًا. لا تحتاج إلى إضافة أية نصوص برمجية ، وتعرف المستعرضات إرسال النموذج عند النقر فوق علامة إرسال INPUT.
المشكلة هي أن هذا الزر قبيح جدا وبسيط. لا يمكنك إضافة صور إليها. يمكنك تصميمه تمامًا مثل أي عنصر آخر ، ولكن لا يزال بإمكانه الشعور بزر قبيح.
استخدم طريقة INPUT عندما يكون النموذج الخاص بك قابلاً للإنجاز حتى في المتصفحات التي تم إيقاف تشغيل جافا سكريبت بها.
عنصر BUTTON
يوفر عنصر BUTTON المزيد من الخيارات لتقديم النماذج. يمكنك وضع أي شيء داخل عنصر BUTTON وتحويله إلى زر إرسال. معظم الناس يستخدمون الصور والنص. ولكن يمكنك إنشاء DIV وجعل هذا الأمر بأكمله زر إرسال إذا كنت ترغب في ذلك.
أكبر عيب في عنصر BUTTON هو أنه لا يقدم النموذج تلقائيًا. هذا يعني أنه يجب أن يكون هناك نوع من البرامج النصية لتنشيطه. وبذلك يكون الوصول إليه أقل من طريقة INPUT. لن يتمكن أي مستخدم ليس لديه جافا سكريبت قيد التشغيل من إرسال نموذج يحتوي على عنصر BUTTON فقط لإرساله.
استخدم الأسلوب BUTTON في النماذج غير الهامة. أيضًا ، هذه طريقة رائعة لإضافة خيارات إرسال إضافية في نموذج واحد.
هذه المقالة جزء من HTML نماذج البرامج التعليمية . اقرأه لمعرفة المزيد حول كيفية استخدام نماذج HTML