كيفية إنشاء إشعار بعد النقر على زر هتمل: طريقة سهلة

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

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

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

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

1. كيفية تقديم إشعار بعد النقر على زر في هتمل: طريقة سهلة
2. إنشاء زر هتمل
3. 1. باستخدام علامة "الزر"
4. 2. باستخدام علامة "الإدخال" مع سمة "النوع" تساوي "الزر"
5. إضافة برنامج نصي إلى مستند هتمل
6. تعيين وظيفة بنقرة زر
7. إنشاء كتلة إعلام
8. عرض إشعار بعد الضغط على الزر
9. سؤال وجواب
10. كيف يمكنني إنشاء إشعار بعد النقر على زر في أتش تي أم أل?
11. كيف يمكنني تغيير نص الإخطار بعد النقر على زر في أتش تي أم أل?
12. كيف يمكنني إضافة إشعار مع خيار لإغلاق بعد النقر على زر في أتش تي أم أل?
13. هل من الممكن إنشاء إشعار بعد النقر على زر بدون جافا سكريبت?

كيفية تقديم إشعار بعد النقر على زر في هتمل: طريقة سهلة

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

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

1. قم بإنشاء نموذج داخل العلامة باستخدام عنصر مع سمة النوع="إرسال".
2. أضف سمة المعرف إلى العنصر. على سبيل المثال: معرف="ميفورم".
3. قم بإنشاء برنامج نصي لجافا سكريبت سيتم استدعاؤه بعد النقر فوق الزر. مثال:

في هذا المثال ، نستخدم وظيفة التنبيه () لإنشاء إشعار بعد الضغط على الزر. يمكنك تغيير محتوى هذه الوظيفة وفقا لاحتياجاتك.

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

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

نوصي باستكشاف الطرق المختلفة واختيار الطريقة الأكثر ملاءمة لمشروعك.

إنشاء زر هتمل

هناك عدة طرق لإنشاء زر في هتمل. دعونا ننظر إلى اثنين الأكثر شيوعا.

1. باستخدام علامة "الزر"

أسهل طريقة لإنشاء زر هي استخدام علامة" الزر". مثال على الكود:

انقر لي!

ونتيجة لذلك ، زر مع نقش " انقر لي!"سيتم عرضها على الشاشة.

2. باستخدام علامة "الإدخال" مع سمة "النوع" تساوي "الزر"

الطريقة الثانية لإنشاء زر هي استخدام علامة" الإدخال "مع سمة" النوع "التي تساوي"الزر". مثال على الكود:

ونتيجة لذلك ، زر مع نقش " انقر لي!"سيتم عرضها على الشاشة.

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

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

إضافة برنامج نصي إلى مستند هتمل

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

يوجد أدناه نموذج رمز يوضح كيفية إضافة برنامج نصي إلى مستند هتمل:

1. افتح محرر نصوص أو بيئة تطوير متكاملة مع دعم هتمل.
2. إنشاء ملف هتمل جديد أو فتح واحد موجود.
3. داخل العلامة أو (يوصى بإضافة نصوص برمجية قبل علامة الإغلاق ) أضف علامة الفتح.
4. داخل العلامة ، أضف شفرة جافا سكريبت التي تريد تنفيذها.
5. أغلق العلامة.
6. احفظ ملف هتمل.

مثال على إضافة برنامج نصي إلى مستند هتمل:

انقر على لي

في هذا المثال ، يحدد البرنامج النصي جافا سكريبت وظيفة شومسيج () ، الذي يعرض نافذة منبثقة مع رسالة "مرحبا ، العالم!". ثم زر السمة أونكليك يدعو هذه الوظيفة عند النقر عليه.

وهكذا ، عند فتح مستند هتمل وانقر على الزر ، ستظهر نافذة منبثقة مع الرسالة "مرحبا ، العالم!".

تعيين وظيفة بنقرة زر

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

مثال على الكود:

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

في هذا المثال ، عند النقر على زر مع معرف "بلدي زر" ، سيتم استدعاء وظيفة ميفونكتيون ، والتي سوف تفتح نافذة منبثقة مع إشعار.

وبالتالي ، فإن تعيين وظيفة بنقرة زر يسمح لك بتحديد إجراءات معينة يجب أن تحدث بعد النقر فوق الزر وإنشاء إشعار للمستخدم.

إنشاء كتلة إعلام

عند إنشاء كتلة إعلام في صفحة ويب ، يمكنك استخدام عناصر هتمل المختلفة لهيكلة المعلومات وتسليط الضوء على البيانات الهامة.

فيما يلي بعض خيارات الترميز التي يمكنك استخدامها لإنشاء كتلة إعلام:

1. استخدام القوائم

يمكنك إنشاء كتلة إعلام باستخدام العلامات

كلاهما

أو

إشعار مهم 1

ملاحظة هامة 2

ملاحظة هامة 3

2. باستخدام الجدول

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

ملاحظة هامة 1

ملاحظة هامة 2

ملاحظة هامة 3

3. باستخدام العلامات

لإنشاء كتلة إعلام:

ملاحظة هامة 1

ملاحظة هامة 2

ملاحظة هامة 3

1. من المهم أن تتذكر أن كتلة الإشعارات يجب أن تكون مرئية ومفهومة بسهولة للمستخدمين حتى يتمكنوا من رؤية وقراءة الرسائل والتحذيرات المهمة بسرعة على صفحة الويب.
2. لإنشاء إشعار ، اتبع هذه الخطوات البسيطة:

إضافة زر إلى صفحة ويب باستخدام علامة

. حدد السمة للزر

أونكليك

3. لإظهار منبثقة إعلام. على سبيل المثال:

وظيفة شونوتيفيكاتيون () {

تنبيه ("إعلام!");

}

ربط الدالة بالزر عن طريق إضافة سمة

أونكليك

في العلامة

، وحدد اسم الوظيفة بدون أقواس. على سبيل المثال:

انقر لي!

بعد الانتهاء من هذه الخطوات ، سيؤدي النقر فوق الزر إلى عرض نافذة منبثقة بها إشعار "إشعار!".

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

سؤال وجواب

كيف يمكنني إنشاء إشعار بعد النقر على زر في أتش تي أم أل?