إنشاء أزرار إرسال على نماذج HTML

تعد نماذج HTML واحدة من أكثر الطرق الأساسية لإضافة التفاعل إلى موقعك على الويب. يمكنك طرح الأسئلة والحصول على إجابات من القراء ، وتوفير معلومات إضافية من قواعد البيانات ، وإعداد الألعاب ، وغير ذلك الكثير. هناك عدد من عناصر HTML التي يمكنك استخدامها لإنشاء النماذج الخاصة بك. وبمجرد إنشاء النموذج الخاص بك ، هناك العديد من الطرق المختلفة لإرسال تلك البيانات إلى الخادم أو مجرد بدء تشغيل إجراء النموذج.

هذه هي عدة طرق يمكنك إرسال النماذج الخاصة بك:

• • هذه هي الطريقة الأكثر شيوعًا للحصول على البيانات إلى الخادم ، ولكنها يمكن أن تكون بسيطة للغاية.
• • يجعل استخدام صورة من السهل جدًا جعل الزر "إرسال" ملائمًا لأسلوب موقعك. لكن بعض الأشخاص قد لا يتعرفوا عليه كزر إرسال.
• • الزر

    إدخال العلامة يعطي الكثير من الخيارات نفسها كما في الصورة

    إدخال ، ولكنها تبدو أشبه بنوع إرسال قياسي. يتطلب تفعيل جافا سكريبت.
• • ال

    زر العلامة هي نوع من زر أكثر تنوعا من

    إدخال العلامة. تتطلب هذه العلامة تنشيط Javacript.

• • ال

    أمر عنصر جديد في HTML5 ، ويوفر طريقة لتنشيط البرامج النصية والنماذج مع الإجراءات المقترنة. يتم تفعيله مع JavaScript.

عنصر INPUT

المدخل

إدخال العنصر هو الطريقة الأكثر شيوعًا لإرسال نموذج ، كل ما عليك فعله هو اختيار نوع (

زر,

صورةأو

خضع) وإذا لزم الأمر ، أضف بعض البرامج النصية لإرسالها إلى إجراء النموذج.

ال يمكن كتابة عنصر تماما مثل هذا. ولكن إذا قمت بذلك ، سيكون لديك نتائج مختلفة في المتصفحات المختلفة. تقوم معظم المتصفحات بإنشاء زر يقول "إرسال" ، ولكن يقوم Firefox بإنشاء زر يقول "إرسال الاستعلام". لتغيير ما يقوله الزر ، يجب إضافة سمة:

value = "إرسال النموذج">

تتم كتابة العنصر بهذا الشكل ، ولكن إذا تركت جميع السمات الأخرى ، فإن كل ما سيعرض في المتصفحات هو زر رمادي فارغ. لإضافة نص إلى الزر ، استخدم

القيمةصفة، عزا. ولكن هذا الزر لن يرسل النموذج ما لم تستخدم جافا سكريبت.

عند _ النقر = "تقديم ()؛">

هو مماثل ل

زراكتب ، الذي يحتاج إلى برنامج نصي لإرسال النموذج. باستثناء أنه بدلاً من قيمة نصية ، يجب إضافة عنوان URL لمصدر الصورة.

SRC = "submit.gif">

عنصر الزر

ال

زريتطلب العنصر علامة فتح وعلامة إغلاق. عند استخدامه ، سيتم وضع أي محتوى ترفق داخل العلامة في زر. ثم قمت بتنشيط الزر مع برنامج نصي.

تقديم النموذج

يمكنك تضمين الصور في الزر الخاص بك أو دمج الصور والنص لإنشاء زر أكثر إثارة للاهتمام.

تقديم النموذج

عنصر القيادة

ال

أمرعنصر جديد مع HTML5. لا يتطلب أ

شكل ليتم استخدامها ، ولكنها يمكن أن تكون بمثابة زر إرسال لنموذج. يتيح لك هذا العنصر إنشاء المزيد من الصفحات التفاعلية دون الحاجة إلى نماذج ما لم تكن بحاجة إلى نماذج بالفعل. إذا كنت تريد أن يقول الأمر شيئًا ، فأنت تكتب المعلومات في

ضع الكلمة المناسبةصفة، عزا.

label = "Submit Form">

إذا كنت تريد أن يتم تمثيل الأمر الخاص بك بواسطة صورة ، فإنك تستخدم

أيقونةصفة، عزا.

رمز = "submit.gif">

تحتوي نماذج HTML على عدة طرق مختلفة لتقديمها ، كما تعلمت في الصفحة السابقة. اثنان من تلك الأساليب هي

إدخالالعلامة و

زرالعلامة. هناك أسباب وجيهة لاستخدام هذين العنصرين.

عنصر الإدخال

العلامة هي أسهل طريقة لإرسال نموذج. لا يتطلب شيئا وراء العلامة نفسها ، ولا حتى أ

القيمةعندما ينقر أحد العملاء على الزر ، فإنه يتم إرساله تلقائيًا. لا تحتاج إلى إضافة أي نصوص ، فإن المتصفحات تعلم بإرسال النموذج عند الإرسال

إدخاليتم النقر على العلامة.

المشكلة هي أن هذا الزر قبيح جدا وبسيط. لا يمكنك إضافة صور إليها. يمكنك تصميمه تمامًا مثل أي عنصر آخر ، ولكن لا يزال بإمكانه الشعور بزر قبيح.

استخدم ال

إدخالطريقة الوصول إلى النموذج حتى في المتصفحات التي تم إيقاف تشغيل جافا سكريبت بها.

عنصر BUTTON

ال

زرعنصر يوفر المزيد من الخيارات لتقديم النماذج. يمكنك وضع أي شيء داخل

زرعنصر وتحويله إلى زر إرسال. معظم الناس يستخدمون الصور والنص. ولكن يمكنك إنشاء

DIV وجعل هذا الأمر بأكمله زر إرسال إذا كنت ترغب في ذلك.

أكبر عيب لل

زرالعنصر هو أنه لا يقدم النموذج تلقائيًا. هذا يعني أنه يجب أن يكون هناك نوع من البرامج النصية لتنشيطه. ومن ثم فإن الوصول إليه أقل من

إدخالطريقة. لن يتمكن أي مستخدم لا يحتوي على جافا سكريبت قيد التشغيل من إرسال نموذج باستخدام فقط

زرعنصر لتقديمه.

استخدم ال

زرطريقة على أشكال ليست حاسمة. أيضًا ، هذه طريقة رائعة لإضافة خيارات إرسال إضافية في نموذج واحد.