كيفية جعل زر نشط في هتمل: دليل مفصل وأمثلة

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

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

ادفعني

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

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

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

الخطوة 1: تحديد نوع الزر في هتمل

قبل إجراء زر نشط في هتمل ، تحتاج إلى تحديد مظهره. هناك عدة طرق لإنشاء أزرار في هتمل:

1. ادفعني
2. . على سبيل المثال:
4. استخدام عناصر أخرى مع أنماط كس:

) وتطبيق أنماط كس لهم. على سبيل المثال:

• ادفعني
• في هذه الحالة ، إلى العنصر
• يعتمد اختيار نوع الزر على التصميم والوظائف المطلوبة للصفحة. بعد تحديد نوع الزر ، يمكنك المتابعة إلى الخطوة التالية — لجعل الزر نشطا باستخدام هتمل و كس.

هناك عدة أنواع من الأزرار في هتمل التي يمكنك استخدامها في تطبيق الويب الخاص بك أو على موقع الويب الخاص بك. كل نوع من الأزرار له تفرده الخاص ويمكن تخصيصه حسب التصميم والوظائف الخاصة بك.

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

الصحافة

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

الصحافة

زر الصورة هو زر يحتوي على صورة فقط بدلا من النص. يمكن تصميمه بنفس طريقة الزر العادي والرد على نقرة. مثال:

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

اختر

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

التبديل

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

إنشاء زر باستخدام علامة هتمل

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

انقر لي

سوف تبدو النتيجة مثل هذا:

انقر لي

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

• ادفعني
• بالإضافة إلى استخدام علامة ، يمكنك أيضا استخدام علامة مع سمة النوع="زر" لإنشاء زر:

فإن النتيجة تبدو هي نفسها باستخدام العلامة :

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

فئة

: يحدد فئة واحدة أو أكثر يمكن استخدامها لإضافة أنماط عبر كس;

نمط

: يسمح لك بتطبيق الأنماط مباشرة على عنصر عن طريق تحديد خصائص كس.

.

التصميم عبر كس

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

• في هذا المثال ، حددنا
• داخل
• وتطبيقه على الزر باستخدام السمة
• .

نتيجة لذلك ، نحصل على زر بخلفية زرقاء ونص أبيض.

يمكنك أيضا استخدام خصائص كس الأخرى لتحقيق مظهر الزر المطلوب ، على سبيل المثال:

نصف قطر الحدود: 5 بكسل;

- تقريب زوايا الزر;

الحشو: 10 بكسل 20 بكسل;

1. - المسافة البادئة داخل الزر;
2. تحويل النص: أحرف كبيرة;

• - تحويل النص إلى أحرف كبيرة;
• مربع الظل: 2 بكسل 2 بكسل 5 بكسل رغبا (0 ، 0 ، 0 ، 0.1);

- إضافة ظل للزر.

مثال على زر التصميم باستخدام خصائص كس إضافية:

انقر على لي!

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

الخطوة 2: إضافة وظائف إلى الزر

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

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

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

لصق التعليمات البرمجية الخاصة بك داخل وظيفة مجهولة التي تمرر إلى أديفنتليستينر (). سيتم تنفيذ هذا الرمز عند النقر فوق الزر.

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

سؤال وجواب

كيفية جعل زر نشط في أتش تي أم أل?

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