إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الأزرار العادية

    أنواع الأزرار

    بشكل عام هناك 4 أنواع مهمة من الأزرار التي يمكن إضافتها في النماذج و جميعها يمكن إضافها بواسطة الوسم <input>.

    لتحديد نوع الزر الذي سيتم إظهاره يجب إضافة الخاصية type للوسم و تمرير إحدى القيم المجهزة مسبقاً كالتالي:

    • <input type="button"> للحصول على زر عادي.
    • <input type="submit"> للحصول على زر مخصص لإرسال بيانات النموذج.
    • <input type="reset"> للحصول على زر مخصص لإعادة تعيين البيانات الأولية في النموذج.
    • <input type="file"> للحصول على زر مخصص لجعل المستخدم يختار ملف موجود في جهازه.


    ملاحظة

    إفتراضياً في حال لم تحدد شكل الوسم <input> سيتم إعتبار أنك تريد عرض مربع نص عادي <input type="text">.

    إضافة زر عادي

    للحصول على زر عادي يمكنك استخدام الوسم <button type="button">text</button> أو استخدام الوسم <input type="button" value="text">.
    طبعاً, في الحالتين مكان الكلمة text يجب أن تمرر النص الذي تريده أن يظهر على الزر.

    الفرق الأساسي بينهما هو أن الوسم <button> يمكن وضع وسم آخر بداخله في حين أن الوسم <input> يمكن وضع نص فقط بداخله.
    كمثال بسيط, يمكنك وضع وسم <img> بداخل الوسم <button> لعرض أيقونة في الزر.


    معلومة تقنية

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


    في المثال التالي قمنا بعرض زرين, الأول بواسطة الوسم <button> و الثاني بواسطة الوسم <input>.

    المثال الأول

    <button type="button">Button 1</button>
    <input type="button" value="Button 2">
    		

    جرب الكود



    في المثال التالي قمنا بعرض زرين, الأول بواسطة الوسم <button> و الثاني بواسطة الوسم <input>.

    عند النقر على أي زر منهما سيتم عرض رسالة تنبيه للمستخدم بداخلها النص "Hello User".
    بالمبدأ قمنا بإضافة الخاصية onclick للزرين و تمرير نص الذي نريد عرضه عند النقر عليهما بواسطة كود جافا سكريبت.

    المثال الثاني

    <button type="button" onclick="alert('Hello User');">Display Message</button>
    <input type="button" value="Display Message" onclick="alert('Hello User');">
    		

    جرب الكود



    في المثال التالي قمنا بوضع أيقونة بداخل الزر.

    المثال الثالث

    <button type="button">Play <img src="play.PNG"></button>
    		

    جرب الكود

    إضافة زر لإرسال بيانات النموذج

    لإضافة زر يقوم بإرسال بيانات النموذج بشكل تلقائي للموقع عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه submit.

    إفتراضياً في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه submit سيظهر عليه الكلمة Submit.
    لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.


    في المثال التالي قمنا بإضافة زر خاص لإرسال بيانات النموذج.

    مثال

    <input type="submit" value="Login">
    		

    جرب الكود

    إضافة زر لإعادة تعيين قيم النموذج

    لإضافة زر يقوم بحذف القيم المدخلة لعناصر النموذج و إعادتها لقيمها الأولية بشكل تلقائي عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه reset.

    إفتراضياً في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه reset سيظهر عليه الكلمة Reset.
    لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.


    في المثال التالي قمنا بإضافة زر خاص لإعادة قيم النموذج الأولية.

    مثال

    <input type="reset" value="Reset Values">
    		

    جرب الكود

    إضافة زر يتيح للمستخدم اختيار ملف من حاسوبه

    لإضافة زر يتيح للمستخدم اختيار ملف موجود في جهازه عندما يقوم بالنقر عليه نستخدم الوسم <input> مع تحديد أن نوعه file.
    ملاحظة: على هذا الزر بالتحديد يظهر النص "Choose File" مع الإشارة إلى أن هذا النص ثابت لا يمكنك تغييره.


    في المثال التالي قمنا بإضافة زر يسمح للمستخدم باختيار ملف في حاسوبه.

    مثال

    <input type="file">
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب